JavaScript DOM 对象详解

JavaScript DOM 对象详解

在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 对象允许开发者动态地访问和操作网页的内容、结构和样式。本文将详细介绍 JavaScript 中的 DOM 对象，并通过丰富的示例帮助你更好地理解。

1. DOM 的基本概念

DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。

2. DOM 树结构

DOM 树的根节点是 document 对象，它代表整个文档。树中的每个节点都是一个 Node 对象，具有以下几种主要类型：

• Element：代表 HTML 元素（如 <div>、<p> 等）。
• Text：代表元素中的文本内容。
• Attribute：代表元素的属性（如 id、class 等）。
• Comment：代表注释。

3. 获取 DOM 元素

JavaScript 提供了多种方法来获取 DOM 元素。

3.1 通过 ID 获取元素

使用 document.getElementById() 方法可以通过元素的 id 属性获取元素。

let element = document.getElementById('myElement');
console.log(element);

3.2 通过类名获取元素

使用 document.getElementsByClassName() 方法可以通过元素的 class 属性获取元素集合。

let elements = document.getElementsByClassName('myClass');
console.log(elements); // 返回一个 HTMLCollection

3.3 通过标签名获取元素

使用 document.getElementsByTagName() 方法可以通过元素的标签名获取元素集合。

let elements = document.getElementsByTagName('div');
console.log(elements); // 返回一个 HTMLCollection

3.4 通过 CSS 选择器获取元素

使用 document.querySelector() 方法可以通过 CSS 选择器获取第一个匹配的元素。

let element = document.querySelector('#myElement');
console.log(element);

使用 document.querySelectorAll() 方法可以通过 CSS 选择器获取所有匹配的元素集合。

let elements = document.querySelectorAll('.myClass');
console.log(elements);