1:通过css选择符获取dom元素,抛开了 getElementById()和 getElementsByTagName()

1.1: querySelector()

这个方法接收一个css选择器,可以得到一个dom元素,只返回一个

1.2:querySelectorAll()

这个方法也是接收一个css选择器,可以得到一个nodeList的数组,不过这个数组是nodelist的快照,获取的是当前的dom节点,并不会随着节点的变化而变化

这两个方法可以使用document和element两个对象来 调用

2:元素遍历

因为空格会被浏览器解析为文本节点,所以在使用 childNodes 和 firstChild属性时会导致差异,所以有以下属性可以使用

childElementCount: 返回子节点并不包含文本节点

firstElementChild:返回第一个子节点

lastElementChild:返回最后一个子节点

previousElementSibling: 返回上一个兄弟节点

nextElementSibling:返回下一个兄弟节点

3:焦点管理

document.activeElement // 获取当前获取的焦点的元素的引用

4:HTMLDocument扩展的属性

readyState: 获取当前浏览器加载文档的状态  它的值有两个loading 正在读取,complete 读取完成

document.compatMode: 判断当前浏览器是标准模式还是混杂模式

标准模式的值是CSS1Compat

混杂模式的值是BackCompat

5:innerHTML 

6:contains() 检测某个节点是否是调用者的子节点

7: getBoundingClientRect() 获取dom元素相对于视口(窗口)的距离 left top bottom right

8:焦点管理

HTML5增加了辅助管理DOM焦点的功能,

document.activeElement: 这个属性会一直指向当前获取焦点的元素.

再文档加载完成的时候,activeElement指向body,再加载期间,这个属性为null.

document.hasFocus() 这个方法可以判断当前文档是否获取了焦点.

9:自定义属性

可以再标签上添加data-*来进行自定义属性,取得这个值得方式是

var appid = div.dataset.myname

注意设置值得时候需要添加data前缀,而在取值时,不需要添加data前缀

10:滚动

将某个dom元素滚动到可见视图范围内

scrollIntoView():dom元素调用这个方法即可,如果传入true,调用元素的顶部会尽可能与窗口顶部平齐,如果传入false,调用元素会尽可能的全部出现在窗口中,如果有可能的话,调用元素的底部与窗口底部平齐