js011-DOM扩展-白红宇

js011-DOM扩展

阅读量：4994 次

发布时间：2019-06-12

本文共 2234 字，大约阅读时间需要 7 分钟。

js011-DOM扩展

本章内容

理解Selecters API

使用HTML5 DOM扩展

了解转悠的DOM扩展

11.1选择符API

JS中最常用的一项功能，就是根据css选择符选择与某个模式匹配的DOM元素。

11.1.1 querySlector()方法

该方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null

取得body元素

var body = document.querySlector("body");

取得id为myDiv的元素

var myDiv = document.querySlector("#myDiv");

取得类为slected的元素

var slected = document.querySlector(".slected");

取得类为button的第一个图像元素

var button = document.querySlector("img.button");

11.1.2 querySlectorAll()方法

接收的参数和querySlector()一样，但是返回的不仅不仅是一个元素，而是一个NodeList的实例。

与

querySlector()一样能够调用querySlectorAll()方法的有document，element，DocumentFragment。例子如上面例子类似。

11.1.3 matchSlector()方法

该方法能接收一个参数：css操作符，如果调用元素与该选择符匹配，则返回true，否则返回false

11.2 元素遍历

Element Travesal规范新定义了一组属性。

Element Travesal API为DOM 元素新定义了一下5个属性：

childElementCount	返回子元素（不包括文本节点和注释）的个数
firstElementChild	指向第一个子元素；firstchild的元素版
lastElementChild	指向最后一个子元素；lastchild的元素版
preciousElementSibling	指向前一个同辈元素preciousSibling的元素版
nextElementSibling	指向后一个同辈元素nextSibling的元素版

利用这些属性就不必担心空白文本节点，从而可以方便的查找DOM元素了、。

11.3 HTML5

11.3.1与类相关的扩充

1、getElementBYClassName()方法：接收一个参数：一个包含一个或多个类名的字符串，返回带有指定类的元素的NodeList，传入多个类是，类名的先后顺序不重要

2、classList属性

在操作类名时，需通过className属性添加、删除和替换类名，所以className是一个字符串，所以即使值修改字符串一部分，也必须每次都是指整个字符串的值。

11.3.2焦点管理

11.3.3 HTMLDocument的变化

1、readyState属性

两个可能值：

loading：正在加载文档；

complete：已经加载完文档。

2、兼容模式

3、head属性

作为对document.body引用过得文档<body>元素的不重，HTML5新增了document.head属性，引用文档的<head>元素

11.3.4字符集属性

charset属性

11.3.5自定义数据属性

添加非标准属性，前面添加前缀data-

11.3.6插入标记

1、inherHTML 属性

在读模式下，inherHTML属性返回与调用原色的所有子节点对应的HTML标记，在写模式下，inherHTML会根据指定的值，创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

2、outerHTML属性

在读模式下，outerHTML属性返回与调用原色的所有子节点对应的HTML标签，在写模式下，inherHTML会根据指定的值，创建新的DOM树，然后用这个DOM树完全替换调用元素。

3、insertAdjacentHTML()方法

该方法接收两个参数：插入位置和要插入的HTML文本，第一个参数必须是以下值之一：

beforebegin	在当前元素之前插入一个紧邻的同辈元素；
afterbegin	在当前元素之下插入一个新的子元素或在第一个元素之前再插入一个新的子元素；
beforeend	在当前元素之下插入一个新的子元素或在最后一个元素之前再插入一个新的子元素；
afterend	在当前元素之后插入一个紧邻的同辈元素；