DOM、事件

一、dom对象的innerText和innerHTML有什么区别？

• innerText设置或获取位于对象起始和结束标签内的文本 。如果有HTML标签，它会过滤掉HTML标签，并且在多层次的时候会按照元素由浅到深的顺序拼接其内容。
• innerHTML属性返回该元素包含的 HTML 代码（包括元素、注释和文本节点）。该属性可读写，常用来设置某个节点的内容。
  如果将innerHTML属性设为空，等于删除所有它包含的所有节点。

  

   abc
    def
  

 // 输出 ： "abc def"

//输出 ："  
 abc def 
 "
//输出： 空节点

二、elem.children和elem.childNodes的区别？

• elem.children属性返回一个HTMLCollection对象（包含了元素的通用集合，还提供了用来从该集合中选择元素的方法和属性。），包括当前元素节点的所有子元素。它是一个类似数组的动态对象（实时反映网页元素的变化）。这个属性与Node.childNodes属性的区别是，它只包括HTML元素类型的子节点，不包括其他类型的子节点。
  
  

  例子

三、查询元素有几种常见的方法？

1.document.querySelector、document.querySelectorAll

• ocument.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。
• document.querySelectorAll方法返回一个NodeList对象，包含所有匹配给定选择器的节点。
  document.querySelectorAll('DIV:not(.ignore)');选中div元素，那些class含ignore的除外
  但是，它们不支持CSS伪元素的选择器和伪类的选择器（比如:link和:visited）。
  并且这两种方法在HTML文档上和HTML元素上都能调用。

2.document.getElementsByTagName()

• document.getElementsByTagName方法返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象，可以实时反映HTML文档的变化。该方法在HTML文档上和HTML元素上都能调用。

ar paras = document.getElementsByTagName('p');
paras instanceof HTMLCollection // true

3.document.getElementsByClassName()

• document.getElementsByClassName方法返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。由于class是保留字，所以JavaScript一律使用className表示CSS的class。如果参数是一个空格分隔的字符串，元素的class必须符合所有字符串之中所有的class才会返回。

var elements = document.getElementsByClassName('foo bar');
上面代码返回同时具有foo和bar两个class的元素，foo和bar的顺序不重要。

4.document.getElementsByName()

• document.getElementsByName方法用于选择拥有name属性的HTML元素（比如
  、、、、和