JS-Web-Api

JS基础知识，规定语法(ECMA262标准);

• 变量类型和计算
• 原型和原型链
• 作用域和闭包
• 异步和同步

JS Web Api 网页操作的API(W3C标准)；

• DOM操作(操作网页元素文本这些)
• BOM操作(操作浏览器的跳转啊宽高啊之类的)
• 事件绑定
• ajax
• 存储

前者是后者的基础，两者结合才能真正实际应用

DOM (DOM是Document Object Model文档对象模型的缩写)

题目

1. DOM是哪种数据结构？
   树形结构
2. DOM操作常用API
   DOM节点的操作
DOM结构的操作
3. 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

4. 一次性插入多个DOM节点，考虑性能

知识点

• DOM本质
  DOM的本质是浏览器把拿到的HTML代码，结构化为一个浏览器可识别，并且JS可以操作的一个模型

• DOM节点操作
  获取DOM节点，然后可以操作节点的attribute,property

• DOM结构操作
  新增和插入节点

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)