• JS操作DOM对象(访问节点)


    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>访问节点</title>
    
        <!--
        DOM(Document Object Model) 文档对象模型
        HTML-DOM
        CSS-DOM
        XML-DOM
        DOM-CORE
        noteType的返回值:
        1 :元素节点
        2 :属性节点
        3 :文本节点
        8 :注释节点
        9 :文档节点
        -->
    </head>
    <body>
    
      <ul>
          <li>大家辛苦了1</li>
          <li>大家辛苦了2</li>
          <li>大家辛苦了3</li>
      </ul>
    
     <img src="../images/cat.jpg" alt="这是一只可爱的小猫咪"  id="cat">
      
      
    
    <script type="text/javascript">
        //获取ul中的第一个li
       var ul= document.getElementsByTagName("ul")[0];
        //输出节点的名称
        document.write("ul节点的名称:"+ul.nodeName+"<br/>");
        document.write("ul节点的类型:"+ul.nodeType+"<br/>");
        document.write("ul节点的值:"+ul.nodeValue+"<br/>");
        // 01.获取ul中的第一个li  元素节点
        var li=ul.firstElementChild;
        document.write("li节点的名称:"+li.nodeName+"<br/>");
        document.write("li节点的类型:"+li.nodeType+"<br/>");
        document.write("li节点的值:"+li.nodeValue+"<br/>");
      //获取小猫咪
        var cat=document.getElementById("cat");
        document.write("img节点的名称:"+cat.nodeName+"<br/>");
        document.write("img节点的类型:"+cat.nodeType+"<br/>");
        document.write("img节点的值:"+cat.nodeValue+"<br/>");
      //动态改变小猫咪的 宽度和高度
        cat.setAttribute("width","200px");
        cat.setAttribute("height","200px");
      //获取我们的属性对应的属性值
        var src= cat.getAttribute("src");
        document.write("src:"+src+"<br/>");
        //02.获取属性节点
        var alt= cat.getAttributeNode("alt");
        document.write("img节点alt的名称:"+alt.nodeName+"<br/>");
        document.write("img节点alt的类型:"+alt.nodeType+"<br/>");
        document.write("img节点alt的值:"+alt.nodeValue+"<br/>");
        //03. 获取第一个li的内容
       var  text= li.firstChild;  //文本节点
        document.write("text的名称:"+text.nodeName+"<br/>");
        document.write("text的类型:"+text.nodeType+"<br/>");
        document.write("text的值:"+text.nodeValue+"<br/>");
    </script>
    
    </body>
    </html>
  • 相关阅读:
    python 接口自动化测试搭建钉钉环境
    接口测试流程梳理
    兼容性测试
    软件测试流程
    软件测试---黑盒测试的测试用例的设计方法
    软件基础之-----测试的方法
    基于Selenium2+Java的UI自动化(8)- 显式等待和隐式等待
    基于Selenium2+Java的UI自动化(6)-操作Alert、confirm、prompt弹出框
    基于Selenium2+Java的UI自动化(5)
    基于Selenium2+Java的UI自动化(4)
  • 原文地址:https://www.cnblogs.com/zwy0709/p/7774926.html
Copyright © 2020-2023  润新知