一、JS Web API-DOM

JS 基础知识，规定语法（ECMA 262标准） JS Web API，网页操作的API（W3C标准） 前者是后者的基础，两者结合才能真正实际应用。

JS Web API

• DOM
• BOM
• 事件绑定
• ajax
• 存储

相关题目：

• DOM是哪种数据结构
• DOM操作的常用API
• attr和property区别
• 一次性插入多个DOM节点，考虑性能的话如何处理

1. DOM本质

• html和DOM不同，html是一个文件，是一段代码。DOM则是浏览器内存中初始化好的一个树的结构。
• DOM的数据结构是树。

2. DOM节点操作

• 获取DOM节点

    // 元素 c
    const div1 = document.getELementById('div1')
    const divList = document.getElementsByTagName('div') // 集合
    console.log(divList.length);
    console.log(divList[0]);
    
    const containerList = document.getElementsByClassName('.container') // 集合
    const pList = document.querySelectorAll('p') // 集合

• property：修改对象属性，不会体现到html结构中
• attribute：修改html属性，会改变html结构
• 两者都有可能引起DOM重新渲染，建议尽量使用property进行操作。

    // property形式
    const p1 = pList[0]
    p1.style.width = '100px'
    p1.style.color = 'pink'
    console.log(p1.style.width);
    p1.className = 'pink'
    console.log(p1.className);
    console.log(p1.nodeName);
    console.log(p1.nodeType); // nodeType表示DOM元素的类型，一般DOM元素的类型是1
    
    // attribute
    p1.setAttribute('data-name', 'imooc')
    console.log(p1.getAttribute('data-name'));
    
    p1.setAttribute('style', 'font-size:50px')
    console.log(p1.getAttribute('style'));

3. DOM结构操作

• 新增/插入节点
• 获取子元素列表，获取父元素
• 删除子元素

      const div1 = document.getElementById('div1')
      const div2 = document.querySelector('#div2')
       
      // 新增节点
      const newP = document.createElement('p')
      newP.innerHTML = 'this is p1'
      
      // 插入节点
      div1.appendChild(newP)
      
      //移动节点
      const p1 = document.getElementById('p1')
      div2.appendChild(p1)
      
      // 获取父元素
      console.log(p1.parentNode);
      
      // 获取子元素列表
      const div1ChildNodes = div1.childNodes
      console.log(div1ChildNodes);
      // 通过使用数组的filter方法过滤掉text节点
      const div1ChildNodesP = Array.prototype.slice.call(div1ChildNodes).filter(child => {
        if(child.nodeType === 1) {
          return true
        }
        return false
      })
      console.log('div1ChildNodesP', div1ChildNodesP);
      
      // 删除节点
      div1.removeChild(div1ChildNodesP[0])

4. DOM性能

• DOM操作非常"昂贵"，因为其占用CPU计算较多。
• 为了避免频繁的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(var i = 0; i < length; i++) {
          // 缓存 length，只进行一次 DOM 查询
        }

  • 可以将频繁操作改为一次性操作

        const list = document.getElementById('div1')
        // 创建一个文档片段，此时还没有插入到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)

5. 总结

• DOM 节点操作。
• DOM 结构操作。
• attribute 和 property。
• attribute 和 property的区别。
• 一次性插入多个节点，考虑性能。