JS基础知多少（七）DOM、事件

一、dom对象的innerText和innerHTML有什么区别？
innerHTML设置或获取位于对象起始和结束标签内的HTML；
innerText设置或获取位于对象其实和结束标签内的文本 。
示例如下：
<pre>
<div id="header">
< p > 我要做一名有思想的前端工程师
<span>加油</span>
< /p >
</div>
<script>
console.log(document.getElementsByTagName('p')[0].innerHTML);
console.log(document.getElementsByTagName('p')[0].innerText);
</script>
</pre>

输出结果如下：

二、elem.children和elem.childNodes的区别？
elem.children属性：非标准的，它返回指定元素的子元素集合。经测试，它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。
elem.childrenNode属性：标准的，它返回指定元素的子元素的集合，还包括HTML节点，所有属性，文本。可以通过nodeType来判断是那种类型的节点。
示例：
html代码：
<pre>
<div id="header">
< p >我要做一名有思想的前端工程师
<span>加油</span>
< /p >
</div>
</pre>

js代码：
<pre>
console.log(document.getElementsByTagName('p')[0].children);
console.log(document.getElementsByTagName('p')[0].childNodes);
</pre>

输出结果：

三、查询元素有几种常见的方法？
1.getElementById()
getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。
<pre>var elem=document.getElementById("header");</pre>

2.getElementsByClassName()
getElementsByClassNaem方法返回一个类似数组的对象（HTMLCollection类型的对象），包括所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
<pre>var elements=document.getElementsByClassName(names);</pre>

3.getElementsByTagName()
getElementsByTagName方法返回的所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
<pre>var paras=documents.getElementsByTagName("p");</pre>

4.getElementsByName()
getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

注意：在IE浏览器使用这个方法，会将没有name属性，但有同名id属性的元素也返回，所以name属性和id属性最好设为不一样的值。

5.querySelector()
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有，则返回null。

注意:querySelector方法无法选中CSS伪元素。

6.querySelectorAll()
querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态对象，所以元素节点的变化无法实时反映在返回结果中.

7.elementFromPoint()
elementFromPoint方法返回位于页面指定位置的元素。

四、如何创建一个元素？如何给元素设置属性？
1.创建元素
a.createElement()
createElement方法用于生成HTML元素节点
<pre>var newDiv=document.createElement("div");</pre>

createElement方法的参数元素为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果传入大写的标签名，会被转为小写。如果参数带有尖括号或者null,会报错
b.createTextNode()方法用来生成文本节点，参数为所要生成的文本节点的内容。
<pre>var newDiv=document.createElement("div");
var newContent=document.createTextNode("Hello");</pre>

2.设置元素属性，使用setAttribute()
示例如下：
<pre>
<div id="header">
< p >我要做一名有思想的前端工程师
<span>加油</span>
< /p >
</div>
<script>
var divs=document.getElementsByTagName('div');
divs[0].setAttribute("name","我的梦想");
</script>
</pre>

代码执行完成后，会给div添加name属性。

五、元素的添加、删除
1.元素的添加
a.appendChild()在元素末尾添加元素
<pre>
<div>
</div>
<script>
var div=document.body.children[0];
var span=document.createElement('span');
span.innerHTML="A new span";
div.appendChild(span,div.firstChild);
</script>
</pre>

执行结果为div中添加了元素：

b.insertBefore()在某个元素之前插入元素
示例代码：
<pre>
<div>
</div>
<script>
var div=document.body.children[0];
var span=document.createElement('span');
span.innerHTML="A new span";
div.insertBefore(span,div.firstChild);
</script>
</pre>

2.元素删除
删除元素，使用removeChild()方法

六、DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
区别：
a.DOM0事件使用方法：通过javascript指定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。优点：简单且具有跨浏览器的优势。
<pre>
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id);//this指定当前元素btn
}
</pre>

删除DOM0事件处理程序，只要将对应事件属性置为null即可。
缺点：一个事件处理程序只能对应一个处理函数。
b.DOM2级事件处理程序可以绑定多个事件，一般按顺序执行。

七、attachEvent与addEventListener的区别？
区别：
1.参数个数不同，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
示例：
使用addEventListerner:
<pre>
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');

   var handler=function() {
        alert(this.id);
    }
   btnClick.addEventListener('click', handler, false);

</script>
</pre>

使用attachEvent:
<pre>
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.attachEvent('onclick', handler);
</script>
</pre>

2.第一个参数的意义不同，addEventListener第一个参数是事件类型，而attachEvent第一个参数指明的是事件处理函数名称(onclick,onload)

3.事件处理程序的作用域不同，addEventListerner的作用域是元素本身，而attachEvemt事件处理程序会在全局变量内运行，this是window.

4.为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律

八、解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡即事件开始时由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上（一直到文档）；
DOM2事件传播机制：DOM2级事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的是事件捕获，它为截获事件提供了机会。然后是实际的目标收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。假设在页面上点击了一个div元素，这个事件会按照下面的顺序图进行传播。

九、如何阻止事件冒泡？ 如何阻止默认事件？
阻止事件冒泡：w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble=true;
stopPropagation()也是事件对象（Event）的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。
阻止默认事件：w3c的方法是e.preventDadault,IE则是使用e.returnValue=false;

参考文章：
1.浏览器的DOM事件
2.[JS学习笔记]Javascript事件阶段：捕获、目标、冒泡](http://www.cnblogs.com/hyaaon/p/4630128.html)
3.事件
4.JavaScript停止冒泡和阻止浏览器默认行为

版权归本人所有，若有转载，请注明来源