JavaScript高级程序设计——第十一章（DOM扩展）

一.选择符API

Selectors API是W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。Selectors API的核心的两个方法：querySelector()和querySelectorAll()，可以通过Document和ELement类型的实例调用它们。

• querySelector()

  //取得body元素
  var body = document.querySelector('body')
  
  //取得类为‘button’的第一个图像元素
  var img = document.body.querySelector('img.button')
  

  通过Docuemnt类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素，而通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。

• querySelectorAll()
  querySelectorAll()方法接受的参数与querySelector()方法一样，都是一个css选择符，但返回的是所有匹配的元素而不仅仅是一个元素。该方法返回的是一个NodeList实例。

二.HTML5

HTML5添加的**getElementByClassName()**可以通过documen对象及所有HTML元素元素调用该方法。

//取得ID为‘myDiv’的元素中带有类名‘divClass’的所有元素
	var selected = document.getElementById('myDiv').getElementByClassName('divClass')

需要注意的是，这个方法返回的对象是NodeList，与getElementByTagName类似。

classList属性：我们在操作类名时，需要通过className属性添加，删除，替换类名。但是这样操作需要遍历类名进行操作，代码量比较大，HTML5添加了一个classList属性，可以直接操作修改多个class类名。

• add：将给定的字符串值添加到列表中。如果已经存在，就不添加。
• contains：表示列表中是否存在给定的值，如果存在则返回true，不存在则返回false。
• remove：从列表中删除给定的字符串。
• toggle：如果列表中已经存在给定的值，则删除它；如果不存在则添加它。

<div class = 'bd user disabled'>...</div>

var div = document.querySelector('div')
div.classList.remove('user')  //删除类名为user的类
div.classList.add('current')  //添加类名为current的类

自定义数据属性：HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。
添加了自定义属性后，可以通过dataset属性来访问自定义属性的值。

<div id = 'myDiv' data-appID = '123' data-name = 'hjh'>666</div>

var div = document.getElementById('myDiv')
var appId = div.dataset.appId
var name = div.dataset.name

插入标记：

• innerHtml属性：在读模式下，innerHtml会返回与调用元素的所有子节点对应的HTML标记。在写模式下，innerHtml会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
  使用innerHtml属性也有一些限制：比如，在大多数浏览器中，通过innerHtml添加<script>元素并不会执行其中的脚本。IE8及更早的版本是唯一能在这种情况执行脚本的浏览器。（需要满足一些条件，详情见书哦）。

• outerHtml属性：在读模式下，outerHtml返回调用它的元素及所有子元素及所有子节点的HTML标签。在写模式下，outerHtml会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。（调用outerHtml的元素也会被替换）

  内存与性能问题：使用述替换子节点的方法可能会导致浏览器的内存占用问题。假设某个元素有一个事件处理程序，在使用上述某个属性将元素从文档树种除后，元素与事件处理程序之间的绑定关系在内存中并没有一并删除。这种情况如果频繁出现，页面占用的内存数量就会明显增加。所以，最好先手动删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
  比如：我们可以先创建多个节点再一次innerHtml，比一次次innerHtml效率高的多，因为在设置innerHtml和outHtml时，会创建一个HTML解析器。创建和销毁HTML解析器会带来性能的损失。

  //尽量避免这种操作
  for(var i = 0,i<100;i++){
  	ul.innerHtml += '<li>' + 666 + '</li>'
  }
  
  //这样操作能避免性能的损失
  var itemsHtml = ''
  for(var i = 0,i<100;i++){
  	itemsHtml += '<li>' + 666 + '</li>'
  }
  ul.innerHtml = itemsHtml
  

三.专有扩展

1. contains()方法
   在实际开发中，经常需要知道某个节点是不是另一个节点的后代。这个方法接受一个参数，即要监测的后代节点，如果被检测的节点时后代节点，该方法返回true。否则返回false。

   alert(document.documentElement.contains(document.body))  //true
   

2. 插入文本

• innerText：通过innerText属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。

  <div id = 'content'>
  	<p>hello world</p>
  	<ul>
  		<li>item1</li>
  		<li>item2</li>
  		<li>item3</li>
  	<ul>
  </div>
  
  var div = document.getElementById('content')
  alert(div.innText)  //hello world item1 item2 item3
  
  div.innerText = 'hello world'
  //则div变成
  <div id = 'content'>hello world</div>
  

  所以我们如果想通过innerText属性过滤掉HTML标签。方法就是：div.innerText = div.innerText。