js基础——DOM
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操作性能优化
- 缓存dom对象
- 一次性DOM节点生成