码迷,mamicode.com
首页 > Web开发 > 详细

DOM对象控制HTML无素——详解2

时间:2016-02-07 21:21:54      阅读:406      评论:0      收藏:0      [点我收藏+]

标签:

节点属性

在文档对象模型 (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

标签:

原文地址:http://www.cnblogs.com/Ziksang/p/5184797.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!