DOM扩展

Posted 2020-08-17

1.选择符API

querySelector()方法  　　　　//类似于JQuery的$()方法

querySelectorAll()方法　　

matchesSelector()方法：接收一个CSS的选择符，如果调用元素与选择符匹配，返回true，否则，返回false。

2.对于元素间的空格，浏览器会返回文本节点。导致了在使用childNodes和firstNodes等属性时的行为不一致。

所以DOM元素添加了一下5个属性

childELementCount：返回子元素

firstElementChild：指向第一个元素

lastELementChild：指向最后一个元素

previousELementSibling：指向前一个同辈元素

nextELementSibling：指向后一个同辈元素　

3.classList属性(列表是由类名构成的)

add：将给定字符串添加到列表中，如果值已经存在了，就不添加了

contain：表示列表中是否存在给定的值，如果存在则返回true，否则返回false

remove：从列表中删除给定的字符串

toggle：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它　

4.焦点管理

document.activeELement属性

document.hasFocus()方法  

5.插入标记

innerhtml:返回与调用元素的所以子节点（包括元素、注释、和文本节点）对应额HTML标记

outHTML:返回调用它得元素及其所以得子节点的HTML标签。（与innerHTML的区别是会包括元素本身）

insertAdjacentHTML():接收两个从参数，插入位置和要插入的HTML文本

　　“beforebegin”，在当前元素之前插入一个紧邻的同辈元素

　　“afterbegin”，在当前元素之下插入一个新的子元素或者在第一个子元素之前插入新的子元素

　　“beforeend”，在当前元素之下插入一个新的子元素或者在最后一个子元素之后插入新的子元素

　　“afterend”，在当前元素之后插入一个紧邻的同辈元素

6.children属性

解决浏览器在处理文本节点中的空白字符的差异

children属性时HTMLCollection的实例，只包含元素中同样还是元素的子节点

7.插入文本

innerText：可以操作元素中包含的所以文本内容，包括子文档中的文本

outerText: 不建议使用

8.滚动

scrollIntoView():可以在所以的HTML元素上调用，通过滚动浏览器窗口或者某个容器元素，调用元素就可以出现在视口中。

9.其他

标准模式：document.compatMode的值为“CSS1Compat”

混合模式：document.compatMode的值为“BackCompat”

给元素自定义添加非标准属性：data-前缀

contains(): 检查某个节点是不是另一个节点的后代