什么是DOM
- DOM（Document Object Model）是文档对象模型。
- JS 通过
Window.document对象来操作网页中的元素。
获取元素
window.id 或者直接 id，这种方法比较少用。
// 以下几种获取元素的方法一般在 IE 浏览器中使用
document.getElementById('id') // 获取 id 对应的标签
document.getElementsByTagName('tagName') // 获取给定标签名称的元素集合
document.getElementsByTagName('tagName')[index] // 获取给定标签名称的元素集合中对应索引的元素
document.getElementsByClassName('className') // 获取给定类名的元素集合
document.getElementsByClassName('className')[index] // 获取给定类名的元素集合中对应索引的元素
// 以下几种获得元素的方法通过用在除了 IE 浏览器的其他浏览器
// 获取第一个对应的 id ，类名，标签名对应的元素
document.querySelector('#id' | '.className' | 'tagName')
// 获取对应的 id ，类名，标签名 对应的元素集合
document.querySelectorAll('#id' | '.className' | 'tagName')
// 获取对应的 id ，类名，标签名对应的元素集合中对应索引的元素
document.querySelectorAll('#id' | '.className' | 'tagName') [index]
document.documentElement 获取 html 元素
document.body 获取 html 中的 body 节点
document.head 获取 html 中的 head 节点
document.all 获取页面中的所有元素的集合，document.all 为 falsy 值，只有在 IE 浏览器中为 true，用来判断浏览器是否是 IE 浏览器。
节点的增删改查
节点包括元素和文本，元素就标签。
增加节点
// 创建一个标签节点
let div1 = document.createElement('div')
// 创建一个文本节点
let text1 = document.createTextNode('你好，JS')
// 向节点中插入文本
div1.appendChild(text1)
div1.innerText = '你好，JS'（ IE ）或者 div1.textContent = '你好'
// 但不能使用 div1.appendChild('你好，JS')
// 将节点插入页面中，才能显示，因为此时的节点在 JS 线程中
document.body.appendChild(div1)
删除节点
旧方法
parentNode.removeChild(childNode)
新方法
childNode.remove() 此时元素只是从页面中删除，节点仍在 JS 线程中，可以通过 parendNode.apendChild(childNode) 重新将节点添加到页面中。
如果要彻底删除 childNode 节点，需要执行 childNode = null。
改属性
写标准属性
- 改 class:
div.className = 'red blue'全覆盖 - 改 class:
div.classList.add('red')添加 - 改 style:
div.style = 'width: 100px; color : blue;' - 改 style 的一部分:
div.style.width = 200px - 大小写:
div.style.backgroundColor = 'white' - 改 data-x 属性:
div.dataset.x = 'frank
读标准属性
-
div.classList|a.href -
div.getAttribute('class')|a.getAttribute('href') - 两种方法都可以，只是值可能稍微有些不同。
设置属性
div.setAttribute(name, value)
改事件处理函数
div.onclick = function
div.onclick 默认为 null，点击后什么都不会发生。
改标签内容
div.innerText = 'xxx'
div.textContent = 'xxx'
改 HTML 内容
div.innerHTML = `<p> </p>`
改标签
div.innerHTML = '' // 先清空
div.appendChild(div2) // 再添加
改父节点
newParent.appendChild(div)
查询节点
div // 查自己
div.parentElement || div.parentNode // 查父代
div.parentNode.parentNode // 查祖代
div.childNodes || div.children // 查子代
div.childNodes[index].childNodes // 查孙代
通过 div.children 查询节点，它的 length 会实时更新。
通过 document.querySelctorAll 查询节点，它的 length 不会实时更新。
div.parentNode.children 排除自己 查兄弟
let siblings = []
let c1 = div1.parentElement.children
for (let i = 0 ; i < c1.length ; i++) {
if (c1[i] !== div1) {
siblings.push(c1[i])
}
}
div.firstChild // 查第一个子节点
div.lastChild // 查最后一个子节点
div.previousSibling // 查前一个节点
div.nextSibling // 查后一个节点
div.firstChild 包括 text 元素， div.firstElementChild 不包括 text 元素
遍历节点的所有元素
let travel = (node, fn) => {
fn (node)
if (node.children) {
for (let i = 0; i < node.children.length ; i++) {
travel (node.children[i], fn)
}
}
}
travel(div, (node) => console.log(node))
资料来源：饥人谷
