JAVASCRIPT高级程序设计_9_DOM_扩展

• 选择符API

1. querySelector和querySelectorAll
2. 接收CSS选择符，然后返回元素

            var body=document.querySelector('body');
            console.log(body.nodeName);

　　3. matchesSelector()判断调用元素与该选择符是否匹配

• HTML5的相关特性

1. getElementsByClassName()方法用处比较多。返回对象为nodeList，即可以通过item或者 [ ]来访问
2. classList的属性可以来修改元素的className。例如

            //classList 修改类名
            var div=document.getElementById("div");
            div.classList.remove("A");
            console.log(div.className);//B C

• 焦点管理

1. document.activeElement可以判断焦点所在位置

            //焦点管理
            var button=document.getElementById('myButton');
            button.focus();//将焦点置于button元素
            alert(document.activeElement==button);//true

• readyState属性

1. 具有complete和loading两个属性状态，分别为文档是否已经加在完毕或正在加载
2. document.readyState==”complete”

• innerHTML属性。返回的是：与调用元素的所有子节点对应的HMTL标记。
• scrollIntoView() 方法的功能是，通过事件触发之后，会跳转到当前页面的某一个部分。例如

            //scrollIntoView方法
            button.onclick=function(){
                document.getElementById('jumpHere').scrollIntoView(true);

　　　　通过点击button触发跳转，跳转到当前页面具有jumpHere这个ID的地方。

• children 属性

1. 和childeNodes区别不大，只返回元素节点。

• contains方法

1. 检查一个节点是否是调用节点的后代节点。
2. 返回值为true和false

• innerText和outterText没有被纳入HTML5标准

1. 返回值为字符串，与innerHTML不太一样，不带有HTML标签的。

• 滚动方法

1. scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。

2. 如果当前元素在视口中可见，这个方法什么也不做。如果将可选的alignCenter 参数设置为true，则表示尽量将元素显示在视口中部（垂直方向）。Safari 和Chrome 实现了这个方法。

3.  scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，也可以是负值。Safari 和Chrome 实现了这个方法

4. scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。Safari 和Chrome 实现了这个方法。