HTML DOM 对象

HTML（Hypertext Markup Language）是在 Web 浏览器上显示内容的标准语言。HTML DOM（Document Object Model）是 HTML 页面中所有元素的编程接口，它将 HTML 文档看作一棵树，其中每个节点都是一个对象，可以通过 JavaScript 来访问和修改。

获取 HTML DOM 对象

获取 HTML DOM 对象需要使用 JavaScript。通过 document 对象，可以获取 HTML 页面中的元素节点对象。

获取元素节点对象

常用的获取元素节点对象的方法有：

// 通过 ID 获取元素节点对象
var element = document.getElementById("myId");

// 通过标签名获取元素节点对象
var elements = document.getElementsByTagName("myTag");

// 通过类名获取元素节点对象
var elements = document.getElementsByClassName("myClass");

其中，getElementById() 方法可用于获取 ID 属性值与指定字符串相等的元素节点对象。getElementsByTagName() 方法可用于获取指定标签名的所有元素节点对象，返回的是 NodeList 类型，类似数组，通过下标可以获取对应的元素节点对象。getElementsByClassName() 方法可用于获取类名属性值与指定字符串相等的所有元素节点对象，但是该方法在 IE8 及其之前的版本中不支持。

获取属性节点对象

在 HTML 元素中，属性节点是元素节点的属性。获取 HTML 元素的属性节点对象可以使用 getAttributeNode() 方法。

var attributeNode = document.getElementById("myId").getAttributeNode("myAttr");

其中，getAttributeNode() 方法可用于获取指定属性名的属性节点对象。

操作 HTML DOM 对象

通过 JavaScript，可以操作 HTML DOM 对象，例如修改节点内容、修改节点样式、插入和删除节点等。

修改节点内容

修改节点内容可以使用 innerHTML 属性。

document.getElementById("myId").innerHTML = "New Content";

其中，innerHTML 属性可用于获取或设置元素的 HTML 内容。

修改节点样式

修改节点样式可以使用 style 对象。

document.getElementById("myId").style.color = "red";

其中，style 对象可用于获取或设置元素的样式。

插入和删除节点

插入和删除节点可以使用 DOM 的 insertBefore()、appendChild() 和 removeChild() 方法。

// 插入节点
var newNode = document.createElement("p");
var referenceNode = document.getElementById("myId");
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

// 删除节点
var existNode = document.getElementById("myId");
existNode.parentNode.removeChild(existNode);

其中，createElement() 方法可用于创建新的元素节点对象。insertBefore() 方法可用于在某个元素节点对象前插入新的子节点对象，第一个参数为新的子节点对象，第二个参数为参照的节点对象。appendChild() 方法可用于将新的子节点对象添加到某个元素节点对象的末尾。removeChild() 方法可用于删除某个子节点对象。

总结

HTML DOM 是 JavaScript 操作 HTML 的重要手段，可以使用 DOM 方法获取、操作 HTML 元素节点和属性节点，通过修改节点内容、节点样式、插入和删除节点等操作，实现各种交互效果。