一、问答
（一）、dom对象的innerText和innerHTML有什么区别？
使用innerText时只将相应的文字获取出来，而使用innerHTML不仅将文字获取出来而且还会把相应的标签获取出来，例如下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="head">我是div <a href="https://www.google.com">我是谷歌官网链接</a> </div>
<script>
var inBody=document.getElementById("head");
console.log(inBody.innerText);
console.log(inBody.innerHTML);
</script>
</body>
</html>
Paste_Image.png
（二）、elem.children和elem.childNodes的区别？
elem.children 只获取子元素相应的元素部分（Elements类型），非元素部分【比如Text类型（比如空格、文字）、Comment类型等】它不获取，它属于HTMLCollection（元素的集合），而elem.childNodes不仅获取元素部分（Elements类型），还获取非元素部分（比如Text类型、Comment类型等），它属于NodeList（节点的集合）。例如下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child">
<a href="http://www.baidu.com">百度链接</a>
</div>
</div>
<script>
var elem=document.getElementById("parent");
console.log(elem.children);
console.log(elem.children[0]);
console.log(elem.children.toString());
console.log(elem.children[0].toString());
console.log(elem.childNodes);
console.log(elem.childNodes[0]);
console.log(elem.childNodes.toString());
console.log(elem.childNodes[0].toString());
</script>
</body>
</html>
Paste_Image.png
（三）、查询元素有几种常见的方法？
W3C 的 DOM 规范类：
1、getElementById()；【注意其返回值与下面getElements系列的区别，具体可详见我的这篇文章http://www.jianshu.com/p/3dde65a9adf6 】
2、getElementsByTagName()；
3、getElementsByName()；
4、getElementsByClassName()；W3C 中的 Selectors API 规范类：
1、querySelector()；
2、querySelectorAll()；
注意两种间的区别：
a、接受的参数不一样；
b、返回的值不一样；（querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy 系列的返回值实际上是一个 HTMLCollection 对象 。）
c、兼容性不一样；
d、W3C 标准不同；
具体区别可详见 https://www.zhihu.com/question/24702250
下面依次详细介绍下getElementById、getElementsBy系列及querySelector系列：
-
DOM规范类
<一>、getElementById
getElementById
getElementById返回的值类型为[object HTMLDivElement]
上图中测试的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child"><a href="http://www.baidu.com">百度链接</a></div>
</div>
<script>
console.log(document.getElementById("parent"));
console.log(document.getElementById("parent").toString());
</script>
</body>
</html>
<二>、 getElementsByClassName
getElementsByClassName
getElementsByClassName返回的值的类型为[object HTMLCollection]，在其后面添加数组编号[0]时，返回的值的类型就变为[object HTMLDivElement]
getElementsByClassName
<三>、getElementsByTagName
getElementsByTagName
getElementsByTagName
上述图中的代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div class="parent">
<div class="child"><a href="http://www.baidu.com">百度链接</a></div>
</div>
<script>
console.log(document.getElementsByTagName("a"));
console.log(document.getElementsByTagName("a").toString());
</script>
</body>
</html>
getElementsByTagName的返回值类型为[object HTMLCollection]，加上数组编号[0]后会变成如下图所示的结果
getElementsByTagName
<四>、getElementsByName
getElementsByName
getElementsByName
getElementsByName疑问！！！！
getElementsByName返回的值类型是[object NodeList]类型而不是[object HTMLCollection] ！！！ 但是其返回的确实是元素的集合（HTMLCollection）而非节点的集合（NodeList）《javascript高级程序设计》第三版第258页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<fieldset>
<legend>which color do you prefer</legend>
<ul>
<li><input type="radio" value="red" id="colorRed" name="color" >
<label for="colorRed">Red</label> </li>
<li><input type="radio" value="green" id="colorGreen" name="color" >
<label for="colorGreen">Green</label> </li>
</ul>
</fieldset>
<script>
console.log(document.getElementsByName("color")) ;
console.log(document.getElementsByName("color")[1]);
console.log(document.getElementsByName("color").toString()) ;
console.log(document.getElementsByName("color")[1].toString()) ;
</script>
</body>
</html>
-
selectors API规范类
<一>、 querySelector()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child">
<a href="http://www.baidu.com">百度链接</a>
</div>
</div>
<script>
console.log(document.querySelector("#parent"));
console.log(document.querySelector("#parent").toString());
</script>
</body>
</html>
querySelector
querySelector 此时返回值类型为[object HTMLDivElement]，将上述代码改成如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<ul class="child">
<li>我是child选择器ul里的li1</li>
<li>我是child选择器ul里的li2</li>
</ul>
<div class="child">我是child选择器的div </div>
</div>
<script>
console.log(document.querySelector(".child "));
console.log(document.querySelector(".child").toString());
</script>
</body>
</html>
querySelector 改后
<二>、querySelectorAll（）
将上述代码改成如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<ul class="child">
<li>我是child选择器ul里的li1</li>
<li>我是child选择器ul里的li2</li>
</ul>
<div class="child">我是child选择器的div </div>
</div>
<script>
console.log(document.querySelectorAll(".child "));
console.log(document.querySelectorAll(".child").toString());
console.log(document.querySelectorAll(".child ")[0]);
console.log(document.querySelectorAll(".child")[0].toString());
</script>
</body>
</html>
querySelectorAll
需要说明的是querySelectorAll返回的是静态（static）的NodeList！！！【一般NodeList及HTMLCollection均为实时的（live）】
（四）、如何创建一个元素？如何给元素设置属性？
可以使用createElement 、createTextNode来创建元素并使用setAttribute来设置属性，例如下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child">
<a href="http://www.baidu.com">百度链接</a>
</div>
</div>
<script>
var newelem=document.createElement("img");
newelem.setAttribute("src","http://upload.jianshu.io/users/upload_avatars/2166980/72fe41a69002.jpg?imageMogr/thumbnail/90x90/quality/100");
newelem.setAttribute("title"," i am a pic");
document.getElementById("parent").appendChild(newelem);
</script>
</body>
</html>
Paste_Image.png
（五）、元素的添加、删除？
元素的添加可以使用appendChild、insertBefore及replaceChild方法，元素的删除可以使用removeChild，举个例子：
原有形式
我想在上述运行结果中的“谷歌链接”超链接前插入一张我的头像，并将“百度链接”超链接替换成“印象搜索”的超级链接，我可在js中使用如下方法实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child">
<a class="will-be-replaced" href="http://www.baidu.com">百度链接</a>
<a class="lasta" href="http://www.google.com">谷歌链接</a>
</div>
</div>
<script>
var child=document.getElementsByClassName("child")[0];
newImg=document.createElement("img");
newImg.setAttribute("src","http://upload.jianshu.io/users/upload_avatars/2166980/72fe41a69002.jpg?imageMogr/thumbnail/90x90/quality/100");
newA=document.createElement("a");
newA.setAttribute("href","https://www.impress.pw");
newA.appendChild(document.createTextNode("印象搜索"));//在a标签中加文字！！！
child.insertBefore(newImg,document.getElementsByClassName("lasta")[0]);
child.replaceChild(newA,document.getElementsByClassName("will-be-replaced")[0]);
</script>
</body>
</html>
运行完成后：
更改后的结果
（六）、DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
DOM0级事件是将一个函数赋给指定元素的事件处理程序属性的值，而DOM2级事件处理程序是特定的方法----addEventListener，使用addEventListener 可以添加多个事件处理程序且它还支持在事件冒泡阶段还是事件捕获阶段处理程序；举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child">
<a class="will-be-replaced" href="http://www.baidu.com">百度链接</a>
<a class="lasta" href="http://www.google.com">谷歌链接</a>
</div>
</div>
<script>
var pic0=document.getElementsByClassName("pic")[0];
var pic1=document.getElementsByClassName("pic")[1];
var pic2=document.getElementsByClassName("pic")[2];
pic0.onclick=function () {
console.log("我是DOM0级事件--渔船唯美意境");
};
pic1.addEventListener("click",function () {
console.log("我是DOM2级事件--我的头像")
},false);
pic2.addEventListener("click",function () {
console.log("我是DOM2级事件--百度logo")
},false);
</script>
</body>
</html>
依次点击上面的图片运行结果：
运行结果
（七）、attachEvent与addEventListener的区别？
- attachEvent为IE事件处理程序，其只接受两个参数：事件处理程序名称（比如onclick），事件处理程序函数，另外使用attachEvent方法，事件处理程序会在全局作用域下运行，且其只支持在事件冒泡阶段处理程序；另外，使用该方法时，事件执行顺序与实际添加顺序是相反的【这一结论是摘自《javascript高级程序设计》第三版第353页，但是本人实际模拟测试（可见下面的代码），结果并不是书上所讲的。】；此方法仅IE9/IE10及opera支持，IE11及Edge、chrome等均不支持！！！
- addEventListener为DOM2级事件处理程序，其可接受两个或者三个参数：事件名称（click），事件处理函数，布尔值（布尔值不写时，则认为是false，即在事件冒泡阶段执行程序；当布尔值为ture时则在事件捕获阶段执行程序），使用该方法时，事件处理程序只会在其所属元素的作用域内运行；另外，使用该方法时，事件执行顺序与实际添加顺序是相同的；（IE9及以上才支持该方法）
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child">
<a class="will-be-replaced" href="http://www.baidu.com">百度链接</a>
<a class="lasta" href="http://www.google.com">谷歌链接</a>
</div>
</div>
<script>
var pic0=document.getElementsByClassName("pic")[0];
var pic1=document.getElementsByClassName("pic")[1];
pic0.attachEvent("onclick",function () {
console.log("我是IE事件处理程序NO.1--attachEvent方法")
});
pic0.attachEvent("onclick",function () {
console.log("我不是DOM2级事件处理程序NO.2--attachEvent方法")
});
pic1.addEventListener("click",function () {
console.log("我是DOM2级事件处理程序NO.1--addEventListener")
},false);
pic1.addEventListener("click",function () {
console.log("我是DOM2级事件处理程序NO.2--addEventListener")
},false);
</script>
</body>
</html>
Paste_Image.png
（八）、解释IE事件冒泡和DOM2事件传播机制？
IE事件冒泡的传播机制是这样的：事件从最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至较为不具体的节点（文档）；
而DOM2事件传播机制是：分为三个阶段，依次为事件捕获阶段--->处于目标阶段--->事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会，然后是实际的目标接收到事件，最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
（九）、如何阻止事件冒泡？ 如何阻止默认事件？
对于DOM中的事件对象，当bubbles（表明事件是否冒泡）为ture时，可使用stopPropagation（）阻止事件冒泡；当canceble是ture时，可使用preventDefault（）阻止默认事件；
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<a target="_blank" href="http://upload.jianshu.io/users/upload_avatars/2166980/72fe41a69002.jpg?imageMogr/thumbnail/90x90/quality/100">
</a>
<script>
var myPic=document.getElementById("pic");
myPic.addEventListener("click",function (event) {
console.log("我在img被点了一次");
event.stopPropagation();
event.preventDefault();
});
document.body.addEventListener("click",function () {
console.log("我在body冒泡了一次")
});
</script>
</body>
</html>
上述js中阻止了点击img时的冒泡行为，同时也利用阻止默认事件程序阻止了img链接跳转的行为。
运行结果：
运行结果
二 、代码
（一）、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>该账户</li>
<li>已被查封</li>
</ul>
<script>
//todo ...
</script>
方法一、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ul class="ct">
<li>这里是</li>
<li>该账户</li>
<li>已被查封</li>
</ul>
<script>
var ct=document.getElementsByClassName("ct")[0];
var li0=ct.children[0];
var li1=ct.children[1];
var li2=ct.children[2];
li0.addEventListener("click",function () {
console.log(li0.innerText)
});
li1.addEventListener("click",function () {
console.log(li1.innerText)
});
li2.addEventListener("click",function () {
console.log(li2.innerText)
});
</script>
</body>
</html>
运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu22/renwu22-1a.html
方法二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ul class="ct">
<li>这里是</li>
<li>已被查封</li>
</ul>
<script>
var list=document.getElementsByClassName("ct")[0].getElementsByTagName("li");
for (var i=0;i<list.length;i++){
list[i].addEventListener("click",function () {
console.log(this.innerText);
})
}
</script>
</body>
</html>
运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu22/renwu22-1b.html
方法三、事件代理法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ul class="ct">
<li>这里是</li>
<li>已被查封</li>
</ul>
<script>
var ulFather=document.getElementsByClassName("ct")[0];
ulFather.addEventListener("click",function (event) {
console.log(event.target.innerText);
})
</script>
</body>
</html>
运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu22/renwu22-1c.html
（二）、补全代码，要求：
1、当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串.
2、当点击每一个元素li时控制台展示该元素的文本内容。
<ul class="ct">
<li>这里是</li>
<li>已被查封</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ul class="ct">
<li>这里是</li>
<li>已被查封</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
document.getElementById("btn-add-start").addEventListener("click",function () {
var addContent=document.getElementsByClassName("ipt-add-content")[0].value;
if (addContent.toString().match(/^\s+$/) || addContent.toString()=="" ){
alert("请输入非空白字符")
}
else {
var addLi=document.createElement("li");
addLi.appendChild(document.createTextNode(addContent));
document.getElementsByClassName("ct")[0].insertBefore(addLi,document.getElementsByClassName("ct")[0].firstElementChild);
}
});
document.getElementById("btn-add-end").addEventListener("click",function () {
var addContent=document.getElementsByClassName("ipt-add-content")[0].value;
if (addContent.toString().match(/^\s+$/) || addContent.toString()=="" ){
alert("请输入非空白字符")
}
else {
var addLi=document.createElement("li");
addLi.appendChild(document.createTextNode(addContent));
document.getElementsByClassName("ct")[0].appendChild(addLi);
}
});
document.getElementsByClassName("ct")[0].addEventListener("click",function (event) {
console.log(event.target.innerText)
})
</script>
</body>
</html>
测试结果
运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu22/renwu22-2.html
（三）、补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<ul class="ct">
<li data-img="http://upload.jianshu.io/users/upload_avatars/2166980/72fe41a69002.jpg?imageMogr/thumbnail/90x90/quality/100">鼠标放置查看图片1</li>
<li data-img="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">鼠标放置查看图片2</li>
<li data-img="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1999384084,3417290255&fm=80">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
document.querySelector(".ct").addEventListener("mouseover",function (event) {
var picUrl=event.target.getAttribute("data-img");
document.querySelector(".img-preview").innerHTML='[站外图片上传中……(3)]';
});
/* 在class="img-preview"的div后面一直加元素的代码 */
// document.querySelector(".ct").addEventListener("mouseover",function (event) {
// var nowPic=document.createElement("img");
// nowPic.setAttribute("src",event.target.getAttribute("data-img"));
// document.querySelector(".img-preview").appendChild(nowPic);
//
//
// })
</script>
</body>
</html>
运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu22/renwu22-3.html
（四）、实现如下图Tab切换的功能
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li{
display: inline-block;
vertical-align: middle;
font-size: 0;
}
li{
list-style: none;
border: 1px solid #1a1a1a;
font-size: 20px;
padding: 10px 10px;
width: 200px;
text-align: center;
cursor: pointer;
}
.down{
border: 1px solid #1a1a1a;
width: 600px;
height: 200px;
}
.content{
display: none;
}
.down>.active{
display: block;
}
.ctTab>.active{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="wrap">
<ul class="ctTab">
<li class="tab active">tab1</li>
<li class="tab">tab2</li>
<li class="tab">tab3</li>
</ul>
<div class="down">
<div class="content active">内容1</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
</div>
</div>
<script>
var Utils = {
hasClass: function(ele, cls){
return !!ele.className.match(new RegExp('\\b'+cls+'\\b'));
},
addClass:function(ele, cls){
if(ele.length && ele.length > 0){
for(var i=0; i<ele.length; i++){
Utils.singleAddClass(ele[i], cls);
}
}else{
Utils.singleAddClass(ele, cls);
}
},
removeClass:function(ele, cls){
if(ele.length && ele.length > 0){
for(var i=0; i<ele.length; i++){
Utils.singleRemoveClass(ele[i], cls);
}
}else{
Utils.singleRemoveClass(ele, cls);
}
},
singleAddClass: function(ele, cls){
if(Utils.hasClass(ele,cls)) return;
ele.className += ' ' + cls;
},
singleRemoveClass: function(ele, cls){
ele.className = ele.className.replace(new RegExp('\\b'+cls+'\\b', 'g'), '');
},
indexOf: function(ele){
var parent = ele.parentElement,
siblings = parent.children;
for(var i=0; i<siblings.length; i++){
if(ele === siblings[i]) return i;
}
return -1;
}
};
document.querySelector(".ctTab").addEventListener("click",function (event) {
Utils.removeClass(document.querySelector(".ctTab").children, 'active');
Utils.addClass(event.target, 'active');
Utils.removeClass(document.querySelectorAll(".content"), 'active');
var i=Utils.indexOf(event.target);
// Utils.addClass(document.querySelector(".down").children[i], 'active');//方法一
Utils.addClass(document.querySelectorAll(".content")[i], 'active');//方法二
});
</script>
</body>
</html>
运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu22/renwu22-4.html
（五）、实现下图的模态框功能
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-5</title>
<style>
*{
margin: 0;
padding: 0;
}
.kuang{
width: 400px;
border: 1px solid #ccc;
margin: 100px 40%;
position: absolute;
z-index: 99;
background-color: #fff;
display: none;
}
.kuang-title{
font-size: 25px;
padding: 10px 5px 10px 20px;
}
.kuang-content{
font-size: 20px;
padding: 15px;
}
a{
text-decoration: none;
font-size: 20px;
color: #000;
font-weight: bolder;
}
.kuang>a{
display: inline-block;
vertical-align: middle;
float: right;
padding: 10px 20px 10px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
#zhezhao{
opacity: 0.5;
background-color: #777777;
height: 500px;
position: relative;
display: none;
}
.btn{
position: absolute;
}
#ct{
position: relative;
}
</style>
</head>
<body>
<div id="ct">
<button class="btn">点我!</button>
<div class="kuang clearfix">
<h1 class="kuang-title">我是标题1 <a class="close" href="#">X</a> </h1>
<hr style="width:400px;" />
<h3 class="kuang-content">我是内容1</h3>
<h3 class="kuang-content">我是内容1</h3>
<hr style="width:400px;" />
<a class="close" href="#">确定</a> <a class="close" href="#">取消</a>
</div>
<div id="zhezhao"></div>
</div>
<script>
document.querySelector(".btn").addEventListener("click",function () {
document.querySelector("#zhezhao").style.display="block";
document.querySelector(".kuang").style.display="block";
});
document.querySelector("#zhezhao").addEventListener("click",function () {
document.querySelector("#zhezhao").style.display="none";
document.querySelector(".kuang").style.display="none";
});
document.querySelector(".kuang").addEventListener("click",function (event) {
if (hasClass (event.target, "close")){
document.querySelector("#zhezhao").style.display="none";
document.querySelector(".kuang").style.display="none";
}
});
function hasClass (ele, cls){
return !!ele.className.match(new RegExp('\\b'+cls+'\\b'));
}
</script>
</body>
</html>
运行结果：https://github.com/have-not-BUG/task/blob/master/renwu/renwu22/renwu22-5.html
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
