文档对象模型规定了浏览器如何创建 HTML 页面模型, 和 JS 如何访问或修改 Web 页面中的内容
使用 DOM 树
访问并更新 DOM 树节点需要两个步骤
- 定位到需要操作的元素所在的节点
- 使用它的文本内容, 子元素或属性
第一步: 访问元素
- 选择单个元素节点
方法一: getElementById() 使用元素的 id 属性
方法二: querySelector() 使用 CSS 选择器返回一个匹配的元素
- 选择多个元素节点
方法一: getElementsByClassName() 选择所有该 class 属性的特定元素
方法二: getElementsByTagName() 选择所有使用了特定标记的元素
方法三: querySelectorAll() 使用 CSS 选择器来选择所有匹配的元素
- 在元素节点之间遍历:
parentNode 选择当前元素的父节点
previousSibling/nextSibling 选择 DOM 树中的前一个或后一个兄弟节点
firstChild/lastChild 返回当前元素的第一个或最后一个子节点
第二部: 操作这些元素
- 访问/更新文本节点
nodeValue 这个属性允许访问和更新文本节点
- 操作 HTML 内容
innerHTML 可以访问子元素和文本内容, 内容(以字符串的形式包括标签传入即可), 有风险
textContent 获取或更新文本内容createElement() 创建新元素节点
createTextNode() 创建新文本节点
appendChild() 增加新的子节点
removeChild() 移除树中子节点
- 访问或更新属性
className 获取或设置 class 属性的值
id 获取或设置id属性的值hasAttribute() 检查属性是否存在
getAttribute() 获取属性值
setAttribute() 更新属性值
removeAttribute() 移除属性值
把 DOM 查询 缓存在变量中
缓存的目的是为了储存元素在 DOM 中的位置,节省浏览器再次遍历查找同一个元素的时间
//例:
var itermOne = getElementById('one');
