DOM扩展

获取元素

1
2
3
document.querySelector()
document.querySelectorAll()
document.getElementByClassName('className1 className2')

元素遍历

1
2
3
4
5
childElementCount
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling

classList

1
2
3
4
5
div.classList.add(value)                       // 已存在则不添加
div.classList.contains(value)                  // return boolean
div.classList.remove(value)                
div.classList.toggle(value)                    // 有则删除，无则添加
// 支持chrome firefox3.6+

获取焦点

1
2
3
document.activeElement                // 获取DOM中当前获取焦点的元素
Element.focus()                           
Element.hasFocus()

HTMLDocument 变化

1
2
3
document.readyState                  // return   loading || complete
document.compatMode               // return  CSS1Compat || BackCompatMode
document.head || document.getElementByTagName('head')[0]

自定义数据属性

1
2
3
<div data-for='text' data-src='http' id='mydiv' />
let mydiv = document.querySelector('#mydiv')
let dataset = mydiv.dataset                                           // -> {for: 'text',src: 'http'}