JavaScript学习笔记之DOM扩展

最新推荐文章于 2024-06-18 09:26:21 发布

永远的27

最新推荐文章于 2024-06-18 09:26:21 发布

阅读量476

点赞数

分类专栏：一垒—JavaScript学习笔记文章标签： javascript DOM扩展

本文链接：https://blog.csdn.net/Missing27/article/details/45704257

版权

一垒—JavaScript学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

DOM作为API已经很完善了，但是为了实现更多的功能，还是有着各种各样的扩展和功能上的补充。

DOM扩展

1、选择符API（Selector API）

它包括两个核心方法，用来实现根据CSS选择符选择与某个模式匹配的DOM元素。分别是querySelector()方法和querySelectorAll()方法。这两个方法可以通过Document、DocumentFragment和Element的类型的实例调用它们。

querySelector()：接受一个CSS选择符，返回与该模式匹配的第一个元素，没找到则返回null

querySelector()：接受一个CSS选择符，返回所有与该模式匹配的元素，返回一个NodeList的实例。注：这个NodeList带有所有属性和方法，而其底层实现类似于一组元素的快照，而非不断对文档进行搜索的动态查询。

2、元素遍历

由于之前DOM的方法，对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他浏览器则会返回文本节点。因此，DOM扩展又新增了5个属性：childElementCount，firstElementChild，lastElementChild，previousElementSibling，nextElementSibling。这些属性会不包括空白文本节点，所以可以更方便遍历查找DOM元素。

3、HTML5

HTML5规范围绕如何使用新增标记定义了大量的JavaScript API，其中一些API与DOM重叠，定义了浏览器应该支持的DOM扩展。

getElementByClassName()：接受一个参数，包含一或多个类名的字符串，返回带有指定类的元素的NodeList。

classList属性：是一个新集合类型DOMTokenList的实例，包含着一个元素的类名信息。这个属性定义了4种方法：add()，contains()，remove()和toggle()用来对类名进行相应操作。

document.activeElement：指向DOM中当前获得了焦点的元素

document.hasFocus()：确定文档是否获得了焦点

document.readyState：表示文档的加载情况，包括loading和complete两个可能值

document.compatMode：用来判断浏览器采用了哪种渲染模式，可能值为CSS1Compat表示标准模式和BackCompat表示混杂模式

document.head：指向文档的<head>元素
dataset属性：用来访问自定义属性的值，它是一个DOMStringMap的实例，也就是名值对的映射。注：自定义属性要加data-前缀，而在dataset中相应属性名则去掉前缀

scrollIntoView()：使得调用元素出现在视口中。

4、插入标记

虽然DOM为操作节点提供了各种手段，但是需要给文档插入大量新HTML标记的情况下，通过DOM操作会很麻烦，使用插入标记的技术，直接插入HTML字符串不仅更简单，速度也更快。