JS面试题--DOM操作相关

（1）在DOM中操作中怎么创建、添加、删除、移除、替换、插入和查找节点

①通过以下代码创建节点

createDocumentFragment()//创建一个DOM片段
createElement();//创建一个具体的元素
createTextNode();//创建一个文本节点

②添加、移除、替换、插入节点

appendChild();
removeChild();
replaceChild();
insertBefore();

③通过以下方式查找节点

getElementById();
getElementsByTagName();
getElementsByName();

---

(2)在JS中如何使用DOM

DOM代表文档对象，并且负责文档中各种对象的相互交互，DOM是开发网页所必须的，其中包括段落、链接等对象。可以操作这些对象，如添加或删除等。DOM还需要向网页添加额外的功能。

---

(3)IE和DOM事件流的区别是什么？

• 执行顺序不一样
• 参数不一样
• 事件的名称是否加on不一样
• this指向问题不一样

---

（4）编写一个JS函数，如果输入指定类型的选择器（仅须支持id,class,tagName三种简单的CSS选择器，无序兼容组合选择器）就可以返回匹配的DOM节点，要考虑浏览器的兼容性。

			var query = typeof document.querySelectorAll ==="function"?
			//如果支持HTML5用HTML5的选择器的方法
			function(selector){
				return Array.prototype.slice.call(document.querySelectorAll(selector))
			}:
			function(selector){
				var reg=/^(#)?(\.)?(\w+)$/;
				var matches = reg.exec(selector);
				var result = [];
				if(matches[1]){
					result.push(document.getElementById(matches[3]));
				}else if(matches[2]){
					//类选择器
					var allDoms = document.getElementsByTagName("*");
					for(var i=0,len=allDoms.length;i<len;i++){
						//查看dom是否有该类
						!!~allDoms[i].className.search(new RegExp("\\b"+"abc"+"\\b")) && result.push(allDoms[i]);
					}
				}else{
					//元素选择器
					result = Array.prototype.slice.call(document.getElementsByTagName(matches[3].toLowerCase()))
				}
				return result;
			}

---

（5）什么是DOM?DOM分为哪几种？

DOM是文档对象模型，DOM是W3C的标准。DOM定义了访问HTML和XML文档的标准，即独立于平台和语言的接口。

W3C DOM标准分为以下三个标准

• 核心DOM --针对任何结构化文档的标准模型
• XML DOM--针对XML文档的标准模型
• HTML DOM--针对HTML文档的标准模型

---

(6)列举几种类型的DOM节点

• 整个文档是一个文档（document）节点
• 每个HTML标签是一个元素（Element）节点
• 每一个HTML元素的属性是一个属性（Attribute）节点
• HTML元素中的文本是文本(Text）节点

---

（7）什么是事件代理（事件委托）？

事件代理（事件委托），是JavaScript中绑定事件的常用技巧。顾名思义，“事件代理”，就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是能提高性能。

事件委托的好处：

• 减少事件数量，提高性能
• 预测未来元素，新添加的元素仍然可以触发该事件
• 避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件造成的内存溢出

---

（8）什么是事件流？

事件流是指从页面接收事件的顺序。也就是说，当一个事件发生时，这个事件的传播过程就是事件流。

---

（9）什么是事件冒泡？

IE中的事件流就叫做事件冒泡。事件冒泡是由事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。对于HTML来说当以一个元素产生一个事件时，它会把这个事件传递给它的父元素，父元素接收到之后，还要传递给它上一级的元素，就这样一直传播到document对象。

事件冒泡机制？

当一个对象上触发了某种事件，此对象定义了此事件的处理程序，那么就会调用这个处理程序；如果没有定义处理程序或者事件返回true，那么这个事件会向父级对象传播，从里到外，直到它被处理，或者到达对象层次的最顶层

如何阻止冒泡？

阻止冒泡的方法。包括兼容低版本的IE和标准浏览器

function stopBubble(e){
  var event = e ||window.event;
  event.stopPropagation ? event.stopPropagation():(event.cancelBubble = true);
}

 

---

（10）什么是事件捕获

事件捕获就是值不太具体的元素更早的接收到事件，而最具体的节点最后接收到事件。它们的用意就是在事件达到目标之前就捕获它，过程与冒泡相反。

---

(11)以下代码输出结果？为什么？

(function(){
  console.log(1);
  setTimeout(function(){console.log(2)},1000);
  setTimeout(function(){console.log(3)},0);
  console.log(4);
})()

输出结果：1，4，3，2

分析：1 4在前面，因为是简单的调用了console.log()没有延迟输出。

2 3都在事件里，浏览器有一个事件循环，它会检查事件队列和处理为完成的事件。

---

（12）事件的分类有哪些？

鼠标事件、键盘事件、表单事件、窗口事件、触屏事件、剪贴板事件、打印事件、多媒体事件、CSS3（动画、过渡等）事件、其他事件。