31_JavaScript之获取DOM元素_获取dom元素的child-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44543513/article/details/107271448

1.获取元素
像getElementById、getElementsByClassName、getElementsByName、getElementsByTagName这些了解即可，现在获取元素我们统一用querySelector就好了，不需要去记那么多。

querySelector只会返回根据指定选择器找到的第一个元素
querySelectorAll会返回指定选择器找到的所有元素

<body>
    <div class="father">
        <form>
            <input type="text" name="test">
            <input type="password" name="test">
        </form>
    </div>

    <script>
        let father = document.querySelector('.father');
        console.log(father);
        let inputs = document.querySelectorAll('input');
        console.log(inputs);
    </script>
</body>

控制台输出：
在这里插入图片描述

2.获取指定元素所有的子元素

children属性获取到的是指定元素中所有的子元素

<body>
    <div>
        <h1>1</h1>
        <h2>2</h2>
        <p class="item">3</p>
        <p>4</p>
        <span>5</span>
    </div>

    <script>
        let div = document.querySelector("div");
        let divChildren = div.children;
        console.log(divChildren);
    </script>
</body>

控制台输出：
在这里插入图片描述
childNodes属性获取到的是指定元素中所有的节点
什么是节点?
DOM对象(document), 这个对象以树的形式保存了界面上所有的内容
HTML页面每一部分都是由节点(标签(元素),文本,属性)

<body>
    <div>
        <h1>1</h1>
        <h2>2</h2>
        <p class="item">3</p>
        <p>4</p>
        <span>5</span>
    </div>

    <script>
        let div = document.querySelector("div");
        let divChildren = div.childNodes;
        console.log(divChildren);
    </script>
</body>

控制台输出：
在这里插入图片描述

2.获取指定子节点、子元素

<body>
    <div>
        <h1>1</h1>
        <h2>2</h2>
        <p class="item">3</p>
        <p>4</p>
        <span>5</span>
    </div>

    <script>
        let div = document.querySelector("div");

        let firstChildrenNode = div.firstChild; //获取指定节点中的第一个子节点
        let firstChildren = div.firstElementChild; //获取指定元素中的第一个子元素
        console.log(firstChildrenNode);
        console.log(firstChildren);

        let lastChildrenNode = div.lastChild; //获取指定节点中的最后一个子节点
        let lastChildren = div.lastElementChild; //获取指定元素中的最后一个子元素
        console.log(lastChildrenNode);
        console.log(lastChildren);

        //通过子元素获取父元素/父节点
        let item = document.querySelector('.item');
        let parentNode = item.parentNode; //通过子元素获取父节点
        let parent = item.parentNode; //通过子元素获取父元素
        console.log(parentNode);
        console.log(parent);

        let previousNode = item.previousSibling; //获取相邻上一个节点
        let previous = item.previousElementSibling; //获取相邻上一个元素
        console.log(previousNode);
        console.log(previous);

        let nextNode = item.nextSibling; //获取相邻下一个节点
        let next = item.nextElementSibling; //获取相邻下一个元素
        console.log(nextNode);
        console.log(next);
    </script>
</body>