DOM 元素基本属性：深入浅出的探讨

2023-12-20 20:46:32

认识 Element 对象

在 DOM 中，Element 类型是最常用的类型。它代表 HTML 文档中的元素节点，例如 <p> 段落、<div> 容器和 <input> 输入字段。Element 对象提供了几个基本属性，使我们能够访问和操作这些元素的各种方面。

访问元素标签名

Element 对象的 tagName 属性返回元素的标签名。例如，对于 <p> 元素，tagName 的值为 "P"。这个属性对于确定元素类型非常有用，尤其是在使用 JavaScript 操作 DOM 时。

访问子节点

Element 对象的 childNodes 属性返回一个包含元素所有子节点的 NodeList。子节点可以是其他元素、文本节点或注释节点。通过访问 childNodes，我们可以遍历元素的结构并与各个子节点交互。

获取和设置属性

Element 对象的 getAttribute() 和 setAttribute() 方法允许我们访问和修改元素的属性。属性是与元素关联的附加数据，例如 id、class 或自定义属性。我们可以使用 getAttribute() 来获取属性值，并使用 setAttribute() 来设置或修改值。

节点类型和值

Element 对象的 nodeType 属性返回元素的节点类型，在这种情况下为 Node.ELEMENT_NODE。此外，nodeValue 属性返回元素的值，对于文本节点来说就是文本内容。

操纵 HTML

通过利用这些基本属性，我们可以有效地操纵 HTML。例如，我们可以使用 tagName 来识别和修改元素类型，使用 childNodes 来遍历和修改子元素，以及使用 getAttribute() 和 setAttribute() 来读取和更新元素属性。这些属性为我们提供了灵活性和控制力，使我们能够动态修改和交互 HTML 文档。

实例

为了更好地理解这些属性的应用，让我们看几个示例：

// 获取元素的标签名
const element = document.querySelector('p');
const tagName = element.tagName;

// 获取元素的所有子节点
const childNodes = element.childNodes;

// 获取元素的 id 属性
const id = element.getAttribute('id');

// 设置元素的 class 属性
element.setAttribute('class', 'my-class');