专有扩展

1、children属性

  • children属性是一个HTMLCollection，只包含元素的Element类型的子节点。
  • 如果元素的子节点类型全部是元素类型，那children和childNodes中包含的节点应该是一样的。
1
2
let childCount = element.children.length; 
let firstChild = element.children[0];

2、contains()方法

  • DOM编程中经常需要确定一个元素是不是另一个元素的后代。

  • IE引入了contains()方法，让开发者可以在不遍历DOM的情况下获取这个信息。

    • 参数为待确定的目标节点；
    • 如果目标节点是被搜索节点的后代，返回true；否则返回false。
      1
      2
      // 这个例子测试<html>元素中是否包含<body>元素，在格式正确的HTML中会返回true。
      console.log(document.documentElement.contains(document.body)); // true

  • 使用DOM Level 3的compareDocumentPosition()方法也可以确定节点间的关系。

    • 方法会返回表示两个节点关系的位掩码。
    • 下表给出了这些位掩码的说明。
      掩码 节点关系
      0x1 断开（传入的节点不在文档中）
      0x2 领先(传人的节点在DOM树中位于参考节点之前)
      0x4 随后(传入的节点在DOM树中位于参考节点之后)
      0x8 包含(传入的节点是参考节点的祖先)
      0x10 被包含(传人的节点是参考节点的后代)

  • 要模仿contains()方法，就需要用到掩码16 ( 0x10 )。compareDocumentPosition()方法的结果可以通过按位与来确定参考节点是否包含传入的节点。

    1
    2
    3
    4
    5
    let result = document.documentElement.compareDocumentPosition(document.body); 
    console.log(!!(result & 0x10)); 
    /*
    以上代码执行后result的值为20 (或0x14,其中0x4表示“随后”，加上0x10“被包含”)。对result和0x10应用按位与会返回非零值，而两个叹号将这个值转换成对应的布尔值。
    */

3、插入标记

  • HTML5将IE发明的innerHTML和outerHTML纳人了标准，但还有两个属性没有入选。这两个剩下的属性是innerText和outerText。

（1）innerText属性

  • innerText属性对应元素中包含的所有文本内容，无论文本在子树中哪个层级。
  • 在用于读取值时，innerText会按照深度优先的顺序将子树中所有文本节点的值拼接起来。
  • 在用于写入值时，innerText会移除元素的所有后代并插入一个包含该值的文本节点。
    1
    2
    3
    4
    5
    6
    7
    8
    <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>
    1
    2
    3
    4
    5
    6
    7
    /*
    对这个例子中的<div>而言，innerText 属性会返回以下字符串:
    This is a paragraph with a list following it .
    Item 1
    Item 2
    Item 3
    */
  • 设置innerText会移除元素之前所有的后代节点，完全改变DOM子树。此外，设置innerText也会编码出现在字符串中的HTML语法字符(小于号、大于号、引号及和号)。
  • 因为设置innerText只能在容器元素中生成一个文本节点，所以为了保证一定是文本节点，就必须进行HTML编码。
  • innerText 属性可以用于去除HTML标签。通过将innerText 设置为等于innerText，可以去除所有HTML标签而只剩文本。

（2）outerText属性

  • outerText与innerText 是类似的，只不过作用范围包含调用它的节点。
  • 要读取文本值时，outerText与innerText实际上会返回同样的内容。
  • 写入文本值时，outerText 不止会移除所有后代节点，而是会替换整个元素。
1
2
3
4
div.outerText = "Hello world!"; 
//等价于以下两行代码
let text = document.createTextNode("Hello world!"); 
div.parentNode.replaceChild(text, div);
  • 本质上，这相当于用新的文本节点替代outerText所在的元素。此时，原来的元素会与文档脱离关系，因此也无法访问。
  • outerText是一个非标准的属性，而且也没有被标准化的前景。因此，不推荐依赖这个属性实现重要的操作。除Firefox之外所有主流浏览器都支持outerText。

4、滚动

  • HTML5把scrollIntoView()标准化了，但不同浏览器中仍然有其他专有方法。
  • scrollIntoViewIfNeeded()作为HTMLElement类型的扩展可以在所有元素上调用。