05.JS-WEB-API

JS基础知识到JS-WEB-API

· js基础知识，规定语法（ECMA 262）

• js Web Api 页面操作。（W3C)

DOM的本质

前言

1. vue 和 react 框架应用广发，封装了DOM操作。
2. DOM操作是前端的基础
3. 只会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优化

1. 可以做缓存
2. 多次频繁操作改成一次

const pList = document.getElementsByTagName('p')
const length = pList.length
for(let i = 0;i<length;i++)