ch11 DOM扩展
DOM扩展
1. 选择符API
1.1 querySelector()
querySelector()
方法接收一个 CSS 选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。
// 取得 body 元素
var body = document.querySelector('body');
// 取得 id 为 myDiv 的元素
var myDiv = document.querySelector('#myDiv');
// 取得类为 selected 的第一个元素
var selected = document.querySelector('.selected');
// 取得类为 button 的第一个图像元素
var img = document.body.querySelector('img.button');
1.2 querySelectorAll()
querySelectorAll()方法接收一个 CSS 选择符,返回的是一个带有所有属性和方法的
NodeList`的实例。
//取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");
要取得返回的NodeList中的每一个元素,可以使用item()
方法,也可以使用[]方括号
语法.
var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
strong = strongs[i]; //或者strongs.item(i)
strong.className = "important";
}
1.3 matchesSelector()
Selectors API Level 2 规范为Element 类型新增了一个方法matchesSelector()
。这个方法接收一个参数,即CSS 选择符,如果调用元素与该选择符匹配,返回true;否则,返回false。
在取得某个元素引用的情况下,使用这个方法能够方便地检测它是否会被querySelector()或querySelectorAll()方法返回。
截至2011 年年中,还没有浏览器支持matchesSelector()方法;不过,也有一些实验性的实现。IE 9+通过msMatchesSelector()支持该方法,Firefox 3.6+通过mozMatchesSelector()支持该方法,Safari 5+和Chrome 通过webkitMatchesSelector()支持该方法。因此,如果你想使用这个方法,最好是编写一个包装函数。
function matchesSelector(element, selector){
if (element.matchesSelector){
return element.matchesSelector(selector);
} else if (element.msMatchesSelector){
return element.msMatchesSelector(selector);
} else if (element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
} else if (element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
} else {
throw new Error("Not supported.");
}
}
if (matchesSelector(document.body, "body.page1")){
//执行操作
}
2. 元素遍历
Element Traversal API 为 DOM 元素添加了以下5个属性:
-
childElementCount
: -
firstElementChild
: -
lastElementChild
: -
previousElementSibling
: -
nextElementSibling
:
// DOM 扩展前,遍历某 element 的子元素
var child = element.firstChild;
while(child != element.lastChild) {
if (child.nodeType == 1){ //检查是不是元素
processChild(child);
}
child = child.nextSibling;
}
// 使用 DOM 扩展后的方法
var child = element.firstElementChild;
while(child != element.lastElementChild) {
processCHild(child);
child = child.**nextElementSibing;
}
3. HTML5
3.1 与类相关的扩充
getElementsByClassName() 方法
该方法接受一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。
// 取得所有类中包含‘username' 和 ’current' 的元素,类名的顺序无所谓
var allCurrentUsernames = document.getElementsByClassName('username current');
// 取得 id 为 myDiv 的元素中带有类名 selected 的元素
var selected = document.querySelector('#myDiv').getElementsByClassName('Selected');
classList 属性
classList
属性是新集合类型DOMTokenList
的实例,有length
属性,可以通过item()
和[]方括号
取得每个元素。
这个新类型定义了如下方法:
-
add(value)
:将给定的字符串值添加到列表中。如果值已经存在,就不添加了。 -
contains(value)
:表示列表中是否存在给定的值,如果存在则返回true,否则返回false。 -
remove(value)
:从列表中删除给定的字符串。 -
toggle(value)
:如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
// div 为一个 DOM 元素
// 移除 div 的 user 属性
div.classList.remove("user");
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("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]);
}
3.2 焦点管理
document.activeElement
document.activeElement
始终会引用DOM当前获得焦点的元素。
文档刚加载完时,该属性保存的是document.body
;加载过程中该属性为null
。
var btn = document.getElementById('myButton');
btn.focus();
alert(btn == document.activeElement); // true
document.hasFocus()
document.hasFocus()
用于确定文档是否获得了焦点
var btn = document.getElementById('myButton');
btn.focus();
alert(document.hasFocus()); // true
3.3 HTMLDocument的变化
readyState属性
Document的readyState
属性有两个值:
- loading,正在加载文档
- complete,已经加载完文档
if (document.readyState == "complete"){
//执行操作
}
compatMode属性
compatMode
属性显示采用哪种渲染模式。在标准模式下,document.compatMode
的值为CSS1Compat
;在混杂模式下,document.compatMode
的值为BackCompat
。
if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}
head 属性
新增document.head
属性引用文档的<head>
。
var head = document.head || document.getElementsByTagName("head")[0];
3.4 字符集属性
charset属性
charset
属性表示文档中实际使用的字符集,也可以指定新字符集。默认是’UTF-16’
alert(document.charset); //"UTF-16"
document.charset = "UTF-8";
defaultCharset属性
defaultCharset,表示根据默认浏览器及操作系统的设置,当前文档默认的字符集应该是什么。
if (document.charset != document.defaultCharset){
alert("Custom character set being used.");
}
3.5 自定义数据属性
可以以data-
为前缀添加任意属性。通过dataset
属性来访问,该属性是DOMStringMap
的实例。
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
<script>
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢?
if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}
</script>
3.6 插入标记
innerHTML
在读模式下,innerHTML
属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML 标记。
在写模式下,innerHTML
会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。
但是,在大多数浏览器中,通过innerHTML
插入<script>
元素并不会执行其中的脚本.
不支持innerHTML 的元素有:<col>
、<colgroup>
、<frameset>
、<head>
、<html>
、<style>
、<table>
、<tbody>
、<thead>
、<tfoot>
和<tr>
。此外,在IE8 及更早版本中,<title>
元素也没有innerHTML 属性。
outerHTML
在读模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签。
在写模式下,outerHTML会根据指定的HTML 字符串创建新的DOM 子树,然后用这个DOM子树完全替换调用元素。
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<script>
var div = document.querySelector('#contend');
var outerHtml = div.outerHTML; // 读模式,返回上面html代码
// 写模式,此时 div 标签会被 新创建的 p 标签完全替代
div.outerHTML = "<p>This is a paragraph.</p>";
</script>
insertAdjacentHTML()方法
该方法接受两个参数,插入位置和要插入的HTML文本。
第一个参数取值如下图:
//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");
内存和性能问题
在使用innerHTML、outerHTML 属性和insertAdjacentHTML()方法时,最好先手工删除要被替换的元素的所有事件处理程序和JavaScript 对象属性。
3.7 scrollIntoView()
方法
scrollIntoView()
可以在所有HTML 元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中。如果给这个方法传入true
作为参数,或者不传入任何参数,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入false
作为参数,调用元素会尽可能全部出现在视口中,(可能的话,调用元素的底部会与视口顶部平齐。)不过顶部不一定平齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
height: 300px;
}
#red {
background-color: darkorange;
}
.blue {
background-color: darkcyan;
}
</style>
</head>
<body>
<div id="red"></div>
<div class="blue"></div>
<div id="blue" class="blue">
<button id="btn1">scrollIntoView(true)</button>
<button id="btn2">scrollIntoView(false)</button>
</div>
</body>
<script>
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var red = document.querySelector('#red');
btn1.addEventListener('click', function() {
red.scrollIntoView()
})
btn2.addEventListener('click', function() {
red.scrollIntoView(false)
})
</script>
</html>
4.专有扩展
4.1 contains()
方法
调用contains()方法的应该是祖先节点,也就是搜索开始的节点,这个方法接收一个参数,即要检测的后代节点。如果被检测的节点是后代节点,该方法返回true;否则,返回false.
alert(document.documentElement.contains(document.body)); //true
使用DOM Level 3 compareDocumentPosition()
也能够确定节点间的关系。这个方法用于确定两个节点间的关系,返回一个表示该关系的位掩码( bitmask)。下表列出了这个位掩码的值。
4.2 插入文本
没有被HTML5纳入规范的两个属性-innerText
和outerText
。
4.3 滚动
HTML5 在将ScrollIntoView()纳入规范之后,仍然还有其他几个专有方法可以在不同的浏览器中使用。下面列出的几个方法都是对HTMLElement 类型的扩展,因此在所有元素中都可以调用。
//将页面主体滚动5 行
document.body.scrollByLines(5);
//在当前元素不可见的时候,让它进入浏览器的视口
document.images[0].scrollIntoViewIfNeeded();
//将页面主体往回滚动1 页
document.body.scrollByPages(-1);