2025-02-24 日报 Day107

今日的鸡汤

追光的人，
终会光芒万丈。

今日学习内容

1、JS 红皮书 P456-459 第十五章：DOM扩展

今日笔记

1、专有扩展:

• children属性: children 属性是一个 HTMLCollection，只包含元素的 Element 类型的子节点。如果元素的子节点类型全部是元素类型，那 children 和 childNodes 中包含的节点应该是一样的。可以像下面这样使用 children 属性：
  let childCount = element.children.length;
  let firstChild = element.children[0];
• contains()方法: DOM 编程中经常需要确定一个元素是不是另一个元素的后代。IE 首先引入了 contains()方法，让开发者可以在不遍历 DOM 的情况下获取这个信息。contains()方法应该在要搜索的祖先元素上调用，参数是待确定的目标节点。
  如果目标节点是被搜索节点的后代，contains()返回 true，否则返回 false。下面看一个例子：

  console.log(document.documentElement.contains(document.body)); // true 

  这个例子测试元素中是否包含元素，在格式正确的 HTML 中会返回 true。
  另外，使用 DOM Level 3 的 compareDocumentPosition()方法也可以确定节点间的关系。这个方法会返回表示两个节点关系的位掩码。下表给出了这些位掩码的说明。
  掩 码 节点关系
  0x1 断开（传入的节点不在文档中）
  0x2 领先（传入的节点在 DOM 树中位于参考节点之前）
  0x4 随后（传入的节点在 DOM 树中位于参考节点之后）
  0x8 包含（传入的节点是参考节点的祖先）
  0x10 被包含（传入的节点是参考节点的后代）
  2、插入标记: HTML5 将 IE 发明的 innerHTML 和 outerHTML 纳入了标准，但还有两个属性没有入选。这两个剩下的属性是 innerText 和 outerText。
• innerText属性: innerText 属性对应元素中包含的所有文本内容，无论文本在子树中哪个层级。在用于读取值时，innerText 会按照深度优先的顺序将子树中所有文本节点的值拼接起来。在用于写入值时，innerText会移除元素的所有后代并插入一个包含该值的文本节点。来看下面的 HTML 代码：

  <div id="content"> 
   <p>This is a <strong>paragraph</strong> with a list following it.</p> 
   <ul> 
   <li>Item 1</li> 
   <li>Item 2</li> 
   <li>Item 3</li> 
   </ul> 
  </div>

  对这个例子中的
  而言，innerText 属性会返回以下字符串：
  This is a paragraph with a list following it. Item 1 Item 2 Item 3
• outerText属性: outerText 与 innerText 是类似的，只不过作用范围包含调用它的节点。要读取文本值时，outerText 与 innerText 实际上会返回同样的内容。但在写入文本值时，outerText 就大不相同了。写入文本值时，outerText 不止会移除所有后代节点，而是会替换整个元素。比如：
  div.outerText = “Hello world!”;
  这行代码的执行效果就相当于以下两行代码：
  let text = document.createTextNode(“Hello world!”);
  div.parentNode.replaceChild(text, div);
  本质上，这相当于用新的文本节点替代 outerText 所在的元素。此时，原来的元素会与文档脱离关系，因此也无法访问。
  outerText 是一个非标准的属性，而且也没有被标准化的前景。因此，不推荐依赖这个属性实现重要的操作。除 Firefox 之外所有主流浏览器都支持 outerText。
  3、滚动:

  // 如果不可见，则将元素可见
  document.images[0].scrollIntoViewIfNeeded();

  4、小结:
  虽然 DOM 规定了与 XML 和 HTML 文档交互的核心 API，但其他几个规范也定义了对 DOM 的扩展。很多扩展都基于之前的已成为事实标准的专有特性标准化而来。本章主要介绍了以下 3 个规范。
   Selectors API 为基于 CSS 选择符获取 DOM 元素定义了几个方法：querySelector()、querySelectorAll()和 matches()。
   Element Traversal 在 DOM 元素上定义了额外的属性，以方便对 DOM 元素进行遍历。这个需求是因浏览器处理元素间空格的差异而产生的。
   HTML5 为标准 DOM 提供了大量扩展。其中包括对 innerHTML 属性等事实标准进行了标准化，还有焦点管理、字符集、滚动等特性。
  DOM 扩展的数量总体还不大，但随着 Web 技术的发展一定会越来越多。浏览器仍然没有停止对专有扩展的探索，如果出现成功的扩展，那么就可能成为事实标准，或者最终被整合到未来的标准中。