DOM操作指南-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44371012/article/details/92377041

1.获取DOM对象

根据id名来获取：document.getElementById("id名")；

根据class名来获取，返回一个数组：document.getElementsByClassName("class名");

根据标签名来获取，返回一个数组：document.getElementsByTagName("标签名");

根据name名来获取，返回一个数组：document.getElementsByName("name名");

根据id/class名来获取：

document.querySelector(".class名"); //返回第一个class

document.querySelector("#id名");

document.querySelectorAll(".class名"); //返回一个数组

2.节点之间的关系

<html>
<body>
    <div id="box">
        <span name="eg">example<span>
        <input class="btn"></input>
        <input class="btn"></input>
    </div>
</body>
<script>
 var box=document.getElementById("box");
 var span=document.getElementsByTagName("span")[0];
 var input1=document.getElementsByClassName("input")[0];

</script>
</html>

获取父节点：parentNode; //var parentNode=span.parentNode;

获取上一个兄弟节点： var previous = input1.previousElementSibling || span.previousSibling;

获取下一个兄弟节点： var next = input1.nextElementSibling || span.nextSibling;

获取标签中第一个子节点：box.firstElementChild || box.firstChild

获取标签中最后一个子节点：box.lastElementChild || box.lastChild

获取所有元素节点：nodeType ;

当nodeType=1，获取元素节点；当nodeType=2,获取属性节点；当nodeType=3,获取文本节点。