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
网友评论