问答

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

• innerText:获取到当前节点的文本内容不代标签
• innerHTML:返回元素的html结构，带标签

2.elem.children和elem.childNodes的区别？

• elem.children:获取html的子节点,返回一个HTMLCollection集合
• elem.childNodes:获取所有子节点,返回一个NodeList集合,除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。

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

• getElementById 返回匹配指定ID属性的元素节点如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法;
• getElementsByClassName 返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。注意，返回的是数组
• getElementByTagName 方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。(如<a> <p>) 它返回的也是一个数组.
• querySelector返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。实时反映元素的变化。 (这个id,class都能查找匹配）
• querySelectorAll()方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

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

• 用document.createElement('元素名')来生成html元素节点

var newDiv=document.createElement("div");

• 用setAttribute()给元素设置属性，里面传入两个值，第一个值为元素的属性，第二个值为定义的值。

var node = document.getElementById("wrap");
    node.setAttribute("class","head");

5.元素的添加、删除？

• (1) 在元素末尾添加元素:appendChild();

<ul id="list">
   <li>列表1</li>
   <li>列表2</li>
   <li>列表3</li>
</ul>
<script>
    var node=document.createElement("li");//创建一个元素节点
        text=document.createTextNode("列表4");//创建一个新文本
        node.appendChild(text);//将创建的新文本添加到元素节点的底部
        list=document.getElementById("list");//获取到列表
        list.appendChild(node);//将新节点添加为列表的最后一个子节点
</script>

• (2)在某个元素之前插入元素：insertBefore(新节点, 参照子节点)
  将新节点插入当前结点的某个子节点前面

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Welcome");
newDiv.insertBefore(newContent, newDiv.firstChild);

• 在父元素上调用用来删除子元素:removeChild();删除当前结点的某个子节点

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

• DOM0
  DOM0事件就是通过onclick写在HTML标签里的事件

<a href="#" onclick="console.log('clicked');">点我</a>

这种写法的缺点是不利于日后维护，代码只能使用一次，没有复用性。

• DOM2
  DOM2事件有两种方法一个是addEventListener()和removeEventListener() 它们都返回三个参数分别是事件类型、事件处理方法和布尔值默认为false，false是冒泡阶段处理，如果是ture就是在调用阶段处理。

<input id='btn' type="button" name="name" value="点我啊" />
<script>
    var btn = document.querySelector("#btn")
    btn.addEventListener("click",function(){
        console.log("北京欢迎你")
    },false)
</script>

7.attachEvent与addEventListener的区别？

• 适用的浏览器不同：
  addEventListener适用于现代浏览器
  attachEvent是低版本IE浏览器的私有方法
• 参数和触发阶段不同:
  addEventListener有三个参数，最后一个参数可以定义处理程序在捕获/冒泡阶段触发
  attachEvent只有两个传递参数，只能在冒泡阶段触发
• 第一个参数的形式不同：
  addEventListener的第一个参数是click
  而attachEvent的第一个参数是onclick
• this不同:
  addEventListener中的this是触发事件的元素
  attachEvent的this指代的是window
• 在同一个事件上绑定多个事件处理程序时的执行顺序不同 addEventListener会按添加顺序并按照第三个参数执行
  而 attachEvent 的执行是无序的

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

• IE事件冒泡是事件由第一个被触发的元素接收，然后逐级向上传播.
• DOM2事件传播，事件由最外层元素接收，然后逐层向内传播，这个过程为捕获阶段，当达到目标元素时，处于目标阶段，然后事件由目标元素向最外层开始传递，这个过程称之为冒泡阶段.

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

• e.stopPropagation();阻止事件冒泡,ie中则用cancelBubble()
• e.preventDefault();阻止默认事件,ie中需要把returnValue设为 false