DOM中的节点属性

　　我们在做web测试时，适当了解前端的知识有助于我们测试工作中bug的定位，同时也有助于自动化测试中的元素定位。下面我简单写一下关于JavaScript中的DOM的节点元素。

　　DOM ，文件对象模型，主要是针对HTML 和XML文档中的一个api(应用程序接口)。DOM定义了访问和处理HTML文档的标准方法，描绘了一个层次化的节点树。DOM将HTML文档呈现出元素、属性和文本的树形结构。

　　在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 li=document.getElementsByTagName("li");  
15      for(var i=0;i<li.length;i++){  
16          document.write("节点名称："+li[i].nodeName+" 节点属性："+li[i].nodeValue+"节点类型："+li[i].nodeType+"<br/>");  
17          }  
18   </script>  
19 </body>  
20 </html>

一、nodeName 属性: 节点的名称，是只读的。

二、nodeValue 属性：节点的值

三、nodeType 属性: 节点的类型，是只读的。

猜你喜欢