zoukankan      html  css  js  c++  java
  • 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>  
  • 相关阅读:
    Epplus导出excel
    访问GitHub需要修改hosts
    如何将你的.Net Core程序部署成为服务
    生成雪花Id类
    文件操作帮助类
    工作流-WikeFlow
    《C语言进阶剖析》课程目录
    《C++深度解析》课程目录
    USB URB的status及其代表的意义
    数据结构优秀博文整理
  • 原文地址:https://www.cnblogs.com/starstarstar/p/8875565.html
Copyright © 2011-2022 走看看