DOM(二)

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()