DOM Element 学习笔记

什么是 DOM Element？

DOM（Document Object Model）是一种用于表示 HTML 和 XML 文档的标准，它将文档解析为一个由节点和对象（包括元素、文本、注释等）组成的树形结构，通过这个树形结构可以方便地访问和操作文档中的内容。

DOM Element 就是 HTML 和 XML 文档中的元素节点，每个元素都有一个对应的 DOM Element 对象，它包含了该元素的属性、样式和事件等信息，还可以通过 JavaScript 动态地修改它们。

如何获取 DOM Element？

获取 DOM Element 有多种方式，下面介绍几种常用的方法：

通过 ID 获取

可以通过 document.getElementById() 方法获取指定 ID 的元素，如下所示：

javascriptCopy Code
const el = document.getElementById('my-element');

其中 my-element 是元素的 ID，获取到的 el 对象就是 DOM Element。

通过 className 获取

可以通过 document.getElementsByClassName() 方法获取指定 class 名称的元素列表，如下所示：

javascriptCopy Code
const els = document.getElementsByClassName('my-class');

其中 my-class 是元素的 class 名称，获取到的 els 对象是一个 NodeList 对象，表示所有符合条件的元素列表。如果只需要获取第一个符合条件的元素，可以使用 els[0]。

通过标签名获取

可以通过 document.getElementsByTagName() 方法获取指定标签名的元素列表，如下所示：

javascriptCopy Code
const els = document.getElementsByTagName('div');

其中 div 是元素的标签名，获取到的 els 对象是一个 NodeList 对象，表示所有符合条件的元素列表。如果只需要获取第一个符合条件的元素，可以使用 els[0]。

通过 CSS 选择器获取

可以通过 document.querySelector() 或 document.querySelectorAll() 方法使用 CSS 选择器获取指定元素，如下所示：

javascriptCopy Code
const el = document.querySelector('#my-element');
const els = document.querySelectorAll('.my-class');

其中 #my-element 和 .my-class 是 CSS 选择器，可以根据需要自定义，获取到的 el 和 els 同样是 DOM Element 或 NodeList 对象。

DOM Element 实例

下面是几个常用的 DOM Element 操作实例：

修改元素属性

可以通过 DOM Element 的 setAttribute() 方法设置元素的属性，如下所示：

javascriptCopy Code
const el = document.getElementById('my-element');
el.setAttribute('title', 'new title');

其中 title 是属性名，new title 是属性值，通过这个方法可以修改元素的任何属性。

修改元素样式

可以通过 DOM Element 的 style 属性修改元素的样式，如下所示：

javascriptCopy Code
const el = document.getElementById('my-element');
el.style.color = 'red';
el.style.fontSize = '16px';

通过这个方式可以动态地修改元素的样式。

添加和移除 class

可以通过 DOM Element 的 classList 属性添加和移除元素的 class，如下所示：

javascriptCopy Code
const el = document.getElementById('my-element');
el.classList.add('active');
el.classList.remove('disabled');

通过这个方式可以动态地添加和移除元素的 class。

以上就是 DOM Element 的基本操作，通过这些方法可以方便地访问和操作 DOM 树中的元素，实现各种复杂的交互效果。