11DOM扩展

11.1选择符API

众多JavaScript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素。

querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。通过Documnet类型调用时会在文档元素的范围内查找匹配的元素。而通过Element类型调用,只会在该元素后代元素的范围内查找匹配的元素。

querySelectorAll()方法返回的是所有匹配的元素而不仅仅是一个元素,返回的是一个Nodelist的实例。要取得返回的Nodelist中的每一个元素,可以使用item()方法,也可以使用方括号语法。

matchesSelector()方法接收一个参数,即CSS选择符,如果调用元素与该选择符匹配,返回true;否则,返回false。

11.2元素遍历

Element Traversal API为DOM元素添加了5个属性:childElementCount、firstElementChild、lastElementChild、previousElementSibling、nextElementSibling。

11.3HTML5

与类相关的扩充

getElementByClassName()方法接收一个参数,即一个包含一个或多个类名的字符串,返回带有指定类的所有元素的NodeList。

classList属性可以添加、删除和替换类名。这个属性有如下方法:add()、contain()、remove()和toggle()。

焦点管理

元素获得焦点的方式有页面加载、用户输入(通常是按Tab键)和在代码中调用focus()方法。document.hasFocus()方法用于确定文档是否获得了焦点。

HTMLDocument的变化

document的readyState属性有两个可能的值:loading和complete。document.compatMode()属性可以检测页面的兼容模式。document.head可以应用文档的<head>元素。

字符集属性

charset属性表示文档中实际使用的字符集,也可以用来指定新字符集。defaultCharset表示根据默认浏览器及操作系统的设置,当前文档默认的字符集应该是什么。

自定义数据属性

HTML5规定可以为元素添加非标准的属性,弹药添加前缀data-,可以通过元素的dataset属性来访问自定义属性的值。

插入标记

在读模式下,innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点),在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签,在写模式下,outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。insertAdjacentHTML()方法可以插入标记,第一个参数的可能取值:beforebegin、afterbegin、beforeend和afterend。使用这三个属性时,最好先手工删除要替换的元素的所有事件处理程序和JavaScript对象属性。

scrollIntoView()方法

scrollIntoView()可以设置滚动页面。

11.4专有扩展

文档模式

通过document.documentMode属性可以知道给定页面使用的是什么文档模式。

children属性

children属性只包含元素中同样还是元素的子节点。

contain()属性

contain属性用来检测某个节点是不是另一个节点的后代。compareDocumentPosition()也能够确定节点间的关系。

插入文本

在通过innerText读取值时,它会按照由浅入深的顺序,将子文档树种的所有文本拼接起来,在通过innerText写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点。可以通过innerText属性过滤掉HTML便签。outerText属性。

滚动

scrollIntoViewIfNeeded(alignCenter)、scrollByLines(lineCount)、scrollByPages(pageCount)

原文地址:https://www.cnblogs.com/dingzibetter/p/js.html