JS基础知识，规定语法(ECMA262标准);
- 变量类型和计算
- 原型和原型链
- 作用域和闭包
- 异步和同步
JS Web Api 网页操作的API(W3C标准)；
- DOM操作(操作网页元素文本这些)
- BOM操作(操作浏览器的跳转啊宽高啊之类的)
- 事件绑定
- ajax
- 存储
前者是后者的基础，两者结合才能真正实际应用
DOM (DOM是Document Object Model文档对象模型的缩写)
题目
- DOM是哪种数据结构？
树形结构 - DOM操作常用API
DOM节点的操作
DOM结构的操作 - attribute和property的区别？
property 属性 ，它是一种通过获取和修改元素的JS对象属性来改变页面渲染结构的一种形式，不会体现在html结构中
const pList = document.querySelectorAll('p')
const p = pList[0]
console.log(p.style.width) //获取样式
p.style.width = "100px" //修改样式
console.log(p.className) //获取class
p.className = "p1"
// 获取nodeName 和 nodeType
console.log(p.nodeName )
console.log(p.nodeType)
p.dataName = 'xiaoming'
//当我们通过这种方式给p标签新增一个属性并赋值时，我们在html结构里是看不到有这样一个属性的但是，可以通过p.dataName获取到
attribute 属性，修改HTML属性，会改变HTML的结构
// 我们可以通过getAttribute和setAttribute这两个API去获取和修改HTML属性
const pList = document.querySelectorAll('p')
const p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name','xiaoming')
p.getAttribute('style')
p.setAttribute('style','font-size:30px;')
// 当我们通过setAttribute 给p标签新增一个 data-name属性时，是可以在DOM结构上看到，也可以通过getAttribute获取到
它们两个都可能引起DOM重新渲染，建议尽量使用property
- 一次性插入多个DOM节点，考虑性能
知识点
DOM本质
DOM的本质是浏览器把拿到的HTML代码，结构化为一个浏览器可识别，并且JS可以操作的一个模型DOM节点操作
获取DOM节点，然后可以操作节点的attribute,propertyDOM结构操作
新增和插入节点
const div1 = document.getElementById('div1')
// 新增节点
const p1 = document.createElement('p')
p1.innerHTML = 'this is p1'
// 插入节点
div1 .appendChild(p1)
// 移动节点
<div id="div1">
<p id="p1">this is p1</p>
</div>
<div id="div2"></div>
const div2 = document.getElementById('div2')
const p1= document.getElementById('p1')
div2.appendChild(p1) // 这个时候，p1元素会从div1移动到div2
获取子元素列表获取父元素
// 获取节点的几个API
const div1 = document.getElementById('div1') // 获取到的是元素
const divList = document.getElementsByTagName('div') // 获取到的是元素集合
const containerList = document.getElementsByClassName('.containerList ') //获取的也是集合
const pList = document.querySelectorAll('p') // 获取的也是集合
// 获取父元素，
console.log(p1.parentNode)
// 获取子元素列表
console.log(div1.childNodes)
console.log(div1.childNodes[0].nodeName) // #text 文本元素
console.log(div1.childNodes[0].nodeType) // 3 如果节点是文本节点 nodeType就返回3
console.log(div1.childNodes[1].nodeName) // p
console.log(div1.childNodes[1].nodeType) // 1 如果节点是元素节点 nodeType就返回1, 如果节点是属性节点 nodeType就返回2
// 我们可以通过 nodeType去筛选节点，比如我们想把div里的p元素筛选出来，而把文本节点剔除，可以这样
const divList = Array.property.slice.call(div1).filter(child => {
if(child.nodyType === 1){
return true
}
return false
})
删除子元素
div1.removeChild(div1.childNodes[1])
- DOM性能
DOM操作会导致重绘和重排，比较耗费性能，所以要尽量避免频繁的DOM操作
怎么避免呢？
- 对DOM查询做缓存
// 不缓存DOM的查询结果
for(let i=0;i<document.getElementsByTagName('p').length;i++){
// 每次循环，都会计算length,频繁的进行DOM查询
}
// 缓存DOM的查询的结果
const pList = document.getElementsByTagName('p')
const length = pList.length
for(let i=0;i<length;i++){
// 缓存length,只进行一次DOM查询
}
- 将频繁操作改为一次性操作
<ul id="list"></ul>
const listNode = document.getElementById('list')
// 频繁的插入DOM节点
for(let x = 0;x<10 ;x++){
const li = document.createElement(li)
li.innerHTML = 'Item li'+x
listNode .appendChild(li)
}
// 一次性插入
// createdocumentfragment()方法创建了一虚拟的节点对象，它是游离与DOM节点之外的，存在JS内存中的，节点对象包含所有属性和方法。
// 当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。
// 你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment() 方法可以更安全改变文档的结构及节点。
// 这里是创建一个文档片段，此时还没有插入DOM树种
const frag = document.createDocumentFragment()
// 执行插入
for(let x = 0;x<10 ;x++){
const li = document.createElement(li)
li.innerHTML = 'Item li'+x
// 先插入文档片段中
frag.appendChild(li)
}
// 都完成之后，再统一插入到DOM树中
listNode .appendChild(listNode)
