JS基础知识到JS-WEB-API
· js基础知识,规定语法(ECMA 262)
- js Web Api 页面操作。(W3C)
DOM的本质
前言
- vue 和 react 框架应用广发,封装了DOM操作。
- DOM操作是前端的基础
- 只会vue不懂DOM,不会长久。
DOM操作
题目
- DOM是那种数据结构
- DOM操作常见的API
- attr 和property的区别
- 一次性插入多个DOM节点,考虑性能
DOM本质
一棵树
DOM节点操作
获取节点
document.getElementByID('id')
document.getElementsByTagName('p')
document.getElementsByClassName('class')
document.querySelectorAll()
attribute
修改标签属性,每次改变需要重新渲染。
p.setAttribut('data-name','12')
p.getAttribut('data0name')
p.setAttribut('style','font-size:50px')
propert
js操作的属性来改变结构的形式
p.style.width = ‘100’
p.className = ’red’
p.nodeName //节点名称
p.nodeType //节点类型 一般为1
DOM结构操作
新增/插入
//增加
let div = document.getElementById('div')
let p = document.createElement('p')
p.innerHTML = 'this is p '
div appendChlild(p)
//移动节点
div2.appendChild(p)
获取子节点,获取父节点
p1.parentNode
div.childNodes
nodeType = 3 是文字 来去掉文字部分
Array.prototyoe.slice.call(div.childNodes).filter(chi){
if(nodeType ===1){
return true
}
})
删除
div.removeChild()
DOM优化
- 可以做缓存
- 多次频繁操作改成一次
const pList = document.getElementsByTagName('p')
const length = pList.length
for(let i = 0;i<length;i++)