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 事件作出反应,即在事件发生时执行代码。
- 常见的事件