一、問答
（一）、dom對象的innerText和innerHTML有什么區別？
使用innerText時只將相應的文字獲取出來，而使用innerHTML不僅將文字獲取出來而且還會把相應的標簽獲取出來，例如下面的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
</head>
<body>
<div id="head">我是div <a >我是谷歌官網鏈接</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 >百度鏈接</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.lxweimin.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 >百度鏈接</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 >百度鏈接</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 >百度鏈接</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 >百度鏈接</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" >百度鏈接</a>
<a class="lasta" >谷歌鏈接</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" >百度鏈接</a>
<a class="lasta" >谷歌鏈接</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" >百度鏈接</a>
<a class="lasta" >谷歌鏈接</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" >
</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
**本文版權歸本人即簡書筆名：該賬戶已被查封 所有，如需轉載請注明出處。謝謝！ *
