一挟裂、dom對象的innerText和innerHTML有什么區(qū)別蒋譬?
1.innerText:是一個(gè)可寫屬性,返回元素內(nèi)容包含的文本內(nèi)容,在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容;
<div>
<p>
123
<span>456</span>
</p>
</div>
<script>
var div=document.getElementsByTagName("div")[0];
div.innerText;
div.innerText="<a href='#'>link</a>";
</script>
2.innerHTML:屬性作用和innerText類似,但是不是返回元素的文本內(nèi)容,而是返回元素的HTML結(jié)構(gòu),在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM;
<div>
<p>
123
<span>456</span>
</p>
</div>
<script>
var div=document.getElementsByTagName("div")[0];
div.innerHTML;
div.innerHTML="<a href='#'>link</a>";
</script>
二割岛、elem.children和elem.childNodes的區(qū)別?
1.element.children只返回父元素的所有HTML標(biāo)簽子元素;
2.element.childNodes返回父元素的所有HTML標(biāo)簽子元素子元素和文本節(jié)點(diǎn)(空格,換行符等);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
123
<a href="#">鏈接</a>
<span>456</span>
</p>
</div>
</body>
</html>
三犯助、查詢元素有幾種常見的方法癣漆?
1.getElementById():返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)剂买,則返回null惠爽。這也是獲取一個(gè)元素最快的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
123
<span>456</span>
</p>
</div>
</body>
</html>
2.getElementsByClassName():返回一個(gè)類似數(shù)組的對象瞬哼,包括了所有class名字符合指定條件的元素婚肆,元素的變化實(shí)時(shí)反映在返回的結(jié)果中。這個(gè)方法不僅可以在document對象上調(diào)用坐慰,也可以在任何元素節(jié)點(diǎn)上調(diào)用较性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
3.getElementsByTagName():返回所有指定標(biāo)簽的元素(搜索范圍包括本身)。返回值是一個(gè)HTMLCollection對象,也就是說赞咙,搜索結(jié)果是一個(gè)動(dòng)態(tài)集合责循,任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對象上調(diào)用攀操,也可以在任何元素節(jié)點(diǎn)上調(diào)用院仿。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<input type="text" name="password" placeholder="請輸入密碼">
</form>
</body>
</html>
4.getElementsByName():用于選擇擁有name屬性的HTML元素,比如form崔赌、img意蛀、frame、embed和object健芭,返回一個(gè)NodeList格式的對象县钥,不會(huì)實(shí)時(shí)反映元素的變化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
5.querySelector():返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)慈迈。如果多個(gè)節(jié)點(diǎn)滿足匹配條件若贮,則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)痒留,則返回null谴麦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
6.querySelectorAll():方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn),返回的是NodeList類型的對象伸头。NodeList對象不是動(dòng)態(tài)集合匾效,所有元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
四恤磷、如何創(chuàng)建一個(gè)元素面哼?如何給元素設(shè)置屬性?
1.createElement方法用來生成HTML元素節(jié)點(diǎn)扫步。參數(shù)為元素的標(biāo)簽名魔策,即元素節(jié)點(diǎn)的tagName屬性。如果傳入大寫的標(biāo)簽名河胎,會(huì)被轉(zhuǎn)為小寫闯袒。如果參數(shù)帶有尖括號(即<和>)或者是null,會(huì)報(bào)錯(cuò)游岳。
var newDiv = document.createElement("div")
2.setAttribute()方法用于設(shè)置元素屬性政敢。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
123
<p>
<span>456</span>
</p>
</div>
</body>
</html>
五、元素的添加胚迫、刪除喷户?
1.appendChild():在元素末尾添加元素;
2.insertBefore():在某個(gè)元素之前插入元素晌区;
3.replaceChild():接受兩個(gè)參數(shù)摩骨,要插入的元素和要替換的元素;
4.removeChild():刪除元素朗若;
六恼五、DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別?
1.DOM0級事件處理程序通過JS制定事件處理程序的傳統(tǒng)方法哭懈,將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩赃M(jìn)行事件監(jiān)聽灾馒;DOM2級事件處理程序是通過定義了 addEventListener()和 removeEventListener()來進(jìn)行事件監(jiān)聽。
2.DOM0級事件處理程序不能添加多個(gè)事件處理程序遣总,而DOM2級事件處理程序可以睬罗。
3.DOM0級事件處理程序不能選擇是在事件捕獲階段調(diào)用事件處理程序還是在冒泡階段調(diào)用事件處理程序,而DOM2級事件處理程序可以旭斥。
<body>
<div id="ct">
<a href="#" class="btn">點(diǎn)擊</a>
</div>
<script>
//DOM0級事件處理程序
document.querySelector(".btn").onclick=function(){
console.log("DOM0級事件處理程序");
};
//DOM2級事件處理程序
var handler1=function(){
console.log("DOM2級事件處理程序1");
};
var handler2=function(){
console.log("DOM2級事件處理程序2");
};
document.querySelector(".btn").addEventListener("click",handler1,true);
document.querySelector(".btn").addEventListener("click",handler2,true);
</script>
</body>
七容达、attachEvent與addEventListener的區(qū)別?
1.參數(shù)個(gè)數(shù)不相同垂券。這個(gè)最直觀花盐,addEventListener有三個(gè)參數(shù),attachEvent只有兩個(gè)菇爪,attachEvent添加的事件處理程序只能發(fā)生在冒泡階段算芯,addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理。
2.第一個(gè)參數(shù)意義不同凳宙。addEventListener第一個(gè)參數(shù)是事件類型(比如click熙揍,load),而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱(onclick氏涩,onload)届囚。
3.事件處理程序的作用域不相同。addEventListener的作用域是元素本身削葱,this是指的觸發(fā)元素奖亚,而attachEvent事件處理程序會(huì)在全局變量內(nèi)運(yùn)行,this是window析砸,所以剛才例子才會(huì)返回undefined昔字,而不是元素id。
4.為一個(gè)事件添加多個(gè)事件處理程序時(shí)首繁,執(zhí)行順序不同作郭。addEventListener添加會(huì)按照添加順序執(zhí)行,而attachEvent添加多個(gè)事件處理時(shí)順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的弦疮,但是添加的多了就無規(guī)律了)夹攒,所以添加多個(gè)的時(shí)候,不依賴執(zhí)行順序的還好胁塞,若是依賴于函數(shù)執(zhí)行順序咏尝,最好自己處理不要指望瀏覽器压语。
八、解釋IE事件冒泡和DOM2事件傳播機(jī)制编检?
1.IE事件冒泡:事件開始時(shí)由最具體的元素(文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn))接收胎食,然后逐級向上傳播到較為不具體的節(jié)點(diǎn)(文檔)。
2.DOM2級事件:其規(guī)定事件流包括三個(gè)階段(事件捕獲階段允懂、處于目標(biāo)階段厕怜、事件冒泡階段),首先發(fā)生的是事件捕獲蕾总,為截獲事件提供了機(jī)會(huì)粥航,然后是實(shí)際的目標(biāo)接受到了事件,最后是冒泡階段生百,這個(gè)階段對事件做出響應(yīng)递雀。
九、如何阻止事件冒泡蚀浆? 如何阻止默認(rèn)事件映之?
1.阻止事件冒泡:IE:event.cancleBuble = true; //默認(rèn):false
大多數(shù)瀏覽器:event.stopPropagation();
2.阻止默認(rèn)事件:IE:event.returnvalue = false; //默認(rèn):true
大多數(shù)瀏覽器:event.preventDefault();
代碼練習(xí)
十、有如下代碼蜡坊,要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容杠输。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
方法一:DOM2級事件處理
<body>
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)6班</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].addEventListener("click",function(){
console.log(this.innerText);
});
}
</script>
</body>
預(yù)覽地址
方法二:DOM2級事件處理
<body>
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)6班</li>
</ul>
<script>
var oul=document.querySelector(".ct");
function handler(event){
console.log(event.target.innerText);
}
oul.addEventListener("click",handler);
</script>
</body>
預(yù)覽地址
方法三:DOM0級事件處理
<body>
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)6班</li>
</ul>
<script>
var oul=document.getElementsByTagName('li');
for(var i=0;i<oul.length;i++){
oul[i].onclick=function(){
console.log(this.innerText);
}
}
</script>
</body>
預(yù)覽地址
十一、補(bǔ)全代碼秕衙,要求:
1.當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在
<li>這里是</li>
元素前添加一個(gè)新元素蠢甲,內(nèi)容為用戶輸入的非空字符串;當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在<li>前端6班</li>
后添加用戶輸入的非空字符串据忘。2.當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容鹦牛。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//todo ...
</script>
做法:DOM0級事件處理程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)6班</li>
</ul>
<input id="txt" placeholder="添加內(nèi)容"/>
<button id="btns">開頭添加</button>
<button id="btne">結(jié)尾添加</button>
</body>
<script>
window.onload=function() {
var oBtns = document.getElementById("btns");
var oBtne = document.getElementById("btne");
var oUl = document.getElementById("ct");
var oTxt = document.getElementById("txt");
var aLi = oUl.getElementsByTagName("li");
oBtns.onclick = function () {
var oLi = document.createElement("li");
oLi.innerHTML = oTxt.value;
oUl.insertBefore(oLi, aLi[0]);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
};
oBtne.onclick = function () {
var oLi = document.createElement("li");
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
};
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
}
</script>
</html>
預(yù)覽地址
做法二:DOM2級事件處理程序
<body>
<ul id="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)6班</li>
</ul>
<input id="txt" placeholder="添加內(nèi)容"/>
<button id="btns">開頭添加</button>
<button id="btne">結(jié)尾添加</button>
</body>
<script>
var oBtns=document.getElementById("btns");
var oBtne=document.getElementById("btne");
var oUl=document.getElementById("ct");
var oTxt=document.getElementById("txt");
var aLi=oUl.getElementsByTagName("li");
function oBtn1(){
var oLi=document.createElement("li");
oLi.innerHTML=oTxt.value;
oUl.insertBefore(oLi,aLi[0]);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
}
function oBtn2(){
var oLi=document.createElement("li");
oLi.innerHTML=oTxt.value;
oUl.appendChild(oLi);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
}
oBtns.addEventListener("click",oBtn1,false);
oBtne.addEventListener("click",oBtn2,false);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
</script>
預(yù)覽地址
十二、補(bǔ)全代碼勇吊,要求:當(dāng)鼠標(biāo)放置在li元素上曼追,會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。
<ul class="ct">
<li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
<li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
<li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>
1.做法一:DOM0級事件處理程序
<body>
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct=document.querySelector(".ct");
var childs=ct.querySelectorAll("li");
var preview=document.querySelector(".img-preview");
for(var i=0;i<childs.length;i++){
childs[i].onmouseover=function (){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = '<img src="' + dataImg + '">'
}
}
</script>
</body>
2.做法二:DOM2級事件處理程序
<body>
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct=document.querySelector(".ct");
var childs=ct.querySelectorAll("li");
var preview=document.querySelector(".img-preview");
for(var i=0;i<childs.length;i++){
childs[i].addEventListener("mouseover",function(){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = '<img src="' + dataImg + '">'
});
}
</script>
</body>
十三汉规、實(shí)現(xiàn)如下圖Tab切換的功能?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.mod-tab{
border:1px solid;
}
.mod-tab * {
box-sizing: border-box;
}
.mod-tab li{
float: left;
list-style: none;
width: 33.33%;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 22px;
border-right: 1px solid;
border-bottom: 1px solid;
cursor: pointer;
}
.mod-tab li:last-child{
border-right: none;
}
.tabs:after{
content: "";
display: block;
clear: both;
}
.mod-tab .tabs .active{
background: #eee;
}
.mod-tab .panel{
height: 180px;
padding: 20px;
display: none;
}
.mod-tab .active{
display: block;
}
</style>
</head>
<body>
<div class="mod-tab">
<ul class="tabs">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="panel active panel1">內(nèi)容1</div>
<div class="panel">內(nèi)容2</div>
<div class="panel">內(nèi)容3</div>
</div>
<script>
var oUl=document.querySelector(".tabs");
var oDiv=document.querySelector(".panel");
oUl.addEventListener("click",function(event){
var txt=event.target.innerText;
for(var i=0;i<oUl.children.length;i++){
oUl.children[i].style.backgroundColor="#fff";
}
event.target.style.backgroundColor="#eee";
oDiv.innerText="內(nèi)容"+txt[txt.length-1];
})
</script>
</body>
</html>
十四礼殊、實(shí)現(xiàn)下圖的模態(tài)框功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body,h3,p,ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#div1{
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 0 auto;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
display: none;
}
#header h3{
padding: 10px;
}
span{
position: absolute;
right: 0;
top: 0;
padding: 10px;
font-size: 20px;
color: black;
cursor: pointer;
}
#cover{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
background:#000;
display: none;
}
#header,#content{
border-bottom: 1px solid #ccc;
}
#content{
height: 100px;
line-height: 40px;
padding: 10px;
}
#footer ul li{
float: left;
margin-right: 5px;
padding: 8px 0;
}
#footer ul li button{
columns: pointer;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
#footer ul{
float: right;
}
</style>
</head>
<body>
<input id="btn" type="button" value="點(diǎn)我1">
<div id="cover"></div>
<div id="div1">
<div id="header">
<h3>我的標(biāo)題1</h3>
<span>×</span>
</div>
<div id="content">
<p>我的內(nèi)容1</p>
<p>我的內(nèi)容2</p>
</div>
<div id="footer">
<ul>
<li><button id="btn1">取消</button></li>
<li><button>確定</button></li>
</ul>
</div>
</div>
<script>
var oDiv1=document.querySelector("#div1"),
aBtn=document.querySelector("#btn"),
aBtn1=document.querySelector("#btn1"),
aSpan=document.querySelector("span"),
aCover=document.querySelector("#cover");
function handler1(){
oDiv1.style.display="none";
aCover.style.display="none";
}
function handler2(){
oDiv1.style.display="block";
oDiv1.style.backgroundColor="#fff";
aCover.style.display="block";
}
aBtn.addEventListener("click",handler2);
aSpan.addEventListener("click",handler1);
aBtn1.addEventListener("click",handler1);
aCover.addEventListener("click",handler1);
</script>
</body>
</html>