js DOM 扩展
浏览数：24 /
时间：2015年06月09日
1. 选择符API
querySelector()
返回匹配的第一个元素，接收一个 CSS 选择符。没有找到返回 null.
querySelectorAll()
返回所有匹配的一个 NodeList, 这是一个快照不会动态改变。接收一个 CSS 选择符。
mathesSelecttor()
如果调用元素与该选择符匹配，返回true, 否则返回 false. 接收一个 CSS 选择符。
2. 与类相关的扩充
getElementsByClassName()
接收一个字符串
classList
所有元素都有的属性，它是 DOMTokenList 的实例，有 length 属性和以下方法：
add(value) : 将给定的字符串添加到列表中，如果已经存在，就不添加了
contains(value) : 表示列表中是否存在给定的值
remove(value) : 从列表中删除给定的字符串
toggle(value) : 如果存在删除它；如果不存在添加它。
3. 焦点管理
document.activeElement 这个属性始终会引用 DOM
中当前获取焦点的元素。
元素获取焦点的方式有页面加载、用户输入（通常是通过按 Tab
键）和在代码中调用 focus() 方法。
document.hasFocus();
检测文档是否获取了焦点。
4. 自定义数据类型
<div id=‘myDiv‘ data-appId=‘12345‘
data-myName=‘Nicholad‘></div>
var addpId = div.dataset.appId;
// 获取自定义数据
div.dataset.appId = 2345;
// 设置自定义数据
5. 插入标记
element.innerHTML
// 在写模式下，innerHTML
的值（字符串）替换元素原来的所有子节点， 在读模式下，读取所有子节点
element.outerHTML
//
在读模式下，返回调用它的元素及所有子节点的 HTML 标签，在写模式下，会根据指定的 HTML
字符串创建新的DOM子树，替换调用的元素。
6. 元素大小
6.1 偏移量
6.2 客户区大小
6.3 确定元素大小
element.getBoundingClientRect();
返回一个矩形对象。这个对象包含4个属性：left, top, right, botom。这些属性都给出了元素在页面中相对于视口的位置。
6.4 遍历
var div = document.getElementById(‘#div1‘);
var filter = function(node){
retrun node.tagName.toLowerCase() ==
‘li‘ ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
var iterater = document.createNodeIterator(div,
NodeFilter.SHOW_ELEMENT, filter, false);
// 第三个参数表示过滤节点，不过滤传入 null
var node = iterator.nextNode();
var node = iterator.nextNode();
while(node != null){
alert(node.tagName);
node =
iterator.nextNode();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
