DOM 常用方法

node.NodeType

• 得到節點型別
• 1 元素節點
• 3 文字節點

 const lis = document.querySelectorAll("li");
 // console.dir(lis[0]);   // li
 console.log(lis[0].nodeType); // 1

createDocumentFragment()

• 文件碎片,高效批量更新多個節點

 <div id="app">
   <ul>
     <li></li>
     <li></li>
     <li></li>
   </ul>
 </div>

      // 1.建立文件碎片節點,類似於document,只是操作它只會在記憶體中操作,並不會影響使用者介面
      const fragment = document.createDocumentFragment();

      // 2.將操作的真實DOM元素新增到文件碎片節點中
      const app = document.getElementById("app");
      console.log(app.childNodes); //NodeList(3) [text, ul, text]

      let children;
      // 先賦值：child = app.firstChild
      // 在判斷 child 值是否存在
      while ((children = app.firstChild)) {
        // 一旦元素新增到fragment中，就會從DOM移除
        fragment.appendChild(children);
      }
      console.log(app.childNodes); // NodeList []
      // console.log(fragment);

      // 3.操作文件碎片節點裡面的值,1是ul這個節點
      const list = fragment.childNodes[1];
      console.log(list.children); // 注意children獲取的是元素,childNodes獲取的包含文字節點
      [].slice.call(list.children).forEach((item) => {
        console.log(item);
        item.textContent = item.textContent + "~~~~~~";
      });

      // 4.將fragment節點新增到頁面中生效
      app.appendChild(fragment);