javascript DOM对象
文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
先来看看下面代码:
将HTML代码分解为DOM节点层次图:
HTML文档可以说由节点构成的集合,DOM节点有:
1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。
2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.adminwang.com"。
节点属性:
遍历节点树:
以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。
DOM操作:
注意:前两个是document方法。
getElementsByName()方法
返回带有指定名称的节点对象的集合。
语法:
document.getElementsByName(name)
与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。
看看下面的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE HTML>
< html >
< head >
< script type = "text/javascript" >
function getnum(){
var mynode=document.getElementsByName("myt") ;
alert(mynode.length);
}
</ script >
</ head >
< body >
< a name = "myt" href = "#" >我是连接一</ a >< br />
< a name = "myt" href = "#" >我是连接二</ a >< br />
< a name = "myt" href = "#" >我是连接三</ a >< br />
< input type = "button" onclick = "getnum()" value = "看看有几个链接?" />
</ body >
</ html >
|
运行结果:
getElementsByTagName()方法
返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称,如p、a、img等标签名。
2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。
看看下面代码,通过getElementsByTagName()获取节点。
getAttribute()方法
通过元素节点的属性名称获取属性的值。
语法:
elementNode.getAttribute(name)
说明:
1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。
2. name:要想查询的元素节点的属性名字
看看下面的代码,获取P标签的属性值:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title >getAttribute()</ title >
</ head >
< body >
< p id = "info" title = "getAttribute()" onclick = "att()" >点击获取标签属性值</ p >
< script type = "text/javascript" >
function att(){
var con=document.getElementById("info");
var a1=con.getAttribute("id");
var a2=con.getAttribute("title");
document.write("P标签ID:"+a1+"< br />"+"title为:"+a2);
}
</ script >
</ body >
</ html >
|
运行结果:
setAttribute()方法
setAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
语法:
elementNode.setAttribute(name,value)
说明:
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意:
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数。
节点属性
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
一、nodeName 属性: 节点的名称,是只读的。
1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document
二、nodeValue 属性:节点的值
1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
实例代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title >节点属性</ title >
</ head >
< body >
< ul >
< li >javascript</ li >
< li >HTML/CSS</ li >
< li >jQuery</ li >
</ ul >
< script type = "text/javascript" >
var a=document.getElementsByTagName("li");
for(var i=0;i< a.length ;i++){
var b = a [i].nodeName;
var c = a [i].nodeValue;
var d = a [i].nodeType;
document.write("名称:"+b+" "+"值:"+c+" "+"类型:"+d+"<br>");
}
</ script >
</ body >
</ html >
|
运行结果:
访问子结点childNodes()
访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
语法:
elementNode.childNodes
注意:
如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。
我们来看看下面的代码:
运行结果:
IE8及更早的版本:
UL子节点个数:3
节点类型:1
其它浏览器:
UL子节点个数:7
节点类型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示:
注意:
1. IE8及更早的版本、firefox、chrome、opera、safari存在兼容问题
2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE8及更早的版本是3,其它浏览器是7,如下图所示:
3.从IE9开始不存在这个问题。经测试目前我们正在使用的主流浏览器基本不存在此类问题,读者不必在这个问题上纠结。
如果把代码改成这样:
1
|
< ul >< li >javascript</ li >< li >jQuery</ li >< li >PHP</ li ></ ul >
|
运行结果:(IE和其它浏览器结果是一样的)
UL子节点个数:3
节点类型:1
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:
node.firstChild
说明:与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:
node.lastChild
说明:与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
注意: 上小节中,我们知道Internet Explorer 8及之前老版本会忽略节点之间生成的空白文本节点,而其它浏览器不会。我们可以通过检测节点类型,过滤子节点。 (下面的内容讲解)
示例代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title >无标题文档</ title >
</ head >
< body >
< div id = "con" >
< p >javascript</ p >
< div >jQuery</ div >
< h5 >PHP</ h5 >
</ div >
< script type = "text/javascript" >
var x=document.getElementById("con");
document.write(x.firstChild.nodeName+"< br >"); //输出指定元素(div)的第一个子节点。
document.write(x.lastChild.nodeName+"< br >"); //第16行输出指定元素(div)的最后一个子节点。
</ script >
</ body >
</ html >
|
访问父节点parentNode()
获取指点节点的父节点
语法:
elementNode.parentNode
注意:父节点只能有一个。
看看下面的例子,获取 P 节点的父节点,代码如下:
1
2
3
4
5
6
7
|
<div id= "text" >
<p id= "con" > parentNode 获取指点节点的父节点</p>
</div>
<script type= "text/javascript" >
var mynode= document.getElementById( "con" );
document.write(mynode.parentNode.nodeName);
</script>
|
运行结果:
parentNode 获取指点节点的父节点
DIV
访问祖节点:
elementNode.parentNode.parentNode
看看下面的代码:
1
2
3
4
5
6
7
8
9
10
|
<div id= "text" >
<p>
parentNode
<div id= "con" > 获取指点节点的父节点</div>
</p>
</div>
<script type= "text/javascript" >
var mynode= document.getElementById( "con" );
document.write(mynode.parentNode.nodeName);
</script>
|
运行结果:
parentNode
获取指点节点的父节点
DIV
注意: 浏览器兼容问题,chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。
语法:
nodeObject.nextSibling
说明:如果无此节点,则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。
语法:
nodeObject.previousSibling
说明:如果无此节点,则该属性返回 null。
注意: 两个属性获取的是节点,而不是元素。Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如果是,为元素节点,不是跳过。
运行结果:
LI = javascript
nextsibling: LI = jquery
创建元素节点createElement
createElement()方法可创建元素节点。此方法可返回一个 Element 对象。
语法:
document.createElement(tagName)
参数:
tagName:字符串值,这个字符串用来指明创建元素的类型。
注意:要与appendChild() 或 insertBefore()方法联合使用,将元素显示在页面中。
我们来创建一个按钮,代码如下:
1
2
3
4
5
6
7
|
<script type= "text/javascript" >
var body = document.body;
var input = document.createElement( "input" );
input.type = "button" ;
input.value = "创建一个按钮" ;
body.appendChild(input);
</script>
|
效果:在HTML文档中,创建一个按钮。
我们也可以使用setAttribute来设置属性,代码如下:
1
2
3
4
5
6
7
8
9
|
<script type= "text/javascript" >
var body= document.body;
var btn = document.createElement( "input" );
btn.setAttribute( "type" , "text" );
btn.setAttribute( "name" , "q" );
btn.setAttribute( "value" , "使用setAttribute" );
btn.setAttribute( "onclick" , "javascript:alert('This is a text!');" );
body.appendChild(btn);
</script>
|
效果:在HTML文档中,创建一个文本框,使用setAttribute设置属性值。 当点击这个文本框时,会弹出对话框“This is a text!”。
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点,返回新创建的 Text 节点。
语法:
document.createTextNode(data)
参数:
data : 字符串值,可规定此节点的文本。
我们来创建一个<div>元素并向其中添加一条消息,代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title >无标题文档</ title >
< style type = "text/css" >
.message{
width:200px;
height:100px;
background-color:#CCC;}
</ style >
</ head >
< body >
< script type = "text/javascript" >
var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript!");
element.appendChild(textNode);
document.body.appendChild(element);
</ script >
</ body >
</ html >
|
运行结果:
插入节点appendChild()
在指定节点的最后一个子节点列表之后添加一个新的子节点。
语法:
appendChild(newnode)
参数:
newnode:指定追加的节点。
我们来看看,div标签内创建一个新的 P 标签,代码如下:
运行结果:
HTML
JavaScript
This is a new p
为ul添加一个li,示例代码2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE HTML>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< title >插入节点</ title >
</ head >
< body >
< ul id = "test" >
< li >JavaScript</ li >
< li >HTML</ li >
</ ul >
< script type = "text/javascript" >
var otest = document.getElementById("test");
var newnode = document.createElement("li");
var newtext= document.createTextNode("PHP");
newnode.appendChild(newtext);
otest.appendChild(newnode);
</ script >
</ body >
</ html >
|
插入节点insertBefore()
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:
insertBefore(newnode,node);
参数:
newnode:要插入的新节点。
node:可选,指定此节点前插入节点。
我们来看看下面代码,和 appendChild()效果一样。
运行结果:
JavaScript
HTML
This is a new p
我们在来看看下面代码,在指定节点前插入节点。
运行结果:
This is a new p
JavaScript
HTML
注意: otest.insertBefore(newnode,node); 也可以改为: otest.insertBefore(newnode,otest.childNodes[0]);
删除节点removeChild()
removeChild() 方法从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。
语法:
nodeObject.removeChild(node)
参数:
node :必需,指定需要删除的节点。
我们来看看下面代码,删除子点。
运行结果:
HTML
删除节点的内容: javascript
注意: 把删除的子节点赋值给 x,这个子节点不在DOM树中,但是还存在内存中,可通过 x 操作。
如果要完全删除对象,给 x 赋 null 值,代码如下:
替换元素节点replaceChild()
replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。
语法:
node.replaceChild (newnode,oldnew )
参数:
newnode : 必需,用于替换 oldnew 的对象。
oldnew : 必需,被 newnode 替换的对象。
我们来看看下面的代码:
效果: 将文档中的 Java 改为 JavaScript。
注意:
1. 当 oldnode 被替换时,所有与之相关的属性内容都将被移除。
2. newnode 必须先被建立。
浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5:
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案:
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
网页尺寸scrollHeight
scrollHeight和scrollWidth,获取网页内容高度和宽度(不包括滚动条)。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度,可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。
三、浏览器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrolltHeight;
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
网页尺寸offsetHeight
offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
网页卷去的距离
我们先来看看下面的图:
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop:获取指定对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 。
注意:区分大小写
综合示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
< html >
< head >
< title > new document </ title >
< meta http-equiv = "Content-Type" content = "text/html; charset=gbk" />
< script type = "text/javascript" >
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
function over(x){
x.style.backgroundColor="#eee";
}
function out(x){
x.style.backgroundColor="#fff";
}
// 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
function add() {
var a = document.createElement("a");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var tr = document.createElement("tr");
var table = document.getElementById("table");
td3.appendChild(a);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);
a.href="javascript:;";
a.innerHTML="删除";
a.setAttribute("onclick","del(this)");
tr.setAttribute("onmouseover","over(this)");
tr.setAttribute("onmouseout","out(this)");
}
// 创建删除函数
function del(x){
var table=x.parentNode.parentNode.parentNode;
table.removeChild(x.parentNode.parentNode);
}
</ script >
</ head >
< body >
< table border = "1" width = "50%" id = "table" >
< tr onmouseover = "over(this)" onmouseout = "out(this)" >
< th >学号</ th >
< th >姓名</ th >
< th >操作</ th >
</ tr >
< tr onmouseover = "over(this)" onmouseout = "out(this)" >
< td >xh001</ td >
< td >王小明</ td >
< td >< a href = "javascript:;" onclick = "del(this)" >删除</ a ></ td > <!--在删除按钮上添加点击事件 -->
</ tr >
< tr onmouseover = "over(this)" onmouseout = "out(this)" >
< td >xh002</ td >
< td >刘小芳</ td >
< td >< a href = "javascript:;" onclick = "del(this)" >删除</ a ></ td > <!--在删除按钮上添加点击事件 -->
</ tr >
</ table >
< input type = "button" value = "添加一行" onclick = "add()" /> <!--在添加按钮上添加点击事件 -->
</ body >
</ html >
|
亲自拷贝以上代码到本地,测试下。
javascript DOM对象相关推荐
- JavaScript(Dom对象的操作)
Dom对象的操作 核心 doucument 获得Dom节点 更新节点 实战演练 删除Dom节点 插入节点 把已有的标签进行插入 创建一个新的标签,实现插入 在子节点前插入(insertBefore) ...
- JavaScript DOM对象控制HTML元素详解
一.DOM对象控制HTML 1.方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元 ...
- web前端学习(四)JavaScript学习笔记部分(7)-- JavaScript DOM对象控制HTML元素详解...
1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素 getAttribute() 获取元 ...
- JavaScript一步一步:JavaScript 对象和HTML DOM 对象
JavaScript 对象 点击以下链接,可以获得以下对象的更多信息,包括它们的集合.属性.方法以及事件.其中包含大量实例! 对象 描述 Window J ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- JavaScript——String转DOM对象解决方案
解决方案 JavaScript function parseToDOM(str){var div = document.createElement("div");if(typeof ...
- JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...
- [举一反三]使用javascript转换字符串为dom对象(字符串动态创建dom)
前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程 ...
最新文章
- xp大容量u盘补丁_Win XP系统下载与安装(U盘)
- [多媒体]MKV 配音分离提取, 伴奏提取
- python矩阵相加_【python矩阵相加怎么做,这可是证明python功能的大好机会】- 环球网校...
- Spring Data 分页和排序 PagingAndSortingRepository的使用(九)
- 2020-07-17
- python视频教程免费慕课网-python视频教程慕课 | 最好的python视频教程谁有
- PIC温控器c语言程序,PIC CCS C语言程序范例.doc
- jsp中调用静态的java方法调用_如何在JSP/EL中调用静态方法?
- TWINCAT2安装问题
- 5G六大关键技术及未来发展趋势
- 华为策略路由,实现双线选路上网
- java 控制系统音量_用JNI实现调节win7系统音量
- 顶尖、顶级、权威期刊目录
- 事业单位招聘计算机岗位考试题,计算机考试题库:计算机考试练习题(136)
- HTML Table设置无边框、无分割线
- 数据可视化图表插件_7个最佳数据可视化WordPress插件(图表和图表)
- 目标拎不清,谈什么选择呢?
- dlink 备份文件_D-Link路由器备份路由器配置信息教程
- 凤凰新闻岳建雄:互联网已经成为传统行业
- http://localhost:8080打不开
热门文章
- hdu1316 大数
- 【设计模式】观察者模式 ( 简介 | 适用场景 | 优缺点 | 代码示例 )
- 【错误记录】Android Studio 运行报错 ( There is not enough memory to perform the requested operation. )
- 【错误记录】Android Studio 编译报错 ( AppCompat does not support the current theme features )
- day36 10-Hibernate中的事务:解决丢失更新
- 微软笔试题,机器人消砖块
- [转载]Python爬虫入门三之Urllib库的基本使用
- 8条腾讯的产品管理方式
- 服务器中毒 HTML.IFrame.laka
- ma应用、超级短线、分钟短线买卖和看盘心得