document JS DOM_document.js-优快云博客

本文链接：https://blog.youkuaiyun.com/hsl0530hsl/article/details/78890937

本文介绍了一些重要的DOM操作技巧，包括使用querySelector和querySelectorAll选取元素的方法，以及如何通过这些方法获取和设置元素的内容。此外还展示了如何利用级联选择器和多个选择符进行更精确的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

整理一些个人认为比较重要，或是不怎么常用的DOM操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.3.min.js"></script>
    <script>
    $(function () {
        /*console.log($(".a", $("#b")));
        //只会取第一个
        console.log(document.querySelector("#a"));
        console.log(document.querySelector(".a"));
        console.log(document.querySelector("div"));

        //会取所有
        console.log(document.querySelectorAll(".a"));
        console.log(document.querySelectorAll("div"));*/

        //支持多个选择符
        //console.log(document.querySelector("#a, #b"));//只会取第一个
        //console.log(document.querySelectorAll("#a, #b"));//两个都会取出来

        //支持级联操作
        //console.log(document.querySelector("#a .a"));
        //获取值
        //console.log(document.querySelector("div > div").textContent);//a.a
        //console.log(document.querySelector("div#b > div").textContent);//b.a
        //console.log(document.querySelector("div ~ div").textContent);//a

        //设值
        //document.querySelector("#b .a").textContent = "#b.a";

        //console.log(document.querySelector("div.c"));//取不到时,返回 null

        /**
         * activeElement 返回文档中当前获得焦点的元素,默认是 BODY
         */
        //console.log(document.activeElement.tagName);
        //document.querySelector("button").onclick = function (e) {
        //    console.log(document.activeElement.tagName);
        //};

        /**
         * anchors 返回了当前页面的所有锚点数组,没有为 []
         */
        //console.log(document.anchors);//[a, #a: a]

    });
    </script>
</head>
<body>

    <div id="a">
        <div class="a">a.a</div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <div class="a">a</div>

    <div id="b">
        <div class="a">b.a</div>
    </div>

    <button>按键</button>

    <a name="#a">a</a><!-- 没有 href 属性为锚点 -->

</body>
</html>