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

• innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。

• innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
  

  innerHTML、innerText的区别

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

• elem.childNodes属性为标准属性，是只读的类数组对象(NodeList对象)，表示该节点下的所有子节点,该属性返回的还包括Text节点(换行、空格)和Comment(注释)节点。

• elem.children属性为非标准属性，返回一个类似数组的动态对象（实时反映变化），包括当前元素节点的所有子元素。

  
  
  elem.children、elem.childNodes的区别

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

• 通过ID选取元素：getElementById方法返回匹配指定ID属性的元素节点。

var id = document.getElementById('id');

• 通过CSS类选取元素: getElementsByClassName方法返回的是一个类数组对象，是NodeList对象，包含所有匹配的后代节点。

var class1 = document.getElementsByClassName('class')[0];
var class2 = document.getElementsByClassName('class')[1];
var class3 = document.getElementsByClassName('classA classB');

• 通过标签名选取元素：getElementsByTagName()方法用来选取指定标签名的HTML元素,返回的也是一个类数组NodeList对象。

var tag = document.getElementsByClassName('p');[0]

• 通过名字name选取元素：getElementsByName()方法根据name属性的值选取HTML元素，返回的是类数组NodeList对象。

var name = document.getElementsByName('name');[0]

• 通过CSS选择器选取元素：
  1 querySelector()方法：接受一个CSS选择符，返回第一个元素，如果没有找到匹配元素返回null。
  2 querySelectorAll()方法：接受方法月querySelector()一样，返回的是一个NodeList类数组。

var el1 = document.querySelector(".class");//选中class类的第一个元素
var el2 = document.querySelectorAll('#id > span');//选中id元素的子元素中所有的span元素
var el3 = document.querySelectorAll("div.id1, div.id2");//选中id为id1或id2的元素

• 如何创建一个元素？如何给元素设置属性？
• 生成HTML元素节点：createElement方法用来生成HTML元素节点。

var newDiv = document.createElement("div");//生成一个div元素

• 生成文本节点：createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。

var newContent = document.createTextNode("content");//生成content文本

• 生成内存DOM片段：createDocumentFragment方法生成一个存在于内存的DOM片段的DocumentFragment对象。DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染。

var docFragment = document.createDocumentFragment();

• 克隆元素：cloneNode()方法用于克隆元素，方法有一个布尔值参数，传入true的时候会深复制，也就是会复制元素及其子元素（IE还会复制其事件），false的时候只复制元素本身,默认为false。

node.cloneNode(deep);

cloneNode()

• 将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中.

document.importNode(node, deep);

document.importNode(node,deep)

• createElement()：创建HTML元素
• getAttribute()：用于获取元素的attribute值

• setAttribute()：用于设置元素的attribute值

  
  
  创建元素并设置属性

• 元素的添加、删除？

• appendChild()在元素末尾添加元素

  
  
  appendChild()

• insertBefore()在某个元素前面插入元素 ,插入的位置可以用parent.childNodes[n]精确选择

  
  
  insertBefore()
  
  
  parent.childNodes[n]

• removeChild()删除元素

  
  
  removeChild()

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

• DOM0级方法指定的时间处理程序被认为是元素的方法。事件的处理程序是在元素的作用域中运行。其中this引用的是当前元素。使用btn.onclick = null就可以删除事件处理程序。

var oBtn = document.getElementById('btn');
oBtn.onclick = function(event){
        console.log(this);
        console.log(this.id);
        console.log(event);
    };

结果

• DOM2级事件定义了两个方法，用于处理指定和删除时间处理的程序操作: addEventListener()和removeEventListener()。DOM包含的这两种方法有三个参数：处理的事件名称、处理事件函数、布尔值。第三个参数默认为false，当为true时表示在捕获阶段调用事件处理程序；为false时表示在冒泡阶段调用事件处理程序。

    oBtn.addEventListener('click', function(event){
        console.log(this);
        console.log(this.id);
        console.log(event);
    });
    oBtn.addEventListener('click', function(){
        console.log("第二个");
    });

结果

• 上面的代码给按钮添加了事件处理程序，该事件因为没用设置第三个参数默认为false所以是在冒泡阶段调用。与DOM0级方法一样，这里的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2及方法添加事件处理程序可以添加多个事件处理程序，依次执行。通过addEventListener()添加的事件只能使用removeEventListener()移除。
• 如果在removeEventListener()中的第二个参数使用自执行函数，是没有效果的，因为第二个参数虽然使用的是addEventListener()第二个参数看上去一样，但完全不是同一个东西。所以当要使用移除时要把第二个参数的函数赋值为变量指针上再传入。

btn.removeEventListener('click', function(){}, false)//无效
var handler = function(){};
btn.removeEventListener('click', handler, false)//有效

• attachEvent与addEventListener的区别？
• attachEvent：
  1 属于DOM0级事件处理程序，只适用于IE9以前的浏览器版本
  2 attachEvent()方法有两个参数, 第一个参数为事件，第二个参数为处理程序
  3 事件参数前需要加on,写成attachEvent('on' + type, handler)
  4 attachEvent()方法只有冒泡处理事件
  5 attachEvent()方法的删除需要给事件相应的属性值设置为null
  6 attachEvent()方法作用域为全局属性this指向是window，返回this.id为undefined,handler.apply(node)可以用这段代码改变作用域处理
  7 attachEvent()方法添加多个事件时会出现混乱。
• addEventListener:
  1 属于DOM2级事件处理程序，适用于新版本浏览器
  2 addEventListener()方法有三个参数，第一个参数为事件，第二个参数为处理程序，第三个参数为布尔值默认为false，为false时表示在冒泡阶段调用，true表示在捕获阶段调用。
  3 事件参数写为addEventListener(type, handler, boolean)
  4 addEventListener()方法可以通过设置第三个参数值操作事件处理程序在捕获、冒泡阶段调用。
  5 addEventListener()方法添加的事件处理程序只能使用removeEventListener()来移除
  6 addEventListener()方法的作用域是调用的处理程序使用的事件目标，this值指向的当前事件
  7 addEventListener()方法添加的事件处理程序可以为多个，它们会按照顺序触发。
• 解释IE事件冒泡和DOM2事件传播机制？
• DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
• IE时间只有冒泡传播机制：从接收的子元素，由内到外进行事件传播，直到根节点。如.btn>div>body>html
• DOM2事件传播机制：包含所有DOM时间流阶段，事件捕获阶段→处于目标阶段→事件冒泡阶段，如当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

    document.getElementById('btn').addEventListener('click', function(event){
        console.log('冒泡btn');
    });
    document.body.addEventListener('click', function(event){
        console.log('冒泡body');
    });

冒泡结果

    document.getElementById('btn').addEventListener('click', function(event){
        console.log('捕获btn');
    });
    document.body.addEventListener('click', function(event){
        console.log('捕获body');
    }, true);

捕获结果

• 如何阻止事件冒泡？ 如何阻止默认事件？
• 针对非IE浏览器，在监听事件中添加stopPropagation()用于阻止事件冒泡;preventDefault()用于阻止默认事件
• 针对IE浏览器，在监听事件中令属性cancelBubble=true即可阻止事件冒泡，令属性returnValue=false可阻止默认行为

function getEvent(e) {
    return e || window.event;
}
function getTarget(e) {
    return e.target || e.scrElement;
}
function preventDefault(e) {
    if (e.preventDefault)
        e.preventDefault();
    else
        e.returnValue = false;
}
function stopPropagation(e) {
    if (e.stopPropagation)
        e.stopPropagation();
    else
        e.cancelBubble = true;
}

    document.getElementById('btn').addEventListener('click', function(event){
        event.stopPropagation();
        console.log('阻止事件冒泡btn');
    });
    document.body.addEventListener('click', function(event){
        console.log('body');
    });

阻止时间冒泡的输出结果结果

    document.getElementById('btn').addEventListener('click', function(event){
        event.preventDefault();
        console.log('btn');
    });//取消默认事件

实现模态框
代码5

本博客版权归 本人和饥人谷所有，转载需说明来源