任务22

任务22完毕，请老师审阅！

问答

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

document.innerText

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

外层div的innerText返回内容是 "123456"

document.innerHTML

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

外层div的innerHTML返回内容是 "
123456
"

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

children 子元素列表(HTMLCollection)
返回指定元素的子元素集合。只返回HTML节点，不返回文本节点。

childNodes 子元素列表（NodeList）

返回指定元素的子元素集合，包括HTML节点，所有属性，文本。

NodeList 对象代表一个有顺序的节点列表，HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性

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

document.getElementById()          //匹配指定id的元素节点
document.getElementsByClassName()  //匹配指定class的元素集合构成一个类数组对象
document.getElementsByTagName()    //匹配指定标签名的元素集合构成一个类数组对象
document.getElementsByName()       //匹配指定name的元素集合构成一个类数组对象
document.querySelector()           //匹配第一个满足CSS选择器要求的元素节点
document.querySelectorAll()        //匹配所有满足CSS选择器要求的元素节点，返回的是NodeList类型的对象

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

document.createElement()  
参数：元素标签名，即元素节点的tagName属性
如果传入大写会转成小写
如果参数带有尖括号（即<和>）或者为null，会报错

例：var newDiv = document.createElement("img");

设置属性
方法1：newDiv.style.width = '100px';
方法2：newDiv.setAttribute('style', 'width:100px');

5. 元素的添加、删除？

添加元素
document.appendChild()
在元素末尾添加元素

例：
var newUl = document.createElement('ul');
var newli = document.createElement('li');
newUl.appendChild(newli);
console.log(newUl);


    



document.insertBefore()
在某个元素之前插入元素

例：
var newA = document.createElement('a');
var newImg = document.createElement('img');
newA.insertBefore(newImg,newA.firstChild);
console.log(newA);


    


document.replaceChild()
替换某个元素

例：
var newButton = document.createElement('button');   
newA.replaceChild(newButton,newA.firstChild);
console.log(newA);


    


删除元素
parentNode.removeChild(ChildNode)

例：
newA.removeChild(newButton); 
console.log(newA);

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

DOM0 事件一次只能监听一个事件，绑定多个事件则会被后面的事件覆盖,且不支持事件捕获

例：
div.onclick = function(){};

DOM2 事件可以绑定多个事件,支持事件捕获

例：
div.addEventListener('click',function(){},false);
div.attachEvent('onclick',function(){});

7. attachEvent与addEventListener的区别？

1. 兼容性：
attachEvent
兼容：IE7、IE8；
不兼容firefox、chrome、IE9、IE10、IE11、safari、opera

addEventListener
兼容：firefox、chrome、IE、safari、opera；
不兼容IE7、IE8

2. 参数
attachEvent 有两个参数，第一个为事件处理函数名字（如：onclick, onload），
第二个参数为事件发生后执行的函数

addEventListener 有三个参数，第一个为事件类型（如：click, load），
第二个参数为事件发生后执行的函数，第三个参数为布尔值，false表示在事件冒泡阶段处理
true表示在事件捕获阶段处理

3.事件处理的作用域不同
attachEvent的作用域为全局，this指window

addEventListener的作用域为元素本身，this指触发元素

4.添加多个事件的处理顺序不同
attachEvent处理多事件时无规律（事件少时按添加顺序的反顺序，多时则无规律）

addEventListener处理多事件按添加顺序

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

IE事件冒泡
事件由最具体的元素接收后逐级向上传播到较为不具体的元素

DOM2事件
分为三个阶段
先事件捕获阶段，为截取事件提供机会，再到目标阶段，最后事件冒泡阶段

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

阻止事件冒泡
非IE浏览器：e.stopPropagation()
IE浏览器：  设置e.cancelBubble为true

阻止默认事件
非IE浏览器  设置e.cancelable为true，再用preventDefalult()
IE浏览器：设置e.returnValue为false

例：
//阻止事件冒泡
var stopPropagation = function() {
    if(e.stopPropagation){
        e.stopPropagation();
    }
    else{
        e.cancelBubble = true;
    }
}

//阻止默认事件
var preventDefault = function(){
    if(e.preventDefalut) {
        e.preventDefault();
    }
    else{
        e.returnValue = false;
    }
}

代码

全部代码
全部效果预览