javascript高级程序设计笔记-第十一章（DOM扩展）
一、选择符API
- querySelector()方法接，收一个css选择符参数，返回与该模式匹配的第一个元素
- querySelectorAll()方法，接收一个css选择符参数，返回与该模式匹配的所有元素
- matchesSelector()方法，接收一个css选择符参数，如果调用元素与该选择符匹配，则返回true
- IE9+是msMatchesSelector()
- Firefox是mozMatchesSelector()
- Safari和Chrome是webkitMatchesSelector()
编写matchesSelector()封装函数
function matchesSelector(element, selector) {
if (element.matchesSelector) {
return element.matchesSelector(selector);
} else if (element.msMatchesSelector) {
return element.msMatchesSelector(selector); //IE9+
} else if (element.mozMatchesSelector) {
return element.mozMatchesSelector(selector); //Firefox
} else if (element.webkitMatchesSelector) {
return element.webkitMatchesSelector(selector); //safari、chrome
} else {
throw new Error("Not supported.");
}
}
if (matchesSelector(document.body, "body")) {
alert("yes");
} else {
alert("no");
}
二、元素遍历
- childElementCount：返回子元素（不包括文本节点和注释）的个数
- firstElementChild：指向第一个子元素；firstChild的元素版
- lastElementChild：指向最后一个子元素；lastChild的元素版
- previousElementSibling：指向前一个同胞元素；previousSibling的元素版
- nextElementSibling：指向后一个同胞元素；nextSibling的元素版
三、HTML5
getElementsByTagName()方法，返回带有指定类的所有元素的NodeList
通过className属性添加、删除和替换类名
<div class="bd user disabled">...</div>
// 比如要删除"user"类
//取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);
//找到要删除的类名
var pos = -1,
i,
len;
for (i = 0, len = classNames.length; i < len; i++) {
if (classNames[i] === "user") {
pos = i;
break;
}
}
//删除类名
classNames.splice(i, 1);
//把剩下的类名拼成字符串
div.className = classNames.join("");
classList属性：(Firefix和chrome)
- add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了
- contains(value)：表示列表中是否存在给定的值。如果存在则返回true，否则返回false
- remove(value)：从列表中删除给定的字符串
- toggle(value)：如果列表中已经存在给定的值，则删除；如果列表中没有，则添加它。
上例代码只需用一行代码即可
div.classList.remove("user")
焦点管理：
- document.activeElement属性，始终会引用DOM中当前获得了焦点的元素
- document.hasFocus()方法，确定文档是否获得了焦点
元素获得焦点的方式：页面加载、用户输入、代码中调用focus()方法
var button = document.getElementById('myButton');
button.focus();
alert(document.activeElement === button); //true
alert(document.hasFocus()); //true
HTMLDocument的变化：
readyState属性
document.readyState == "complete" //文档加载完成
document.readyState == "loading" //文档正在加载
兼容模式
document.compatMode == "CSS1Compat" //标准模式
document.compatMode == "BackCompat" //混杂模式
head属性
document.head; //只有chrome和safari
document.getElementsByTagName('head')[0];
插入标记：
innerHTML属性，在读模式下，返回与调用元素的所有子节点对应的HTML标记；在写模式下，根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点
outerHTML属性，在读模式下，返回调用它的元素及所有子节点的HTML标记；在写模式下，根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素
insertAdjacentHTML()方法，接收2个参数：插入的位置和要插入的文本
第一个参数必须是下列值：
- beforebegin，在当前元素之前插入一个紧邻的同胞元素
- afterend，在当前元素之后插入一个紧邻的同胞元素
- beforeend，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入一个新的子元素
- afterbegin，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入一个新的子元素
scrollIntoView()方法：
- 如果参数为true或不传入参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐
- 如果传入的参数为false，调用元素会尽可能全部出现在视口中，顶部不一定平齐
四、专有扩展
1、文档模式
强制浏览器以某种模式渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
- Edge：始终以最新的文档模式来渲染页面。忽略文档类型声明
- 9：强制以IE9标准模式渲染页面。忽略文档类型声明
- 8：强制以IE8标准模式渲染页面。忽略文档类型声明
- 7：强制以IE7标准模式渲染页面。忽略文档类型声明
- 5：强制以IE5标准模式渲染页面。忽略文档类型声明
- EmulateIE9：如果有文档类型声明，则以IE9标准模式渲染页面，否则将文档模式设置为IE5
- EmulateIE8：如果有文档类型声明，则以IE8标准模式渲染页面，否则将文档模式设置为IE5
- EmulateIE7：如果有文档类型声明，则以IE7标准模式渲染页面，否则将文档模式设置为IE5
2、children属性
只返回元素节点，除此之外与childNodes一样
3、contains()方法
查询某个节点是不是另一个节点的后代
alert(document.documentElement.contains(document.body)); //true
