DOM对象控制HTML无素——详解2
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM对象控制HTML无素——详解2相关的知识，希望对你有一定的参考价值。
节点属性
在文档对象模型 (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
访问子结点childNodes
访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
1 <body> 2 <ul> 3 <li>javascript</li> 4 <li>jquery</li> 5 <li>html5</li> 6 </ul> 7 <script> 8 var childNode = document.getElementsByTagName("ul")[0].childNodes 9 document.write("ul子节点的长度"+childNode.length+"</br>") //=>7 10 document.write("ul第一个子节点的类型"+childNode[0].nodeType)//=>3 11 </script> 12 </body>
IE:
UL子节点个数:3 节点类型:1
其它浏览器:
UL子节点个数:7 节点类型:3
注意:
1. IE全系列、firefox、chrome、opera、safari兼容问题
2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7
访问子结点的第一和最后项
一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.firstChild
说明：与elementNode.childNodes[0]是同样的效果。
二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。
语法：
node.lastChild
说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。
1 <body> 2 <ul> 3 <li>javascript</li> 4 <li>jquery</li> 5 <li>html5</li> 6 </ul> 7 <script> 8 var ul = document.getElementsByTagName("ul")[0] 9 var firstChild = ul.firstChild.nodeType 10 var lastChild = ul.lastChild.nodeName 11 document.write(firstChild+" "+lastChild) //=>3 , #test 12 </script> 13 </body>
以上是关于DOM对象控制HTML无素——详解2的主要内容，如果未能解决你的问题，请参考以下文章