这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战
前言
尽管DOM API 已经相当不错,但仍然不断有标准或专有的扩展出现,以支持更多功能。2008年以。大部分浏览器对 DOM 的扩展是专有的。此后,W3C开始着手将这些已成为事实标准的专有扩展编服正式规范。
基于以上背景,诞生了描述 DOM 扩展的两个标准 Selectors API 与HTML5。这两个标准体现了社建和标准化某些手段及 API 的愿景。另外还有较小的 ElementTraversal 规范,增加了一些 DOM 属性。铺扩展虽然还有,但这两个规范(特别是 HTMLS )已经涵盖其中大部分。本章也会讨论专有扩展。本章所有内容已经得到市场占有率名列前茅的所有主流浏览器支持,除非特别说明。
元素遍历
IE9之前的版本不会把元素间空白的全部当成空白节点,而其他浏览器则会。这样就导致了 childNodes . child 等属性上的差开。刀了外朴这个差异,同时不影响 DOM 规范,w3C通过新的 Element
raversal 规范足义了一组新属性。
clement Traversal API 为 DOM 元素添加了5个属性:
n chilaElementCount ,返回子元素数量(不包含文本节点和注释);
nfirstElementChild ,指问第一个 Element 类型的子元素( Element 版 firstChild ); nlastElementChild ,指向最后一个 Element 类型的子元素( Element 版 lastChild );
0previousElementSibling,指向前一个 Element 类型的同胞元素( Element 版 previousSibling );
nextElementSibling ,指向后一个 Element 类型的同胞元素( Element 版 nextSibling )。在支持的浏览器中,所有 DOM 元素都会有这些属性,为遍历 DOM 元素提供便利。这样开发者就用担心空白文本节点的问题了。
举个例子,过去要以跨浏览器方式遍历特定元素的所有子元素,代码大致是这样写的:
let parentElement = document . getElementById (' parent ');\
let currentChildNode = parentElement . firstChild ;\
1/没有子元素, firstChild 返回nul1,跳过循环 while ( currentChildNode ){\
if ( currentChildNode . nodeType ===1){ I /如果有元素节点,则做相应处理\
processChild ( currentChildNode ); Y 美来部N3多个\
1f( currentChildNode === parentElement . lastChild )( break ;\
currentChildNode = currentChildNode . nextSibling ;\
用 Element Traversal 属性之后,以上代码可以简化如下:
parentElement = document . getElementBy Id (＇ parent ');
currentChildElement = parentElement , firstElementChild ;\
移动浏览器不会直接在设备上提供控制台界面。不过,还是有一些途径可以在移动设备中检查错误 Chrome 移动版和 Safari 的 iOs 版内置了实用工具,支持将设备连接到宿主操作系统中相同的浏览器。然后,就可以在对应的桌面浏览器中查看错误了。这涉及设备之间的硬件连接,且要遵循不同的操作步骤,比如 Chrome 的操作步骤参见 Google Developers 网站的文章《 Android 设备的远程调试人门》. Safari 的操作步骤参见 Apple Developer 网站的文章“ Safari Web Inspector Guide "。
此外也可以使用第三方工具直接在移动设备上调试。 Firefox 常用的调试工具是 Firebug Lite ,这需要通过 JavaScript 的书签小工具向当前页面中加人 Firebug 脚本才可以。脚本运行后,就可以直接在移动台打开。
