节点和元素？
节点 Node 包括很多种，以node.nodeType可获取其类型序号：
- 1 ------ 元素 Element，也叫标签 Tag
- 3 ------ 文本 Text
- 8 ------ 注释 Comment
- 9 ------ 文档 Document
- 11 ------ 文档片段 Document Fragment
获取元素
直接用id的值 //非正式，仅限测试时使用
document.getElementById(/* id名 */)
document.getElementsByTagName(/* 标签名 */)
document.getElementsByClassName(/* class名 */)
document.querySelector(/* 选择器 */) //推荐！！
document.querySelectorAll(/* 选择器 */) //推荐！！
document.documentElement //html元素（根元素）
document.head //head元素
document.body //body元素
document.all //falsy值（IE除外）
节点的增删改查
增
//创建节点：
document.createElement(/* 标签名 */) //创建标签节点
document.createTextNode(/* 文本内容 */) //创建文本节点
//增加子节点：
node.appendChild(/* 子节点 */)
【注】：一个元素只能append到一个父节点中，以后插入的目的地为准。
删
parentNode.removeChild(/* 子节点 */) //删除子节点
childNode.remove() //删除自己，将节点从父节点中移除
parentNode.innerHTML = '' //清空所有子节点
改
//属性改写：
node.className = string //改写class
node.classList.add(string) //增加一个class
node.classList.remove(string) //删除一个class
node.style = /* style */
node.style.width = /* 改写部分style */
node.dataset.xxx = string //改 data-xxx 属性（自定义属性）
//内容改写：
node.innerText = string //改文本
node.textContent = string //同上，IE写法
node.innerHTML = /* HTML 内容 */
//事件处理函数改写：
div.onclick = ()=>{}
div.addEventListener('click', ()=>{})
查
//读取属性：
node.classList
node.getAttribute('属性名')
//【注】：对于a标签，
a.href //经处理后的href（处理成完整的URL）
a.getAttribute('href') //纯粹的href
//父：
node.parentNode //查父
node.parentElement //同上
//子：
node.childNodes //所有子节点
node.children //仅所有元素子节点
node.firstChild //第一个子节点
node.lastChild //最后一个子节点
//兄弟姐妹：
node.previousSibling //前一个节点
node.nextSibling //后一个节点
//遍历一个div中所有元素：
const travel = (node, fn) => {
fn(node)
if(node.children.length !== 0){
for(let i=0;i<node.children.length;i++){
travel(node.children[i], fn)
}
}
}
DOM跨线程操作
- 浏览器包括两个线程：
- JS 线程
- 渲染线程
- 对已经渲染的元素进行操作，有可能不会触发重新渲染：
- 标准属性的修改，如id、className、title、data-*（自定义属性） -------- 会同步到渲染线程
- 非标准属性的修改 -------- 不会同步到渲染线程，仅停留在 JS 线程中
- Property 和 Attribute
- JS 线程中 div 对象的属性称为 property
- 渲染线程中 div 标签的属性称为 attribute
