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

最新推荐文章于 2024-09-23 16:32:05 发布

Sunny_媛

最新推荐文章于 2024-09-23 16:32:05 发布

阅读量671

点赞数 12

文章标签： javascript 学习开发语言性能优化系统架构

本文链接：https://blog.csdn.net/m0_68635815/article/details/136449054

版权

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];

contains()方法

DOM 编程中经常需要确定一个元素是不是另一个元素的后代。IE 首先引入了 contains()方法， 17 让开发者可以在不遍历 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() 方法。