〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点

news2025/10/31 11:02:40

说明：该文属于大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
作者：不渴望力量的哈士奇(哈哥)，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。

🏆 白宝书系列
🏅 启示录 - 攻城狮的自我修养
🏅 Python全栈白宝书
🏅 ChatGPT实践指南白宝书
🏅 产品思维训练白宝书
🏅 全域运营实战白宝书
🏅 大前端全栈架构白宝书

文章目录

⭐ 访问元素节点
- 🌟 认识document对象
- 🌟 访问元素节点的常用方法
- - ✨ getElementById()
  - ✨ 延迟运行
  - ✨ getElementsByTagName()
  - ✨ getElementsByClassName()
  - ✨ querySelector()
  - ✨ querySelectorAll()

⭐ 访问元素节点

所谓“访问”元素节点，就是指“得到”、“获取”页面上的元素节点

对节点进行操作，第一步就是要得到它

访问元素节点主要依靠document对象

🌟 认识document对象

document对象是DOM中最重要的东西，几乎所有DOM的功能都封装在了document对象中

document对象也表示整个HTML文档，它是DOM节点树的根

document对象的nodeType属性值是9

🌟 访问元素节点的常用方法

方法	功能	兼容性
`document.getElementById()`	通过`id`得到元素	IE6
`document.getElementsByTagName()`	通过`标签名`得到元素数组	IE6
`document.getElementsByClassName()`	通过`类名`得到元素数组	IE9
`document.querySelector()`	通过`选择器`得到元素	IE8部分兼容，IE9完全兼容
`document.querySelectorAll()`	通过`选择器`得到元素数组	IE8部分兼容，IE9完全兼容

✨ getElementById()

getElementById()方法，通过id得到元素节点

示例代码：

<body>
    <div id="box"></div>
    <p id="para"></p>

    <script>
        //访问/获取元素节点
        var oBox = document.getElementById('box');  //注意括号里的大小写字母也要匹配
        var oPara = document.getElementById('para');
    </script>
</body>

注意事项：

如果页面上有相同的元素，则只能得到第一个（所以页面上不要出现相同id的元素）
不管元素藏的有多深，都可以找到

✨ 延迟运行

在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应HTML节点

但是，也可以使用window.onload = function(){}事件，使页面加载完毕后，再执行指定的代码（原理就是给window窗口对象添加一个onload事件，onload表示加载完，即给窗口添加了一个全都加载完的事件监听，等页面加载完后，再执行function里面的方法）

示例代码：

<body>
    <!--下方的代码中，script标签放在了最上方-->
    <script>
        //给window对象添加onload事件监听
        window.onload = function () {
            //访问/获取元素节点
            var oBox = document.getElementById('box');
            var oPara = document.getElementById('para');
            console.log(oBox);
            console.log(oPara);
        }
    </script>
    <div id="box"></div>
    <p id="para"></p>
</body>
</html>

很多公司会习惯将script标签放到head里面，这样写也需要加上“延时运行”来保证js代码在页面加载完毕后运行。

✨ getElementsByTagName()

getElementsByTagName()方法，通过标签名得到节点数组

数组方便遍历，从而可以批量操控元素节点

即使页面上只有一个指定标签名的节点，也将得到长度为1的数组

任何一个节点元素也可以调用getElementsByTagName()方法，从而得到其内部的某种类的元素节点

示例代码：

<body>
    <div class="box1">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
    <div class="box2">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
    <script>
        var oPs = document.getElementsByTagName('p');  //得到页面中的所有p标签
        console.log(oPs);
    </script>
</body>

如果想要得到指定盒子内的p标签，可以这样写：

<body>
	<div id="box1">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>
    <div id="box2">
        <p>我是段落2</p>
        <p>我是段落2</p>
        <p>我是段落2</p>
        <p>我是段落2</p>
    </div>
    <script>
        //先得到box2
        var box2 = document.getElementById('box2');
        //再得到box2中的p标签
        var ps_inbox2 = box2.getElementsByTagName('p');
        console.log(ps_inbox2);
    </script>
</body>

✨ getElementsByClassName()

getElementsByClassName()方法，通过类名得到节点数组

getElementsByClassName()方法从IE9开始兼容

某个节点元素也可以调用getElementsByClassName()方法，从而得到其内部的某类名的元素节点

✨ querySelector()

querySelector()方法，是通过选择器得到元素，括号中直接写选择器就可以了

querySelector()方法只能得到页面上一个元素，如果有多个元素符合条件，则只能得到第一个元素

querySelector()方法从IE8开始兼容，但从IE9开始支持CSS3的选择器，如:nth-child()、:[src^=‘husky’]等css3选择器形式都支持良好

示例代码：

<body>
    <div class="box">
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p id="para">我是段落3</p>
        <p>我是段落4</p>
    </div>
    <script>
        //得到class=box中，id=para的p标签
        var p = document.querySelector('.box #para');
        console.log(p);
    </script>
</body>

✨ querySelectorAll()

querySelectorAll()方法，是通过选择器得到元素数组，括号中写选择器

即使页面上只有一个符合选择器的节点，也将得到长度为1的数组

示例代码：

<body>
    <div class="box">
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p id="para">我是段落3</p>
        <p>我是段落4</p>
    </div>
    <script>
        //得到class=box中的p标签
        var ps = document.querySelectorAll('.box p');
        console.log(ps);
        //得到了数组自然也可以选择其中的某一项了
        console.log(ps[2])
    </script>
</body>