Doucment对象-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40635134/article/details/130717259

本文介绍了DOM树的概念，包括如何通过ID、标签名、类名等获取元素，以及改变元素内容和样式的操作。接着讲解了事件的注册、删除，事件流的概念，以及常用点击事件。此外，还涵盖了属性的获取、设置和移除，以及H5自定义属性的使用。最后，讨论了节点的基本操作，如创建、添加、删除和复制节点。

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

1：DOM树

文档：一个页面就是一个文档，DOM中使用document表示
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等,使用node表示
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

在这里插入图片描述

2：元素

2.1：获取元素

方法	描述
document.getElementById(id)	根据ID获取
document.getElementsByTagName(‘标签名’)	根据标签名获取元素
document.getElementsByClassName()	根据类名获取元素
document.querySelector(‘选择器’)	返回指定选择器的第一个元素对象
document.querySelectorAll('选择器)	返回指定选择器的所有元素对象
document.body	获取body元素
document.documentElement	获取html元素

2.2：操作元素

2.1.1：改变元素内容

方法	描述
element.innerText	仅修改元素内容
element.innerHTML	修改元素内容(包含html标签空格、换行)

2.1.2：改变元素样式

方法	描述
element.style	行内样式
element.className	类名样式

3：事件

3.1：注册事件

注册事件两种方式：传统注册事件和监听注册事件
监听注册事件：同一个元素同一个事件可以添加多个侦听器

<script>
        var btns = document.querySelectorAll('button');
        // 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
            // 2. 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>

3.2：删除事件

在这里插入图片描述

<script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick', fn1);
        }
    </script>

3.3：DOM事件流

事件的执行顺序
在这里插入图片描述

事件冒泡

<script>
        // onclick 和 attachEvent（ie） 在冒泡阶段触发
        // 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
        // son -> father ->body -> html -> document
        var son = document.querySelector('.son');
		// 给son注册单击事件
        son.addEventListener('click', function() {
            alert('son');
        }, false);
		// 给father注册单击事件
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
		// 给document注册单击事件，省略第3个参数
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>

3.4：事件对象

事件对象：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面.
在这里插入图片描述

3.5：常用点击事件

在这里插入图片描述

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

4：属性操作

4.1：获取属性值

方法	描述
element.属性	获取内置属性值
element.getAttribute(‘属性’)	获取自定义属性值

4.2：设置属性值

方法	描述
element.属性= ‘值’	设置内置属性值
element.setAttribute(‘属性’, ‘值’)	设置自定义属性值

4.3：移除属性

方法	描述
element.removeAttribute(属性)	移除属性

4.4：H5自定义属性

在这里插入图片描述

 <div getTime="20" data-index="2" data-list-name="andy"></div>
    <script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
        // h5新增的获取自定义属性的方法 它只能获取data-开头的
        // dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
        // 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>

4：节点操作

节点：nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性。

方法	描述
node.parentNode	父级节点
node.children	子节点
node.parentNode	父级节点
document.createElement(‘li’);	创建节点
node.appendChild	添加节点
node.removeChild	删除节点
ode.cloneNode(true);	复制节点

在这里插入代码片<script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
    </script>