DOM 操作的常用 API

<div id="div1" class="container">
    <p id="p1">一段文字 1</p>
    <p>一段文字 2</p>
    <p>一段文字 3</p>
</div>
<div id="div2" class="container">
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</div>

获取 DOM 节点

const div1 = document.getElementById('div1')
console.log('div1',div1)
// div1 <div id=​"div1" class=​"container">​…​</div>
​
const divList = document.getElementsByTagName('div') // 集合
console.log('divList.length',divList.length)
// divList.length 2
console.log('divList[1]',divList[1])
// divList[1] <div id=​"div2">​…​</div>​
const containerList = document.getElementsByClassName('container') // 集合
console.log('containerList.length',divList.length)
// containerList.length 2
console.log('containerList[1]',divList[1])
// containerList[1] <div id=​"div2">​…​</div>
const pList = document.querySelectorAll('p') // 集合
console.log('pList',pList)

property 和 attribute

• property：修改对象属性，不会体现到 html 结构中（尽量用）
• attribute：修改 html 属性，会改变 html 结构
• 两者都有可能引起 DOM 重新渲染

const pList = document.querySelectorAll('p') // 集合
const p1 = pList[0]
// property 形式
p1.style.width = '100px'
p1.className = 'red'
console.log(p1.style.width) // 100px
console.log(p1.className) // red
console.log(p1.nodeName) // p
console.log(p1.nodeType) // 1
// attribute 形式
p1.setAttribute('data-name','baidu')
console.log(p1.getAttribute('data-name')) // baidu
p1.setAttribute('style','font-size:50px')
console.log(p1.getAttribute('style')) // font-size:50px

新增/插入节点

const div1 = document.getElementById('div1')
const div2 = document.getElementById('div2')
// 新建节点
const newP = document.createElement('p')
newP.innerText = 'this is newP'
// 插入节点
div1.appendChild(newP)
// 移动节点 id="p1" 从 div1 移动到 div2
const p1 = document.getElementById('p1')
div2.appendChild(p1)

获取子元素列表 & 获取父元素

const div1 = document.getElementById('div1')
const p1 = document.getElementById('p1')
// 获取父元素
console.log('p1.parentNode', p1.parentNode)
// p1.parentNode <div id=​"div1" class=​"container">​…​</div>​
// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log(div1ChildNodes)
// NodeList(7) [text, p#p1, text, p, text, p, text]
// 0: text
// 1: p#p1
// 2: text
// 3: p
// 4: text
// 5: p
// 6: text
// length: 7
// 对象转数组，过滤 text 标签 nodeType=3，只留下 p标签 nodeType=1
const div1ChildNodesP = Array.prototype.slice.call(div1ChildNodes).filter(child => {
    if (child.nodeType === 1) {
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)

删除节点

const div1 = document.getElementById('div1')
const child = div1.childNodes
console.log(child)
//NodeList(7) [text, p#p1, text, p, text, p, text]
// 0: p#p1
// 1: text
// 2: p
// 3: text
// 4: p
// 5: text
// length: 6
// 对象转数组，过滤 text 标签 nodeType=3，只留下 p标签 nodeType=1
const childP = Array.prototype.slice.call(child).filter(ch=>{
    if(ch.nodeType === 1){
        return true
    }
    return false
})
div1.removeChild(childP[0]) // 删除 p#p1