你的位置:首页 > Java教程

[Java教程]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.firstChild2 //与elementNode.childNodes[0]是同样的效果。 

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点,则该属性返回 NULL。
语法:

1 node.lastChild2 //与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.parentNode2 //父节点只能有一个。

获取 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">javascript10     <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 = javascriptnextsibling: LI = jquery