Dom、事件

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

• innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

• innerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM

  

elem.children和elem.childNodes的区别？

• elem.children只会返回以HTML标签形成的节点。

• elem.childNodes会返回包括文本，注释在内的所有节点。使用时容易出现问题，因此多用elem.children。

  

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

• getElementById()方法
  返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法
  var elem = document.getElementById("test");

• getElementsByClassName()方法
  返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
  var elements = document.getElementsByClassName(names);

• getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
  document.getElementsByClassName('red test');

• getElementsByTagName()方法
  返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
  var paras = document.getElementsByTagName("p");
  上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。

• getElementsByName()方法
  用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
  

  var forms = document.getElementsByName("x"); forms[0].tagName // "FORM"

• 注意，在IE浏览器使用这个方法，会将没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。

• querySelector()方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

  var el1 = document.querySelector(".myclass"); var el2 = document.querySelector('#myParent > [ng-click]');

• querySelectorAll()方法
  返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

• elementFromPoint()方法返回位于页面指定位置的元素。

如何创建一个元素？如何给元素设置属性？

• createElement()方法用来生成HTML元素节点。
• createTextNode()方法用来生成文本节点，参数为所要生成的文本节点的内容。

设置属性

• getAttribute()用于获取元素的attribute值
• createAttribute()方法生成一个新的属性对象节点，并返回它。
• setAttribute()方法用于设置元素属性
• romoveAttribute()用于删除元素属性

元素的添加、删除？

• appendChild()在元素末尾添加元素
• insertBefore()在某个元素之前插入元素
• replaceChild()接受两个参数：要插入的元素和要替换的元素
• removeChild()删除元素

DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

• DOM0把一个方法赋值给一个元素的事件处理程序属性,只能添加单个函数，兼容性好。例如：
  

• DOM2级
  DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

• addEventListener

• removeEventListener

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

• 事件类型

• 事件处理方法

• 布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

通过addEventListener添加的事件处理程序只能通removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写
var btnClick = document.getElementById('btnClick');

    var handler=function() {
        alert(this.id);
    }

    btnClick.addEventListener('click', handler, false);
    btnClick.removeEventListener('click', handler, false);

• DOM2级事件可以指定是否在捕获阶段进行程序处理
• 可以为事件添加多个处理程序

attachEvent与addEventListener的区别？

• IE浏览器适用于attachEvent，而addEventListener适用于主流浏览器
• 参数的个数不同
• 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
• 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id
• 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)

解释IE事件冒泡和DOM2事件传播机制？

• IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素

  

  IE的事件冒泡

• DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

  
  
  

  DOM2级事件

如何阻止事件冒泡？ 如何阻止默认事件？

• 阻止事件冒泡
• DOM2级事件
  event.stopPropagation()
• IE
  event.cancelBubble = true
• 阻止默认事件
• DOM2级事件
  event.preventDefault()
• IE
  event.returnValue = false