JS DOM 编程

什么是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))

---

资料来源：饥人谷