DOM扩展
选择符API
在
DOM(一)中说到的方法属性nodeList是动态的,性能存在很大的隐患
querySelector()接收一个css选择符，返回匹配的第一个元素,没有找到返回NULL。document.querySelector("body"),document.querySelector("#id")
querySelectorAll()接收css选择符,返回nodeList选择符.
matchesSelector()接收css选择符,匹配到返回true，用上面的方法操作的
nodeList类似于一组元素的快照,避免了动态nodeList的性能问题。
元素遍历
在
DOM(一)中的元素遍历方法(firstChild，ChildNodes)对空格处理在IE9之前处理方式不一样,新增了兼容性更强的遍历属性。
childElementCount返回子元素的个数
firstElementChild返回第一个子元素firstChild元素版
lastElementChild返回最后一个子元素lastChild元素版
previousElementSibling指向前一个同辈元素,previousSibling的元素版
nextElementSibling指向后一个同辈元素,nextSibling元素版上面的元素属性不必担心空白文本节点
与类相关的扩充
getElementByClassName("user current")返回所有带有该class的nodeList
操作类
classList属性 ,通过
className属性add()添加,remove()删除,replace()替换类名,contains()是否保函指定类名,toggle切换类名 用法:div.classList.remove("user")删除user类div.classList.toggle("user")切换user类名
插入标记
innerHTML属性,返回调用元素的所有子节点,(包括元素，注释和文本节点)对应的HTML标记,不同浏览器返回值有差距.注意innerHtml并不会执行其中的脚本.
outerHTML属性 和上面的区别就是这个会包含你调用的元素:div.outerHtml会返回连同div在内的dom树而innerHTML就不会
滚动 scrollIntoView()
控制页面滚动
scrollIntoView()接收一个boolean值作为参数.如传入true或不传入任何参数,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐,传入false，调用元素会尽可能全部出现在视口中
document.forms[0].scrollIntoView()
