DOM 扩展

60 阅读 0 评论 40 点赞

我是靠谱客的博主喜悦雨，最近开发中收集的这篇文章主要介绍DOM 扩展，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

对DOM 的两个主要的扩展是Selectors API（选择符API）和HTML5。以下内容注意兼容性。

一、选择符API

1、querySelector()方法接收一个参数，即CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。
2、querySelectorAll()方法接收一个参数，即CSS 选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个是带有所有属性和方法的NodeList实例。
3、matchesSelector()方法接收一个参数，即CSS 选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。

二、元素遍历

对于元素间的空格，IE9 及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。因为浏览器处理DOM 元素间空白符的方式不一样，才出现Element Traversal扩展。Element Traversal API 为DOM元素添加了以下5 个属性。
1、childElementCount：返回子元素（不包括文本节点和注释）的个数。
2、firstElementChild：指向第一个子元素；firstChild 的元素版。
3、lastElementChild：指向最后一个子元素；lastChild 的元素版。
4、previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
5、nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。
支持的浏览器为DOM 元素添加了这些属性，利用这些元素不必担心空白文本节点,可以更方便地查找DOM 元素了。

三、HTML5（DOM 节点相关的内容）

与类相关的扩充
1、getElementsByClassName()方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。可以通过document对象及所有HTML 元素调用该方法。调用这个方法时，只有位于调用元素子树中的元素才会返回。例：

//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");

2、classList 属性
HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加classList 属性。这个classList 属性是新集合类型DOMTokenList 的实例，DOMTokenList 有一个表示自己包含多少元素的length 属性。这个新类型还定义如下方法。
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
例子如下：

<div class="bd user disabled">...</div>
div.classList.remove("disabled");//删除"disabled"类
div.classList.add("current");//添加"current"类
div.classList.toggle("user");//切换"user"类
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
    //执行操作
)
for (var i=0, len=div.classList.length; i < len; i++){ //迭代类名
    doSomething(div.classList[i]);
}

有了classList 属性，除非你需要全部删除所有类名，或者完全重写元素的class 属性，否则也就用不到className 属性了。

焦点管理
HTML5 也添加了辅助管理DOM 焦点的功能。document.activeElement ，这个属性始终会引用DOM 中当前获得了焦点的元素。元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab 键）和在代码中调用focus()方法。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。通过检测文档是否获得了焦点，可以知道用户是不是正在与页面交互。
查询文档获知哪个元素获得了焦点，以及确定文档是否获得了焦点，这两个功能最重要的用途是提高Web 应用的无障碍性。无障碍Web 应用的一个主要标志就是恰当的焦点管理。

HTMLDocument的变化
Document 的readyState 属性有两个可能的值：loading，正在加载文档；complete，已经加载完文档。
使用document.readyState 的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。

if (document.readyState == "complete"){
//执行操作
}

自定义数据属性
HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性。

var div = document.getElementById("myDiv");
var myName = div.dataset.myname; //取得自定义属性的值
div.dataset.myname = "Michael";//设置值
//有没有"myname"值呢？
if (div.dataset.myname){
    console.log("Hello, " + div.dataset.myname);
}

插入标记
1、innerHTML 属性
在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。在写模式下，innerHTML 会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
2、outerHTML 属性
在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下，outerHTML会根据指定的HTML 字符串创建新的DOM 子树，然后用这个DOM子树完全替换调用元素。
3、insertAdjacentHTML()方法
insertAdjacentHTML()方法收两个参数：插入位置和要插入的HTML 文本。第一个参数必须是下列值之一：
"beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
"afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
"beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
"afterend"，在当前元素之后插入一个紧邻的同辈元素。
第二个参数是一个HTML 字符串（与innerHTML 和outerHTML的值相同）。

element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");//作为前一个同辈元素插入

注意，在使用innerHTML、outerHTML 属性和insertAdjacentHTML()方法时，最好先手工删除要被替换的元素的所有事件处理
程序和JavaScript 对象属性。

scrollIntoView()方法
scrollIntoView()可以在所有HTML 元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

四、专有扩展

1、contains()方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，该方法返回true；否则，返回false。
2、通过innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。
3、在读取文本值时，outerText 与innerText 的结果完全一样。在写模式下， outerText 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。outerText这个属性会导致调用它的元素不存在，因此并不常用。尽可能不要使用这个属性。