JavaScript 文档对象模型(五)

文档对象模型规定了浏览器如何创建 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');