HTML | DOM 小对象

什么是 DOM？

DOM（文档对象模型）是一种用于 HTML 和 XML 文档的编程接口。它表示网页文档树的层次结构，允许程序员添加、修改和删除 HTML 或 XML 元素及其属性。

从编程的角度来看，DOM 是一个 API 集合，提供了许多操作 HTML 元素的方法和属性，可以通过 JavaScript 代码来访问和操作 DOM。

如何访问 DOM？

要访问 HTML 文档中的 DOM，可以使用 document 对象。这个对象是 DOM 的根节点，可以通过它来访问文档的所有元素。

例如，要访问一个 HTML 页面上的标题元素，可以使用以下代码：

var title = document.getElementsByTagName('h1')[0];

上面的代码使用 getElementsByTagName 方法来获取所有的 h1 元素，然后通过索引获取第一个元素（因为返回的是一个数组）。这样就可以访问标题元素的属性和方法了。

DOM 小对象

DOM 中有许多小对象，它们表示 HTML 元素的不同部分或属性。以下是一些常用的 DOM 小对象示例：

Element 对象

Element 对象是 DOM 中的基本元素对象，表示一个 HTML 元素。可以使用 document.createElement 方法来创建一个新的 Element 对象。

例如，要创建一个新的 div 元素，可以使用以下代码：

var div = document.createElement('div');

上面的代码创建了一个新的 div 元素，并将其赋值给变量 div。

Text 对象

Text 对象表示 HTML 元素中的文本内容。可以使用 document.createTextNode 方法来创建一个新的 Text 对象。

例如，要创建一个包含文本内容的 p 元素，可以使用以下代码：

var p = document.createElement('p');
var text = document.createTextNode('Hello, world!');
p.appendChild(text);

上面的代码创建了一个新的 p 元素，并创建了一个包含文本内容的 Text 对象。最后将 Text 对象添加到 p 元素中。

Attribute 对象

Attribute 对象表示 HTML 元素的属性。可以使用 element.setAttribute 和 element.getAttribute 方法来设置和获取元素的属性。

例如，要创建一个具有 id 属性的 div 元素，可以使用以下代码：

var div = document.createElement('div');
div.setAttribute('id', 'myDiv');

上面的代码创建了一个 div 元素，并设置了它的 id 属性为 myDiv。

Node 对象

Node 对象代表文档中的节点，可以是元素、文本或注释等。Node 对象是所有其他 DOM 对象的基类。

例如，要遍历一个元素的所有子节点，可以使用以下代码：

var element = document.getElementById('myElement');
var childNodes = element.childNodes;
for (var i = 0; i < childNodes.length; i++) {
    var childNode = childNodes[i];
    // 处理子节点
}

上面的代码获取一个元素的所有子节点，并遍历它们，对每个子节点进行处理。

总结

DOM 是 HTML 文档的编程接口，提供了许多操作 HTML 元素的方法和属性。要访问 DOM，可以使用 document 对象，从而访问文档的所有元素。DOM 中有许多小对象，例如 Element、Text、Attribute 和 Node 等，分别表示 HTML 元素的不同部分或属性，可以使用它们来操作 HTML 元素。