DOM扩展
选择符API
quertSelector()方法
querySeletorAll()方法
上面两个方法都接受一个CSS选择符,这是一个静态的查询。
matchesSelector()方法
接受一个参数(CSS选择符),如果调用元素与该选择符匹配,则返回true
目前没有浏览器支持该方法,但是有一些浏览器通过不规范的名字实现了它的功能
- chrome:webkitMatchesSelector
- Firefox (Gecko) :mozMatchesSelector (3.6(1.9.2) )
- Internet Explorer :msMatchesSelector (9.0 )
- Opera:
- 11.5 :oMatchesSelector
- 15.0 :webkitMatchesSelector
- Safari (WebKit) :webkitMatchesSelector (5.0 )
元素遍历
对于元素间的空格,==IE9及之前版本==不会返回文本节点,而其他所有浏览器都会返回文本节点。
.childElementCount
->等于node.children.length
没啥大用 (IE不兼容)firstElementChild
(IE不兼容)lastElementChild
(IE不兼容)nextElementSibling
(IE不兼容)prevElementSibling
(IE不兼容)
HTML5
(这里只讨论与DOM节点相关的内容)
getElementsByClassName()方法
接受类名,返回一个NodeList
classList属性
出现之前:在操作类名时,需要通过className属性添加、删除和替换类名。
<div class="bd user disable">******</div>
//现在有一个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);
//把剩下的类名拼成字符串并重新设置
diw.className = classNames.join(" ");
这真的很麻烦,而且过程无法简化。
HTML5:为所有元素添加了classList属性。
- add()方法:将给定的字符串值添加到列表中,如果值已经存在,就不添加了
- contains()方法:表示列表中是否存在给定的之,如果存在则返回true
- remove()方法:从列表中删除给定的字符串
- toggle()方法:如果列表中已经存在给定的值,删除它;如果没有,添加它
//这样一行代码我就能实现上面的功能
div.classList.remove("user");
焦点管理
HTML5也添加了辅助管理的DOM焦点功能。
document.axtiveElement
属性:这个属性始终会引用DOM中当前获得了焦点的元素。
元素获得焦点:页面加载,用户输入(通常是tab键)和在代码中调用了focus()方法
document.hasElement()
方法:用于确定文档是否获得了焦点。
HTMLDocument的变化
readyState
属性:这个属性有两个可能的值。
- loading :正在加载文档
- complete:已经加载完文档
compatMode
属性:检测页面的兼容模式
- CSS1Compat:标准模式
- BackCompat:混杂模式
head
属性:引用文档的<head>
元素
自定义数据属性
HTML5规定可以为元素添加非标准的属性,但要添加前缀data-
,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以任意添加,随便命名。
添加了自定义属性之后,可以通过元素的dataset
属性来访问自定义属性的值。dateset属性的值是DOMStringMap的一个实例。
<div id="myDiv" data-appId="12345" data-myName="Nicholas"></div>
var div = document.getElementById("myDiv");
var appId = div.dataset.appId;
var myName = div.dataset.myName;
div.dataset.appId = 23456;
div.dataset.myName = "Michael";
上面就是使用方法。