DOM，事件

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

innerText是输出/更改纯文本；
innerHTML不仅可以输出/更改纯文本还可以输出/更改DOM节点树；
textContent基本用法与innerText一样，区别在于它能够输出隐藏文本。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>  
    <div id="test">
        <p style="display: none">你看不见我</p>
        <p>你看得见我<p>
    </div>
</body>
</html>

通过输出结果也可以看出来，使用 innerHTML="test"赋值时，将破坏原来的DOM节点树，而innerText="test"则不会。

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

elem.children仅仅输出输出包含子节点的类数组；
elem.childNodes输出包含在这个父节点中的任何元素（内容，空格，换行，子节点等等）的类数组；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<div id = "parent">
123 
<a id = "test" href = "/">测试</a>
<p>测试二</p>
</div>
</body>
</html>

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

document.getElementById()通过ID查找，因为ID只能用一次，故能够实现精确查找到该DOM节点。返回值为单个元素。
document.getElementsByClassName()通过class查找，与ID不同的是，class能够匹配多个DOM节点，故返回的是一个类数组（和数组很像，但是缺少数组的一些方法）。
document.getElementsByTagName()同class一样，tag作为标签能够匹配多个节点，故返回的也是类数组。

以上三者内部参数都是已字符串名传入（Element是单数，返回单个元素；Elements是复数，返回数组。嗯，可以这样记忆，更防止写错）

新方法：

document.querySelector()
document.querySelectorAll()

这俩均能查找任何标签，class,id，写法与CSS选择器一样；区别在于前者返回单个元素，当遇到重名时，返回第一个元素。而后者返回包含所有元素的数组；

下面是例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>  
    <div id="test">
        <p class="red blue">你看不见我</p>
        <p class="red">你看得见我<p>
    </div>
</body>
</html>

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

使用document.createElement()创建;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>  
    <div id="test">
        <p>你看不见我</p>
        <p>你看得见我</p>
    </div>
</body>
</html>

此时若想要给新创立的p标签，添加内容，则可以：

或者使用element.setAttribute(name, value):

看到这题时，正好看到了每日一题中的该场景：究竟通过element.和element.setAttribute()设置属性有何差异？
看一下这个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>  
<a id = "test" href = "/">测试</a>
<script>
    var o = document.getElementById("test");
    o.id = "test1";                  
    console.log(o.getAttribute("id"));
    console.log(o.href);
    console.log(o.getAttribute("href"));
    o.sex = "male";
    console.log(o.getAttribute("sex"));
    o.setAttribute("sex","female");
    console.log(o.sex);
    console.log(o.getAttribute("sex"))

</script>
</body>
</html>

第一个console.log我们很容易理解，通过element.id把第一个id改为test1，然后console.log(o.getAttribute("id"))同显示为test1;
第二个和第三个console.log显示了两种方法对属性的value的处理方式的差异，element.href将href的值转换为真实的地址；而element.getAttribute("href")仅仅只是把值转换为字符串形式；
最后所有的console.log都在阐明一件事情：对于自定义属性，两者是不互通的，无法通过改变一方而去影响另外一方。

5、元素的添加、删除？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
</body>
</html>

如果想把js添加至list的末端，那么我们可以用parent.appendChild()这种方法：

但是如果想要把JS添加至java和python中间的话，就得使用parent.insertBefore()这种方式,它传递两个参数，前者为想要添加的DOM节点，后者代表想要insertBefore的DOM节点：

值得注意的是，此时list中已经包含了JS的DOM节点，如果我想要继续添加JS节点的话，就会在删除原位置的基础上再进行更改：

删除很简单，直接用parent.remove()即可：

但有的时候我们不知道或者很难确立父节点怎么办呢？这时可以用.parentElement由子节点向上查找父节点：

在执行删除操作后，一定要切记，DOM树的结构已经发生了改变，parent.children[i]所对应的值也发生了变化，所以某些利用循环遍历删除的方法需要特别注意；

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

以click事件为例：

DOM0的写法

ele.onclick = function(){
     //to do
}

DOM2的写法

ele.addEventListener("click",function(){
    // to do
})

两者差异在于DOM2可以拥有无数个click事件的方法，当click触发时，同时所有的方法都能使用；而给DOM0添加新的事件方法时，显然老方法将被新方法所覆盖。

7、`attachEvent`与`addEventListener`的区别？

attachEvent是老IE浏览器上绑定事件的方法
addEventListener是现代大多数逐渐主流浏览器（Chrome,firefox,safari）绑定事件的方法

区别在于：

1.参数差异：addEventListener(type,event,bollean)传递三个参数参数，而attachEvent('on'+type,envent)只传递两个参数;addEventListener(type,event,bollean)前两个参数的意思与attachEvent('on'+type,envent)的意思一样，只不过attachEvent('on'+type,envent)事件名称前需要多加一个on；addEventListener(type,event,bollean)第三个参数传递的是布尔数，所代表的是冒泡型（false）还是捕获型（true），默认值为true；而attachEvent('on'+type,envent)只有一种方法，即冒泡型。

2.处理顺序差异：若为同一事件添加多个处理函数时，addEventListener()是按照书写顺序由上往下依次执行，而attachEvent()没有规定顺序，全部随机排列；

3.作用域差异:addEventListener()的作用域是元素本身，this是指的触发元素，而attachEvent()事件处理程序会在全局变量内运行，this是window。

我们在使用事件监听时，为了自身便利，往往要封装一个统一性的函数（看看Jquery的写法），以消除浏览器的兼容性问题：

function addEveent(node,type,handler) {
    if( !node )  return false;                               //若没有参数传递，关掉；
    if(node.addEventListener){                                //一般浏览器用这种方式来增添事件处理
        node.addEventListener(type,handler,false);
        return true;
    }
    if(node.attachEvent){                                     //给老IE专门设定的事件处理办法
        node["e" + type + handler] = handler;                 //为node对象绑定属性，记录传入的处理函数（里面的名字可以乱取，这样取仅仅是为了辨识度）
        node[type + handler] = function () {                 //为node对象绑定属性，记录一个函数，该函数为原处理函数在全局作用域下的事件
            node["e" + type + handler](window.event);
        };
        node.attachEvent("on" + type, node[type + handler]);
        return true;
    }
}

function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

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

历史原因：IE和网景对事件传播方式采有两种截然不同的方法：IE采取了事件冒泡型，而网景则采用了事件捕获型；随着历史的发展，DOM2事件传播机制诞生了：它包含了事件捕获型和事件冒泡型，开发者可以根据需要手动的选择采用何种类型传播事件。现代浏览器都能使用DOM2事件传播机制。

事件冒泡型：事件由触发元素所在的具体节点开始，逐级向上传播，直至html根节点；
事件捕获型：事件由html根节点开始，层级下查，直至找到触发元素所在的具体节点；
DOM2：先由html根节点通过事件捕获至具体触发元素所在的节点，再由该节点通过事件冒泡至html根节点；由addEventListener()的第三个参数true/false（捕获/冒泡 default=false），来选择具体由何种方式触发。

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

阻止事件冒泡：

大多数浏览器：event.stopPropagation();
IE老版本浏览器：event.cancleBuble = true; //该属性默认为false

阻止默认事件：

大多数浏览器：event.preventDefault();
IE老版本浏览器：event.returnvalue = false; //该属性默认为true

DOM，事件

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

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