DOM（文档对象模型）

DOM（文档对象模型）

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的。 HTML根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

父子和同胞节点

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

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

DOM方法

方法是可以在节点上执行的动作。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是能够执行的动作（比如添加或修改元素）。
属性是能够获取或设置的值（比如节点的名称或内容）。

一些常见的DOM方法

• getElementById() 方法
  返回带有指定ID的元素（最常用）

• getElementsByTagName() 方法
  返回带有指定标签名的所有元素

• getElementsByClassName() 方法
  查找带有相同类名的所有 HTML 元素

• appendChild()方法
  把新的子节点添加到指定节点

• replaceChild()方法
  替换子节点

• removeChild()方法
  删除子节点

• insertBefore()方法
  在指定的子节点前面插入新的子节点

• createElement()方法
  创建元素节点

• createTextNode()方法
  创建文本节点

• createAttribute()方法
  创建属性节点

DOM 属性

DOM 属性是能够设置或改变的 HTML 元素的值

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性，innerHTML 属性可用于获取或替换 任何HTML 元素的内容，包括 和

childNodes 和 nodeValue属性

除了 innerHTML 属性，也可以使用 childNodes 和 nodeValue 属性来获取元素的内容

nodeName 属性

nodeName 属性规定节点的名称，是只读的：

• 元素节点的 nodeName 与标签名相同
• 属性节点的 nodeName 与属性名相同
• 文本节点的 nodeName 始终是 #text
• 文档节点的 nodeName 始终是 #document

nodeValue 属性

nodeValue 属性规定节点的值：

• 元素节点的 nodeValue 是 undefined 或 null
• 文本节点的 nodeValue 是文本本身
• 属性节点的 nodeValue 是属性值

nodeType属性

nodeType 属性返回节点的类型。nodeType 是只读的，比较重要的节点类型有：

DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应，即在事件发生时执行代码。

• 常见的事件