Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性
在文档对象模型 (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
获取所有LI标签，并输出相应节点的名称、节点的值、节点的类型：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>节点属性</title> 6 </head> 7 <body> 8 <ul> 9 <li>javascript</li> 10 <li>HTML/CSS</li> 11 <li>jQuery</li> 12 </ul> 13 <script type="text/javascript"> 14 var node = document.getElementsByTagName("li"); 15 for(var i = 0; i < node.length; i++){ 16 document.write("节点名称：" + node[i].nodeName + "<br/>"); 17 document.write("节点的值：" + node[i].nodeValue + "<br/>"); 18 document.write("节点类型：" + node[i].nodeType + "<br/>"); 19 } 20 </script> 21 </body> 22 </html>
运行结果：
访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
代码如下:
运行结果:
IE:
UL子节点个数:3
节点类型:1
其它浏览器:
UL子节点个数:7
节点类型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7
如下图所示:
如果把代码改成这样:
<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>
运行结果:（IE和其它浏览器结果是一样的）
UL子节点个数:3
节点类型:1
Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。
判断节点nodeType是否为1, 如是为元素节点，跳过。
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
1 node.firstChild 2 //与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
1 node.lastChild 2 //与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
找到指定元素(div)的第一个和最后一个子节点:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <body> 8 <div id="con"><p>javascript</p><div>jQuery</div><h5>PHP</h5></div> 9 <script type="text/javascript"> 10 var x=document.getElementById("con"); 11 document.write(x.firstChild.nodeName + "<br/>"); 12 document.write(x.lastChild.nodeName + "<br/>"); 13 </script> 14 </body> 15 </html>
访问父节点parentNode
获取指定节点的父节点
语法：
1 elementNode.parentNode 2 //父节点只能有一个。
获取 P 节点的父节点，代码如下:
1 <div id="text"> 2 <p id="con"> parentNode 获取指点节点的父节点</p> 3 </div> 4 <script type="text/javascript"> 5 var mynode= document.getElementById("con"); 6 document.write(mynode.parentNode.nodeName); 7 </script>
运行结果:
parentNode 获取指点节点的父节点
DIV
访问祖节点:
elementNode.parentNode.parentNode
代码如下:
1 <div id="text"> 2 <p> 3 parentNode 4 <span id="con"> 获取指点节点的父节点</span> 5 </p> 6 </div> 7 <script type="text/javascript"> 8 var mynode= document.getElementById("con"); 9 document.write(mynode.parentNode.parentNode.nodeName); 10 </script>
运行结果:
parentNode获取指点节点的父节点
DIV
浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。
使用访问父节点parentNode，将"HTML/CSS"课程内容输出：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <body> 8 <ul id="con"> 9 <li id="lesson1">javascript 10 <ul> 11 <li id="tcon"> 基础语法</li> 12 <li>流程控制语句</li> 13 <li>函数</li> 14 <li>事件</li> 15 <li>DOM</li> 16 </ul> 17 </li> 18 <li id="lesson2">das</li> 19 <li id="lesson3">dadf</li> 20 <li id="lesson4">HTML/CSS 21 <ul> 22 <li>文字</li> 23 <li>段落</li> 24 <li>表单</li> 25 <li>表格</li> 26 </ul> 27 </li></ul> 28 <script type="text/javascript"> 29 var mylist = document.getElementById("tcon"); 30 document.write(tcon.parentNode.parentNode.parentNode.lastChild.innerHTML) 31 </script> 32 </body> 33 </html>
访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：
nodeObject.nextSibling //如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：
nodeObject.previousSibling //如果无此节点，则该属性返回 null。
两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>nextSibling</title> 6 </head> 7 <body> 8 <ul id="u1"> 9 <li id="a">javascript</li> 10 <li id="b">jquery</li> 11 <li id="c">html</li> 12 </ul> 13 <ul id="u2"> 14 <li id="d">css3</li> 15 <li id="e">php</li> 16 <li id="f">java</li> 17 </ul> 18 <script type="text/javascript"> 19 function get_nextSibling(n){ 20 var x=n.nextSibling; 21 while (x && x.nodeType!=1){ 22 x=x.nextSibling; 23 } 24 return x; 25 } 26 27 var x=document.getElementsByTagName("li")[0]; 28 document.write(x.nodeName); 29 document.write(" = "); 30 document.write(x.innerHTML); 31 32 var y=get_nextSibling(x); 33 34 if(y!=null){ 35 document.write("<br />nextsibling: "); 36 document.write(y.nodeName); 37 document.write(" = "); 38 document.write(y.innerHTML); 39 }else{ 40 document.write("<br>已经是最后一个节点"); 41 } 42 </script> 43 </body> 44 </html>
运行结果:
LI = javascript
nextsibling: LI = jquery