这个部分主要总结一下对DOM的两个主要的扩展SelectorAPI和HTML5
选择符API
querySelector()方法
该方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,则返回null
querySelectorAll()方法
querySelectorAll()方法接收的参数querySelector()方法一样,都是一个CSS选择符,但返回的是所有匹配的元素的类似NodeList的集合,但是其底层实现类似于一组元素的快照,而非不断对完档进行搜索的动态查询,因此可以避免引起大多数性能问题. 如果没有找到匹配的元素,NodeList就是空的.
matchesSelector()方法
接收CSS选择符作为参数,如果调用元素与该选择符匹配,则返回true,反之,返回false
元素遍历
由于使用childNodes和firstChild等属性时,会考虑到文本节点,导致和预想结果不一致,为了弥补这一差异,Element Traversal规范新定义了一组属性
childElementCount:
返回子元素(不包括文本节点和注释)的个数
firstElementChild:
firstChild的元素版
lastElementChild:
lastChild的元素版
previousElementSibling:
previousSibling的元素版
nextElementSibling:
nextSibling的元素版
HTML5
getElementsByClassName()
其实HTML5添加的getElementsByClassName()实现的功能用querySelectorAll()也能实现,不过其返回的对象时NodeList对象,而不是快照,因此存在着性能问题,若不没有实时性的需要,那么建议使用querySelectorAll()来代替getElementsByClassName()
classList属性
HTML5新增一种操作类名的方式,为所有元素添加classList属性,是新集合类型DOMTokenList的实例,与其他DOM集合类似,也有length属性,另外还有以下方法
- add(value) : 将给定的字符串值添加到列表中
- contains(value) : 表示列表中是否存在给定的值,存在则返回true,反之返回false
- remove(value) :从列表中删除给定的字符串
- toggle(value) : 如果列表中已经存在给定的值,则删除,反之则添加
注意:classList属性虽然好用,但是兼容性不是很好,所以使用前根据需要是否要准备跨浏览器方案
焦点管理
document.activeElement
这个属性始终会引用DOM中当前获得了焦点的元素,默认情况下,文档刚刚加载完成后,document.activeElement中爆粗你的事document.body元素的引用
document.hasFocus()
这个方法可用于确定文档是否获得了焦点,知道用户是不是正在与页面交互
HTMLDocument的变化
document.readyState
有两个可能值:
①loading ,正在加载文档;
②complete ,已经加载完文档
document.head
引用文档的<head>元素
字符集属性
主要指document.charset,获取当前文档中实际使用的字符集,以及defalutCharset表示当前文档默认的字符集应该是什么
自定义数据属性
HTML5规定可以为元素添加非标准的属性,但要添加前缀data-,目的是为元素提供与渲染无关的信息或者提供语义信息.
添加了自定义属性之后,可以通过元素的dataset属性来访问自定义属性的值,每个data-name形式的属性都会有一个对应的属性,只不过属性名没有data-前缀
插入标记
innerHTML属性
在读模式下,innerHTML返回与调用元素的所有子节点对应的HTML标记
在写模式下,innerHTML会根据制定的值创建新的DOM树,然后用这个DOM树完全替换元素原先的所有子节点
outerHTML属性
在读模式下,outerHTML返回调用它的元素及其所有子节点的HTML标签
在写模式下,会根据特定的HTML字符串创建新的DOM字数,然后替换调用元素
insertAdjacentHTML()方法
接收两个参数:①插入位置②要插入的HTML文本
第一个参数从下面选取
- "beforebegin" 当前元素之前插入
- "afterbegin" 插入到当前元素作为第一个子元素
- "beforeend" 插入到当前元素作为最后一个子元素
- "afterend" 当前元素之后插入
scrpllIntoView()方法
scrollIntoView()可以在所有HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中,如果传入true作为参数或不传入参数,则窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐,若传入false为参数,则调用元素会尽可能全部出现在视口中,顶部不一定平齐
children属性
由于IE9之前版本与其他浏览器在处理文本节点中的空白符有差异,所以添加children属性,只包含元素中同样还是元素的子节点,除此之外与childNodes没有区别.
contains()方法
可以通过contains知道某个节点是不是另一个节点的后代,调用contains()方法的应该是祖先节点,接收要检测的后代节点作为参数,如果被检测的节点是后代节点,则该方法返回true,否则返回false
插入文本
innerText属性
通过innerText属性可以操作元素中包含的所有文本,通过innerText读取值时,它会按照由浅入深的顺序,将子文档树种的所有文本拼接起来,在通过innerText写入值时,结果会删除元素的所有子节点,,插入包含相应文本值的文本节点
outerText属性
在作用范围上扩大到了包含调用他的节点之外,与innerText无区别
以上是参考高程3的总结内容.
