HTML DOM

HTML DOM是HTML Document Object Model(文档对象模型)的缩写，定义了访问和操作 HTML 文档的标准方法

DOM 以树结构表达 HTML 文档

 HTML DOM 是：

• HTML 的标准对象模型
• HTML 的标准编程接口
• W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性以及访问它们的方法，换言之HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 节点：在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

节点父、子和同胞：节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

• 在节点树中，顶端节点被称为根（root）
• 每个节点都有父节点、除了根（它没有父节点）
• 一个节点可拥有任意数量的子节点
• 同胞是拥有相同父节点的节点

HTML DOM 方法：是我们可以在节点（HTML 元素）上执行的动作。

编程接口

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。

方法是执行的动作（比如添加或修改元素）。

属性是获取或设置的值（比如节点的名称或内容）。

HTML DOM 对象-属性

• innerHTML - 节点（元素）的文本值
• parentNode - 节点（元素）的父节点
• childNodes - 节点（元素）的子节点
• attributes - 节点（元素）的属性节点

HTML DOM 对象-方法

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。