js scrollIntoView()

DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失，不同浏览器实现了不同的控制滚动的方式。在所有这些专有方法中，HTML5 选择了标准化 scrollIntoView()。 scrollIntoView()方法存在于所有 HTML 元素上，可以滚动浏览器窗口或容器元素以便包含元素进入视口。这个方法的参数如下：

 true：窗口滚动后元素的顶部与视口顶部对齐。
 false：窗口滚动后元素的底部与视口底部对齐。
 scrollIntoViewOptions 是一个选项对象。
 behavior：定义过渡动画，可取的值为"smooth"和"auto"，默认为"auto"。
 block：定义垂直方向的对齐，可取的值为"start"、"center"、"end"和"nearest"，默
认为 "start"。
 inline：定义水平方向的对齐，可取的值为"start"、"center"、"end"和"nearest"，默
认为 "nearest"。
 不传参数等同于 alignToTop 为 true。

来看几个例子：

document.forms[0].scrollIntoView(); 
// 同上
document.forms[0].scrollIntoView(true); 
document.forms[0].scrollIntoView({block: 'start'}); 
// 尝试将元素平滑地滚入视口
document.forms[0].scrollIntoView({behavior: 'smooth', block: 'start'});

这个方法可以用来在页面上发生某个事件时引起用户关注。把焦点设置到一个元素上也会导致浏览器将元素滚动到可见位置。 专有扩展 尽管所有浏览器厂商都理解遵循标准的重要性，但它们也都有为弥补功能缺失而为 DOM 添加专有扩展的历史。虽然这表面上看是一件坏事，但专有扩展也为开发者提供了很多重要功能，而这些功能后来则有可能被标准化，比如进入 HTML5。 除了已经标准化的，各家浏览器还有很多未被标准化的专有扩展。这并不意味着它们将来不会被纳入标准，只不过在本书编写时，它们还只是由部分浏览器专有和采用。 children 属性 IE9 之前的版本与其他浏览器在处理空白文本节点上的差异导致了 children 属性的出现。 children 属性是一个 HTMLCollection，只包含元素的 Element 类型的子节点。如果元素的子节点类型全部是元素类型，那 children 和 childNodes 中包含的节点应该是一样的。可以像下面这样使 用 children 属性：

let firstChild = element.children[0];

contains()方法 DOM 编程中经常需要确定一个元素是不是另一个元素的后代。IE 首先引入了 contains()方法，让开发者可以在不遍历 DOM 的情况下获取这个信息。contains()方法应该在要搜索的祖先元素上调用，参数是待确定的目标节点。 如果目标节点是被搜索节点的后代，contains()返回 true，否则返回 false。下面看一个例子：

这个例子测试元素中是否包含元素，在格式正确的 HTML 中会返回 true。 另外，使用 DOM Level 3 的 compareDocumentPosition()方法也可以确定节点间的关系。这个方法会返回表示两个节点关系的位掩码。下表给出了这些位掩码的说明。

0x1 断开（传入的节点不在文档中）
0x2 领先（传入的节点在 DOM 树中位于参考节点之前）
0x4 随后（传入的节点在 DOM 树中位于参考节点之后）
0x8 包含（传入的节点是参考节点的祖先）
0x10 被包含（传入的节点是参考节点的后代）

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

console.log(!!(result & 0x10));

以上代码执行后 result 的值为 20（或 0x14，其中 0x4 表示“随后”，加上 0x10“被包含”）。对result 和 0x10 应用按位与会返回非零值，而两个叹号将这个值转换成对应的布尔值。 IE9 及之后的版本，以及所有现代浏览器都支持 contains()和 compareDocumentPosition()方法。