DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域。为填充这方面的缺失,不同浏览器实现了不同的控制滚动的方式。在所有这些专有方法中,HT服务器托管网ML5 选择了标准化 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()方法。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net
相关推荐: STM32CubeMX教程29 USB_HOST – 使用FatFs文件系统读写U盘
1、准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) keil Vision5 IDE(MDK-Arm) ST-LINK/V2驱动 野火DAP仿真器 XCOM V2.6串口助手 2、实验目标 …