JavaScript-Web-API-DOM操作

一、DOM本质：

浏览器根据HTML文件解析出的一个树形结构 

 

二、DOM节点操作：

 

1.获取DOM节点：

const div1 = document.getElementById('div1') // 元素
const divList = document.getElementsByTagName('div') // 集合
const containerList = document.getElementsByClassName('container') // 集合
const pList = document.querySelectorAll('p') // 集合

 

2.attribute：

修改HTML属性，会改变HTML标签结构，有可能引起DOM重新渲染

const pList = document.querySelectorAll('p')
const p1 = pList[0]

// attribute
p1.setAttribute('data-name', 'hello')
console.log( p1.getAttribute('data-name') )
p1.setAttribute('style', 'font-size: 50px;')
console.log( p1.getAttribute('style') )

 

3.property：

修改对象属性，不会体现到HTML标签结构中，有可能引起DOM重新渲染

const pList = document.querySelectorAll('p')
const p1 = pList[0]

// property 形式
p1.style.width = '100px' // 修改样式
console.log( p1.style.width ) // 获取样式
p1.className = 'red' // 修改class
console.log( p1.className ) // 获取class

// 获取nodeName和nodeType：
console.log(p1.nodeName)
console.log(p1.nodeType) // 1

 

三、DOM结构操作：

 

1.新增/插入节点：

// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'
// 插入节点
div1.appendChild(newP)

// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)

 

2.获取子节点列表，获取父元素：

const p1 = document.getElementById('p1')

// 获取父元素
console.log( p1.parentNode )

// 获取子元素列表
const div1ChildNodes = div1.childNodes
console.log( div1.childNodes )
const div1ChildNodesP = Array.prototype.slice.call(div1.childNodes).filter(child => {
    if (child.nodeType === 1) {
        return true
    }
    return false
})
console.log('div1ChildNodesP', div1ChildNodesP)

 

3.删除子元素：

// 删除子元素
div1.removeChild( div1ChildNodesP[0] )

 

 

四、DOM性能问题：

 

1.DOM操作非常“昂贵”，应该避免频繁的DOM操作

 

2.可以对DOM查询做缓存

 

3.将频繁操作改为一次性操作

const list = document.getElementById('list')

// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()

for (let i  = 0; i < 20; i++) {
    const li = document.createElement('li')
    li.innerHTML = `List item ${i}`

    // 先插入文档片段中
    frag.appendChild(li)
}

// 都完成之后，再统一插入到 DOM 结构中
list.appendChild(frag)

console.log(list)