DOM 扩展

尽管DOM作为API已经非常完善了,但为了实现更多的功能,仍然会有一些标准或专有的扩展。下面一起来看看有哪些DOM扩展…

选择符 API

1
2
document/node.querySelector('css选择符');//返回第一个
document/node.querySelectorAll('css选择符');//返回全部

元素遍历

1
2
3
4
5
6
childElementCount:返回子元素
firstElementChild:返回第一个
lastElementChild:返回最后一个
firstElementChild:返回第一个
previousElementSibling:前一个兄弟
nextElementSibling:后一个兄弟

HTML5

与类相关的扩展

1
2
3
4
5
6
7
document/node.getElementsByClassName();
//classList 是 HTML5 新提供的操作类名的方式
el.classList.add(value);//新增类名,如果以及存在,则不添加
el.classList.contains(value);//检查类名是否存在
el.class.remove(value);//删除类名
el.class.toggle(value);//如果存在,删除;如果不存在,则添加。

焦点管理

1
2
document.activeElement;//当前文档获取焦点的元素
document.hasFocus();//检测当前文档是否获取了焦点,可以知道用户是否在与页面进行交互

HTMLDocument

1
2
3
4
5
6
7
8
9
10
//readyStatus 属性
document.readyStatus == 'complete';//已经加载完文档
document.readyStatus == 'loading';//正在加载文档
//兼容模式
document.compatMode == 'CSS1Compat';//标准模式
document.compatMode == 'BackCompat';//兼容模式
//head 属性
document.head;//引用文档的 head 元素

字符集属性

1
document.charset;

自定义数据属性

1
2
3
HTML5 规定可以为元素添加非标准的属性,但要加前缀 `date-`
var appId = div.dateset.appId;//取得自定义属性值
div.dateset.myName = 'max';//设置值

插入标记

1
2
3
4
5
innerHTML 属性
outerHTML 属性
insertAdjacentHTML()

专有扩展

文档模式

1
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

contains()方法

1
2
//检测某个节点是否是另一个节点的后代
el1.contains(el2);//节点 el2 是否是节点 el1 的后代。