DOM扩展

Posted 2020-08-07

DOM扩展：
1.selectors api：根据css选择符选择与某个模式匹配的dom元素。
selectors api是由w3c发起的一个标准，致力于让浏览器原生支持css查询。把这个功能变成原生的api之后，解析和树的操作就可以在浏览器内部通过编译后的代码来执行，极大的改善了性能。
Selector Api Level1的两个主要方法分别是querySelector以及querySelectorAll
querySelector方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到，返回null
eg.
let body = document.querySelector("body")
let mydiv = document.querySelector("#myDiv")
let selected = document.querySelector(".selected")

querySelectorAll方法返回一个NodeList实例，包含所有匹配的元素。但这个NodeList实例不是动态的。
另外据说这个api的查询速度比较快。

机制：
这两个api在使用的时候与jquery有一个不一样的地方需要注意：
在dom元素的子元素中进行查找的时侯。
eg：
let a = document.querySelector("body")
let b = a.querySelectorAll("div .aa")
这时解析的时候会先查找document中所有div下面的class等于aa的元素，再检查这个元素是不是body的子元素。而使用jquery的时候是直接在a的子元素中查找div下的.aa。因此有时查找就会产生一些偏差。

元素遍历：
对于元素间的空格，IE9及之前的版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样就导致了在使用childNodes等属性时的浏览器行为不一致，需要判断nodeType属性1为元素节点。为了弥补这一问题。Element Traveral规范新定义了一组属性。
childElementCount:返回子元素的个数。不包含文本节点和注释的个数
firstElementChild：指向第一个子元素
lastElementChild：指向最后一个子元素
previousElementSibling：指向前一个同辈元素
nextElementSibling：指向后一个同辈元素

html5：
h5新增api：
getElementsByClassName因为这个方法返回的是一个nodeList。所以它和其它返回nodeList的方法一样具有性能问题。

classList属性： 这个属性是新集合DOMTokenList的实例
classList方法：
add（value）：将给定的字符串值添加到列表中，如果值已经存在，就不添加了
contains（value）：表示列表中是否存在给定的值。如果存在，返回true，否则false
remove（value）：从列表中删除给定的字符串
toggle（value）：如果列表中存在给定的值，则删除它，如果列表中不存在给定的值，则添加它。

HtmlDocument的变化：
1.readyState属性：
document的readyState属性有两个方法，loading和complete。用于判断文档的加载情况。
if(document.readyState === "complete"） balabalabala

2.head属性：
var head = document.head || document.getElementsByTagName("head")[0]
兼容写法

3.字符集属性：
document.charset

4.自定义数据属性：
h5规定可以添加自定义属性，以data-开头。添加了自定义属性之后，可以通过dataset属性访问这些自定义属性，dataset是一个DOMStringMap实例，在这个映射表中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data前缀。

5.插入标记：
innerHtml：
在读模式下，innerHtml属性返回该节点下的所有的子节点对应的html标记，在写模式下，innerHtml会根据指定的值创建新的DOM树，然后用这个新的DOM树完全替换掉调用元素原先的所有子节点。
不同浏览器返回的文本格式会有所不同。并不是所有元素都支持innerHtml属性，比如head，html，style，table，tr等。
outerHtml：
在读模式下，outerHtml返回调用它的元素以及所有的子节点。
在写模式下，outerHtml会根据指定的html字符串创建新的DOM子树。然后用这个子树完全替换掉调用的元素。
insertAdjacentHTML()方法：
这个方法接受两个参数，要插入的位置以及要插入的html文本。
第一个参数必须是下列值之一：
beforebegin 在当前元素之前插入一个紧邻的同辈元素。
afterbegin 在当前元素之下插入一个新的子元素或在第一个子元素之前插入新的子元素。
beforeend 在当前元素之下插入一个新的子元素或在最后一个子元素之后插入新的子元素。
afterend 在当前元素之后插入一个紧邻的同辈元素。
第二个参数是一个html字符串。

tips：
使用这两种方法删除带有事件处理程序的dom元素时，元素与事件之间的绑定关系并没有在内存中被删除，因此，需要事先手动删除事件处理程序和javascript对象属性。
在设置这两个属性时，会创建一个解析器，因此在插入大量html标记时，innerHtml属性性能较高。但是要注意不要频繁使用innerHtml。当需要循环赋值的时候，应该事先存储在一个string中，然后再一次性的将结果赋值给innerHtml。