JS操作DOM对象（访问节点）

Posted 2020-10-13 亲亲的我来了

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于JS操作DOM对象（访问节点）的主要内容，如果未能解决你的问题，请参考以下文章

js操作DOM对象

原生JS和jQuery操作DOM的区别小结