DOM拓展

这是我参与更文挑战的第1天,活动详情请查看:更文挑战

选择符

选择符api

利用css匹配规则作的原生js api接口, 提升匹配效率

querySelector()

1. 参数

一个css选择符

2. 返回

返回第一个匹配CSS选择符的DOM元素

3. 注意
   1. document下使用则在文档元素范围内查找匹配
   2. element下使用则在该element元素后代元素的范围内查找匹配

querySelectorAll()

几乎与querySelector()相同 返回一个NodeList对象, 包含全部匹配CSS选择符的DOM节点, 若无也是返回NodeList对象,不过其为空

注意

querySelector与querySelectorAll返回的是静态的NodeList

matchesSelector()

1. 参数

css选择符

2. 做用

调用该方法的元素若是与css选择符匹配则返回true, 不然返回false

元素遍历

childElementCount：

返回子元素（不包括文本节点和注释）的个数

firstElementChild：

指向第一个子元素； firstChild的元素版

lastElementChild：

指向最后一个子元素； lastChild的元素版

previousElementSibling：

指向前一个同辈元素； previousSibling的元素版

nextElementSibling：

指向后一个同辈元素； nextSibling的元素版。

注意以上都是返回元素节点

html5

getElementByClassName()

1. 参数

一个包含一个或多个类名的字符串

2. 返回

指定的类的全部元素的NodeList

3. 注意
   1. 传入多个类名时, 类名的前后顺序不重要, 返回全部类名符合的元素
   2. 使用这个方法时, 只会匹配调用这个方法的元素的后代元素
   3. 性能问题, 因为NodeList是动态的, 每次使用都会从新查询一次以保证NodeList是最新的

outerHTML属性

返回调用元素和调用元素的全部子节点的引用

insertAdjacentHTML()

1. 参数

   1. 第一个参数必须是下列值之一

      1. "beforebegin" 在当前元素以前插入一个紧邻的同辈元素
      2. "afterbegin" 在当前元素之下插入一个新的子元素或在第一个子元素以前再插入新的子元素；
      3. "beforeend" 在当前元素之下插入一个新的子元素或在最后一个子元素以后再插入新的子元素
      4. "afterend" 在当前元素以后插入一个紧邻的同辈元素。

   2. 第二个参数是一个HTML字符串, 若是浏览器没法解析该字符串，就会抛出错误

内存与性能问题

在删除带有事件处理程序或引用了其余JavaScript对象子树时， 就有可能致使内存占用问题。

假设某个元素有一个事件处理程序（或者引用了一个JavaScript对象做为属性）， 在使用前述某个属性将该元素从文档树中删除后， 元素与事件处理程序（或JavaScript对象）之间的绑定关系在内存中并无一并删除。 若是这种状况频繁出现，页面占用的内存数量就会明显增长。

所以，在使用innerHTML、outerHTML属性和insertAdjacentHTML()方法时， 最好先手工删除要被替换的元素的全部事件处理程序和JavaScript对象属性 (第13章将进一步讨论事件处理程序)

不过，使用这几个属性——特别是使用innerHTML，仍然仍是能够为咱们提供不少便利的。通常来讲，在插入大量新HTML标记时，使用innerHTML属性与经过屡次DOM操做先建立节点再指定它们之间的关系相比，效率要高得多。这是由于在设置innerHTML或outerHTML时，就会建立一个HTML解析器。这个解析器是在浏览器级别的代码（一般是C++编写的）基础上运行的，所以比执行JavaScript快得多。不可避免地，建立和销毁HTML解析器也会带来性能损失，因此最好可以将设置innerHTML或outerHTML的次数控制在合理的范围内

虽然inner HTML或outerHTML很方便, 但建立和销毁时会带来更高的性能损失, 应该避免频繁使用