【JavaScript】DOM模型_js的dom模型图-CSDN博客

本文链接：https://blog.csdn.net/weixin_43726152/article/details/113812161

本文档详细介绍了如何使用DOM（Document Object Model）在HTML中获取和管理元素。通过getElementsByTagName、getElementById、getElementsByClassName和querySelector等方法，可以分别根据标签、ID、类名和选择器来选取页面上的元素。此外，还展示了获取body、html元素以及监听按钮点击事件的方法，为网页交互提供基础。

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

DOM document Object Model 文档对象模型：把文档中的标签，属性，文本，转换成对象来管理。

html body部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">2019-9-9</div>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
    </ul>
    <ol id = "ol"> 
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
    </ol>
    <div class = "box">盒子</div> 
    <div class = "box">盒子</div>
    <div id = "nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <button id="btn">唐伯虎</button>
</body>
</html>

获取对象的常用方法：

script部分

getElementsByTagName

getElementsByTagName：根据标签（元素如 ul，li…）获取

        var list = document.getElementsByTagName('li');
        console.log(list);  // 返回的是伪数组
        console.log(list[0]);
        // 依次打印
        for (var i = 0; i < list.length; i++) {
            console.log(list[i]);
        }
        var a1 = document.getElementsByTagName('ol'); 
         // 根据标签名获取，注意区别
        console.log(a1[0].getElementsByTagName('li'));
        // console.log(a1.getElementsByTagName('li')); 这个会报错，只能是【单个父元素】里取子元素

getElementById

getElementById：根据属性 id="name"获取

        var ol = document.getElementById('ol'); // 注意与上面的区别，这个是根据id获取，id只有一个，所以不用加[i]
        console.log(ol.getElementsByTagName('li'));

getElementsByClassName

getElementsByClassName：根据类名 class="name"获取

querySelector

querySelector：选择器的使用有特别需要注意的一点：会根据id，class，tag类型的不同，字符串形式是不一样的
不像getElementsByTagName，getElementById，getElementsByClassName，直接写名字就好，比如’box’，‘li’

        var firstBox = document.querySelector('.box'); // 获取的是第一个 类：.name
        console.log(firstBox);
        var nav = document.querySelector('#nav'); // id: #name
        console.log(nav);
        var li = document.querySelector('li'); // tag: name
        console.log(li);
        var allBox = document.querySelectorAll('.box'); // 选择器获取多个
        console.log(allBox);

获取body的所有元素

        var bodyEle = document.body;
        console.log(bodyEle);

获取html的所有元素

        var htmlEle = document.documentElement;
        console.log(htmlEle);

获取按钮

        var btn = document.getElementById("btn");
        btn.onclick = function() {
            alert('点秋香');
        }