javascript基础学习系列五百四十：scrollIntoView()

DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失，不同浏览
器实现了不同的控制滚动的方式。在所有这些专有方法中，HTML5 选择了标准化scrollIntoView()。
scrollIntoView()方法存在于所有HTML 元素上，可以滚动浏览器窗口或容器元素以便包含元
素进入视口。这个方法的参数如下：
 alignToTop 是一个布尔值。
 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 childCount = element.children.length;
let firstChild = element.children[0];