DOM

DOM 是 W3C(World Wide Web Consortium)标准。同时也 定义了访问诸如 XML 和 HTML 文档的标准:

DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。

DOM节点

DOM节点分为三大类:元素节点、属性节点、文本节点;

## DOM访问

通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法

DOM修改

innerHTML:创建 HTML 内容
appendChild:创建新的 HTML 元素
style.xxxxx:改变 HTML 样式

DOM元素

创建新的 HTML 元素 - createElement()
创建新的 HTML 元素 - insertBefore()
删除已有的 HTML 元素 - removeChild()
替换 HTML 元素 - replaceChild

DOM属性

innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点

DOM 对象方法

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

DOM操作性能优化

  1. 缓存dom对象
  2. 一次性DOM节点生成
文章目录