「读书笔记」第四版JavaScript高级程序设计（第十四章）

前言

单纯的笔记，没别的

节点的类型

节点类型

一共有12种节点的类型，节点类型通过nodeType获取，使用数字1～12表示

• nodeType，节点的类型
• nodeName，取决于节点的类型，对于Element类型的元素，nodeName等于标签名
• nodeValue，取决于节点的类型，对于Element类型的元素，nodeValue等于null

节点关系

• childNodes属性，包含NodeList类数组对象。NodeList可以直接使用中括号NodeList[0], NodeList.item(1), 访问其中的元素。Array.from转成数组对象
• parentNode属性，指向父节点
• previousSibling，前一个兄弟节点，第一个的前一个是null,
• nextSibling，后一个兄弟节点, 最后一个的后一个是null,
• firstChild，第一个子节点
• lastChild，最后一个子节点
• hasChildNodes(), 如果存在子节点返回true

操纵节点

• parentNode.appendChild(), 在childNodes列表末尾添加元素，并返回新的元素。如果是已有元素，则会移动现在的节点。
• parentNode.iertBefore(插入节点，参考节点)，如果参考节点是null，会插入到最后一个节点。如果参考节点是firstChild，则参入到第一个节点。
• parentNode.replaceChild(替换节点，参考节点)
• parentNode.removeChild(删除的节点)
• cloneNode(boolean), boolean传false只会复制当前的节点，传true会复制当前节点极其子节点，cloneNode不会复制由js添加的属性，比如事件处理程序。
• normalize，规范化文本节点

Document类型

文档对象 document 是 HTMLDocument 的实例(HTMLDocument 继承 Document)，表示整个 HTML 页面。document 是 window 对象的属性，因此是一个全局对象。Document的nodeType类型等于9

文档子节点

• document.documentElement，返回html元素
• document.childNodes[0], 返回html元素
• body属性，返回body元素
• doctype属性, 返回
• title，包含

  DocumentFragment类型

  文档片段, nodeType等于11，DocumentFragment可以理解为一个仓库，DocumentFragment里存储着所有要添加到文档里的节点

  创建文档片段

  • document.createDocumentFragment

  使用

  // 如果不使用文档片段，浏览器会渲染3次
  let ul = document.getElementById("myList");
  for (let i = 0; i < 3; ++i) {
      let li = document.createElement("li");
      li.appendChild(document.createTextNode(`Item ${i + 1}`));
      ul.appendChild(fragment);
  }
  
  // 使用文档片段后，浏览器只会渲染一次
  let fragment = document.createDocumentFragment();
  let ul = document.getElementById("myList");
  for (let i = 0; i < 3; ++i) {
      let li = document.createElement("li");
      li.appendChild(document.createTextNode(`Item ${i + 1}`));
      fragment.appendChild(li);
  }
  ul.appendChild(fragment);

  Attr类型

  Attr节点存在在元素的attributes属性上，nodeType等于2，nodeName等于属性名，nodeValue等于属性值，Attr类型虽然是节点，但不是DOM树的一部分

  // attr节点的name为align
  let attr = document.createAttribute("align");
  // attr节点的value为left
  attr.value = "left";
  // 为元素设置属性
  element.setAttributeNode(attr);

  DOM编程

  动态脚本

  对于动态插入的内联script脚本，如果是使用innerHTML插入的script，不会执行。只能通过appendChild，等DOM的API插入节点。

  const script = document.createElement("script"); 
  script.type = "text/javascript";
  
  script.appendChild(document.createTextNode(code));
  
  
  // 可以执行
  document.body.appendChild(script)
  // script无法执行
  document.body.innerHTML = script

  动态样式

  
  function loadStyleString(css){
      let style = document.createElement("style");
      style.type = "text/css";
      style.appendChild(document.createTextNode(css));
      let head = document.getElementsByTagName("head")[0];
      head.appendChild(style);
  }

  NodeList

  NodeList和HTMLCollection很相似，但是HTMLCollection对象有额外的namedItem方法，可以通过元素的name获取引用

  MutationObserver

  MutationObserver，可以观察整个文档，或者DOM的一部分，或者某个元素。当发生变化时，会异步的触发callback

  基本使用

  // mo不会关联任何DOM对象，而是需要使用observer
  // 关联具体的dom对象已经需要观察的属性
  const mo = new MutationObserver(() => {
      console.log('dom change')
  })
  // 观察document.body元素，属性的变化。当body的属性发生变化，就会触发MutationObserver中的callback
  // 但是document.body子代的变化，或者docuemnt.body其他内容的变化，不会触发callback, 
  mo.observer(document.body, {
      attributes: true
  })

  MutationRecord数组

  MutationRecord数组记录了一组信息，以为回调的触发可能是多个操作引起的。每个信息里包含了发生了那些变化，影响到那些元素等。

  const div = document.getElementById('id1');
  const mo = new MutationObserver((MRecord) => {
      // 打印结果如下
      console.log(MRecord);
  });
  mo.observe(div, {
      attributes: true,
  });
  div.dataset.name = 'World!';

  

  多次的修改MutationRecord数组中会有多个内容

  
  const div = document.getElementById('id1');
  const mo = new MutationObserver((MRecord) => {
      console.log(MRecord);
  });
  mo.observe(div, {
      attributes: true,
  });
  div.dataset.name = 'World!';
  div.dataset.name = 'Hello World!';

  

  callback

  callback的第一个参数是MutationRecord的数组，第二个参数是MutationObserver的实例

  disconnect方法

  调用disconnect方法，会停止监听回调。

  // 停止监听回调
  mo.disconnect()

  MutationObserver复用

  多次调用observe方法，可以观察多个节点。

  
  const div1 = document.getElementById('id1');
  const div2 = document.getElementById('id2');
  const mo = new MutationObserver((MRecord) => {
      console.log(MRecord);
  });
  mo.observe(div1, {
      attributes: true,
  });
  mo.observe(div2, {
      attributes: true,
  });
  div1.dataset.name = '1';
  div2.dataset.name = '2';

  

  MutationObserver重用

  调用disconnect不会终止MutationObserver实例的生命，我们可以重新调用observe，并继续使用它

  
  const div1 = document.getElementById('id1');
  const div2 = document.getElementById('id2');
  const mo = new MutationObserver((MRecord) => {
      // MRecord数组只有一个内容
      console.log(MRecord);
  });
  mo.observe(div1, {
      attributes: true,
  });
  div1.dataset.name = '1';
  mo.disconnect();
  mo.observe(div2, {
      attributes: true,
  });
  div2.dataset.name = '2';

  MutationObserverInit与观察范围

  MutationObserver可以观察属性的变化，子节点的变化，和文本的变化

  • subtree，boolean，是否观察子代
  • attributes, boolean，是否观察属性
  • attributeFilter，string[], 具体观察那些属性的变化
  • attributeOldValue，boolean, 在MutationRecord数组中是否记录之前的属性值。
  • characterData，boolean，是否观察修改字符数据的变化（文本节点，注释节点）
  • characterDataOldValue, boolean, 在MutationRecord数组中是否记录之前的字符值。
  • childList，boolean, 修改子节点是否触发观察

  subtree, 设置为true，观察整个子数。如果将后代移除子树后，脱离了原来的子树后，对其修改，依然会触发变化。

  childList, 设置为true，只观察一级子树

  异步回调和记录队列

  每一次的变化信息会记录在MutationRecord实例中，然后添加到记录队列中，这个队列是每个MutationObserver实例唯一的。每一次MutationRecord被添加到队列中之后，如果当前微任务队列的长度为0，才会触发之前注册的回调。

  takeRecords

  清空队列，并返回队列中的内容。同时会停止回调监听

  
  // 不会触发console
  let observer = new MutationObserver((mutationRecords) => console.log(mutationRecords));
  
  observer.observe(document.body, { attributes: true });
  
  document.body.className = 'foo';
  document.body.className = 'bar';
  document.body.className = 'baz';
  // [MutationRecord, MutationRecord, MutationRecord]
  console.log(observer.takeRecords());
  // []
  console.log(observer.takeRecords());

  性能、内存与垃圾回收

  MutationObserver对目标DOM是弱引用。如果目标节点被垃圾回收，MutationObserver不会阻碍回收。

  目标节点对MutationObserver是强引用，如果目标节点被回收，MutationObserver也会被回收。

  MutationRecord实例会阻碍节点被垃圾回收。可以提取出MutationRecord有用的信息，保存到新对象中。

  参考

  • Mutation Observers---subtree