Js DOM中查询与家族关系_document.geielementbyid().click-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_53972872/article/details/129442101

DOM，作为JsBOM中相对来说很重要的一个知识点，主要是对document进行增、删、改、查相关操作。那一般的查询操作都有那些呢？

DOM的查询有关系，常见的查询关系有

geiElementById("查询对象") geiElementsByTagName("查询对象") geiElementByClassName("查询对象") querySelector("查询对象") querySelectorAll("查询对象")

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="haha">
            一刀999，是兄弟就来看你 <br>
            <button id="hehe">关闭</button>
        </div>
        <script type="text/javascript">
            hehe.onclick = function() {
                haha.remove();
            }
        </script>
    </body>
    <body>
        <div id="haha">
            <div>1</div>
            <div id="hehe">
                <span class="xixi">a</span>
                <span>b</span>
                <span class="xixi">c</span>
                <span class="xixi">d</span>
            </div>
            <div>3</div>
        </div>
        <script type="text/javascript">

1.根据ID获取对应的标签这个写法可以简写成 hehe .id具有唯一性当id不是

关键字的时候在js中可以直接使用

    var a1 = document.getElementById("hehe");
            console.log(a1);

2 根据标签名查询对应的所有标签

{ 0: span.xixi, 1: span, 2: span.xixi, 3: span.xixi,

length: 4 }

var a2 = document.getElementsByTagName("span");
            a2[0].innerHTML = "666";
            console.log(a2);

3 根据类名查询对应的所有标签

HTMLCollection { 0: span.xixi, 1: span.xixi, 2: span.xixi,

length: 3}

var a3 = document.getElementsByClassName("xixi");

4 新版本写法 querySelector获取对应选择器选取内容的第一个

var a4 = document.querySelector("#hehe");
            var a5 = document.querySelector(".xixi");
            var a6 = document.querySelector("span");
            console.log(a4, a5, a6);

5 新版本写法 querySelectorAll获取对应选择器选取内容的第一个

var a7 = document.querySelectorAll(".xixi");
var a8 = document.querySelectorAll("span");
console.log(a7, a8)

随着基本关系的不断使用，不难发现，这些基本操作或许已经无法满足不了我们的操作需求了，那这个时候我们应该如何去查询，相关内容呢？

在这个时候就需要引入家族关系了

var b = document.getElementById("hehe");
            var b1 = a.parentElement;                //获取父节点
            var b2 = a.previousElementSibling;       //获取上一个元素节点
            var b3 = a.nextElementSibling;           //获取下一个元素节点
            var b4 = a.firstElementChild;            //获取第一个孩子节点    
            var b5 = a.lastElementChild;             //获取最后一个孩子节点
            var b6 = a.children;                     //获取全部孩子节点