• 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>
  • 相关阅读:
    如何写一个简单的解释器
    linux下ifconfig, DNS以及route配置
    再次看编码
    Linux kernel API的查看
    学习Haskell的一些资料
    Unix,windows和Mac中的换行
    Cmake中的find_package功能
    知乎上有一个问题“在mfc框架中,有上面方法能直接将opencv2.0库中的Mat格式图片传递到Picture Control”中显示?
    RANSAC和Flitline
    花40分钟写一个-CBIR引擎-代码公开
  • 原文地址:https://www.cnblogs.com/zwy0709/p/7774926.html
Copyright © 2020-2023  润新知