javascript基础学习系列五百四十一：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 被包含（传入的节点是参考节点的后代）
要模仿contains()方法，就需要用到掩码16（0x10）。compareDocumentPosition()方法的结
果可以通过按位与来确定参考节点是否包含传入的节点，比如：
let result = document.documentElement.compareDocumentPosition(document.body);
console.log(!!(result & 0x10));
以上代码执行后result 的值为20（或0x14，其中0x4 表示“随后”，加上0x10“被包含”）。对
result 和0x10 应用按位与会返回非零值，而两个叹号将这个值转换成对应的布尔值。
IE9 及之后的版本，以及所有现代浏览器都支持contains()和compareDocumentPosition()
方法。
插入标记
HTML5 将IE 发明的innerHTML 和outerHTML 纳入了标准，但还有两个属性没有入选。这两个剩
下的属性是innerText 和outerText。

1. innerText 属性
   innerText 属性对应元素中包含的所有文本内容，无论文本在子树中哪个层级。在用于读取值时，
   innerText 会按照深度优先的顺序将子树中所有文本节点的值拼接起来。在用于写入值时，innerText
   会移除元素的所有后代并插入一个包含该值的文本节点。来看下面的HTML 代码：

This is a paragraph with a list following it.

• Item 1
• Item 2
• Item 3

对这个例子中的

而言，innerText 属性会返回以下字符串： This is a paragraph with a list following it. Item 1 Item 2 Item 3 注意不同浏览器对待空格的方式不同，因此格式化之后的字符串可能包含也可能不包含原始HTML 代码中的缩进。 下面再看一个使用innerText 设置

元素内容的例子： div.innerText = "Hello world!"; 执行这行代码后，HTML 页面中的这个

元素实际上会变成这个样子：

Hello world!

设置innerText 会移除元素之前所有的后代节点，完全改变DOM 子树。此外，设置innerText 也会编码出现在字符串中的HTML 语法字符（小于号、大于号、引号及和号）。下面是一个例子： div.innerText = "Hello & welcome, \"reader\"!"; 执行之后的结果如下：

Hello & welcome, <b>"reader"!</b>

因为设置innerText 只能在容器元素中生成一个文本节点，所以为了保证一定是文本节点，就必 须进行HTML 编码。innerText 属性可以用于去除HTML 标签。通过将innerText 设置为等于 innerText，可以去除所有HTML 标签而只剩文本，如下所示： div.innerText = div.innerText; 执行以上代码后，容器元素的内容只会包含原先的文本内容。