Dom、事件

1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？

  • innerText：獲取到當(dāng)前節(jié)點(diǎn)的文本內(nèi)容不包括標(biāo)簽
  • innerHTML：返回元素的html結(jié)構(gòu)，包括標(biāo)簽
  • outerHTML:返回元素的html結(jié)構(gòu)，包括標(biāo)簽, 返回內(nèi)容還包括本身.
<body>
     <div id="div1" class="item"><p>我是一個(gè)DIV</p></div> 
<script>
  var Div = document.getElementById('div1');
  console.log('innerText:'+ Div.innerText);//innerText:我是一個(gè)DIV
  console.log('innerHTMl:'+ Div.innerHTML);//innerHTMl:<p>我是一個(gè)DIV</p>
  console.log('outerHTML:'+ Div.outerHTML);//outerHTML:<div id="div1" class="item"><p>我是一個(gè)DIV</p></div>
</script>

2. elem.children和elem.childNodes的區(qū)別？

  • elem.children:非標(biāo)準(zhǔn)的，它返回指定元素的子元素集合。經(jīng)測(cè)試，它只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)。
  • elem:childNoder:標(biāo)準(zhǔn)的，返回指定元素的子元素集合，包括HTML屬性，所有屬性，文本。可以通過(guò)nodeType來(lái)判斷是哪種類(lèi)型的節(jié)點(diǎn)，只有當(dāng)nodeType==1時(shí)才是元素節(jié)點(diǎn)，2是屬性節(jié)點(diǎn)，3是文本節(jié)點(diǎn)。
<body>
  <ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
<script>
    
    var  Ul = document.getElementById('ul1');
     console.log(Ul.children);//[li, li, li, li]
     console.log(Ul.childNodes);//[text, li, text, li, text, li, text, li, text]
</script>

3. 查詢(xún)?cè)赜袔追N常見(jiàn)的方法？

  • 通過(guò)document節(jié)點(diǎn)獲?。?/li> 
document.getElementById(' '):返回匹配指定ID屬性的元素節(jié)點(diǎn).如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null.
document.getElementsByClassName(' ') :返回一個(gè)類(lèi)似數(shù)組的對(duì)象（HTMLCollection類(lèi)型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實(shí)時(shí)反映在返回結(jié)果中.這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用;document.getElementsByTagName(' '):返回所有指定標(biāo)簽的元素（搜索范圍包括本身）.返回值是一個(gè)HTMLCollection對(duì)象，也就是說(shuō)，搜索結(jié)果是一個(gè)動(dòng)態(tài)集合，任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中.這個(gè)方法不僅可以在document對(duì)象上調(diào)用，也可以在任何元素節(jié)點(diǎn)上調(diào)用;
document.querySelector(''):返回匹配指定的CSS選擇器的元素節(jié)點(diǎn).如果有多個(gè)節(jié)點(diǎn)滿(mǎn)足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn).如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null;
document.querySelectorAll():返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類(lèi)型的對(duì)象.NodeList對(duì)象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無(wú)法實(shí)時(shí)反映在返回結(jié)果中;
document.getElementsByName():方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個(gè)NodeList格式的對(duì)象，不會(huì)實(shí)時(shí)反映元素的變化。
document.elementFromPoint(x, y):elementFromPoint方法的參數(shù)x和y，分別是相對(duì)于當(dāng)前窗口左上角的橫坐標(biāo)和縱坐標(biāo)，單位是CSS像素。
elementFromPoint方法返回位于這個(gè)位置的DOM元素，如果該元素不可返回（比如文本框的滾動(dòng)條），則返回它的父元素（比如文本框）。如果坐標(biāo)值無(wú)意義（比如負(fù)值），則返回null。
  • 通過(guò)父節(jié)點(diǎn)獲取：
parentNode
parentElement
  • 通過(guò)兄弟節(jié)點(diǎn)獲?。?/li> 
nextSibling
previousSilbing
  • 通過(guò)子節(jié)點(diǎn)獲取
childNodes
firstChild
lastChild

<body>
    <div id="div1" class="item"><p class="item"><img name="img">我是一個(gè)DIV</p></div>  
  <ul id="ul1">
    <li class="list">1</li>
    <li class="list">2</li>
    <li class="list">3</li>
    <li class="list">4</li>

  </ul>

<script>
var Div1 = document.getElementById('div1');
var Div2 = document.getElementsByTagName('li');
var Div3 = document.querySelector('#div1');
var Div4 = document.querySelectorAll('.item')
var img =  document.getElementsByName('img'); 
var Ul = document.querySelector('#ul1');



console.log(Div1);//<div id="div1" class="item"><p class="item"><img name="img">我是一個(gè)DIV</p></div>
console.log(Div2);//[li.list, li.list, li.list, li.list]
console.log(Div3);//<div id="div1" class="item"><p class="item"><img name="img">我是一個(gè)DIV</p></div>
console.log(Div4);//[div#div1.item, p.item]
console.log(img);//[img]
console.log(Div2[1].nextSibling);//#text
console.log(Div2[1].previousSibling);//#text
console.log(Ul.childNodes);//NodeList[9]0: text1: li.list2: text3: li.list4: text5: li.list6: text7: li.list8: textlength: 9__proto__: NodeList
19DOM事件.html:39 #text
console.log(Ul.firstChild);//#text
console.log(Ul.lastChild);//#text
console.log(Div2[0].parentNode);//<ul id="ul1"><li class="list">1</li><li class="list">2</li><li class="list">3</li><li class="list">4</li></ul>
console.log(Div2[0].parentElement);//ul id="ul1"><li class="list">1</li><li class="list">2</li><li class="list">3</li><li class="list">4</li></ul>
</script>
</body>

4. 如何創(chuàng)建一個(gè)元素？如何給元素設(shè)置屬性？

  • 創(chuàng)建元素：
document.createElement(''):createElement方法用來(lái)生成HTML元素節(jié)點(diǎn)。
document.createTextNode(''):createTextNode方法用來(lái)生成文本節(jié)點(diǎn)，參數(shù)為所要生成的文本節(jié)點(diǎn)的內(nèi)容。
document.DocumentFragment():createDocumentFragment方法生成一個(gè)DocumentFragment對(duì)象。
DocumentFragment對(duì)象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來(lái)生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對(duì)它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁(yè)的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。
  • 屬性操作
getAttribute():getAttribute()用于獲取元素的attribute值
createAttribute():createAttribute()方法生成一個(gè)新的屬性對(duì)象節(jié)點(diǎn)，并返回它
setAttribute():setAttribute()方法用于設(shè)置元素屬性
removeAttribute():removeAttribute()用于刪除元素屬性


<div id="ct1" class="zyn">123</div>
<script>
    var Div = document.getElementById('ct1');
    var d= document.createAttribute('class');
    d.value ="zyn1";
    Div.setAttributeNode(d);//zyn1
    console.log(Div.getAttribute('id'));//ct1 
    Div.setAttribute("id", "ct2");//id == ct2
    Div.removeAttribute('id');//""
</script>

5.元素的添加、刪除？

  • appendChild():在元素末尾添加元素；
  • insertBefore(): 在某個(gè)元素前插入元素；
  • replaceChild():接受來(lái)個(gè)參數(shù)（要插入的元素，要替換的元素）
  • removeChild():刪除元素；
QQ截圖20161227151841.jpg

6. DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別？

  • DOM0事件監(jiān)聽(tīng)：Dom0級(jí)事件處理程序是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?，而通過(guò)將事件處理程序設(shè)置為null刪除綁定在元素上的事件處理程序。這種方法無(wú)法給一個(gè)事件添加多個(gè)事件處理程序,后面的程序會(huì)覆蓋前面的程序。
<script>
//指定時(shí)間處理程序
    var btn = document.querySelector("#btn");
    btn.onclick = function()
    {
        alert(this.id)
    };
//刪除事件處理程序
btn.onclick= null;  
</script>
  • DOM2事件監(jiān)聽(tīng)：而Dom2級(jí)定addEventListener()removeEventListener()
    用于處理指定和刪除事件處理程序。所有Dom節(jié)點(diǎn)都包含這兩個(gè)方法，并且它們都接受3個(gè)參數(shù)，要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
<script>
    var  btn = document.querySelector("#btn");
    var handle = function()
    {
        alert(this.id);
    }
    //指定事件處理程序
    btn.addEventListener("click", handle,false);
    //刪除事件處理程序
    btn.removeEventListener("click",handle,false);
</script>

注意：removeEventListener()函數(shù)來(lái)移除事件處理程序時(shí)，移除時(shí)的參數(shù)必須與添加處理程序時(shí)使用的參數(shù)相同，這也意味著通過(guò)addEventListener()添加的匿名函數(shù)將無(wú)法移除.（只能用上面的方法寫(xiě)）如：

<script>
     var btnClick = document.getElementById('btnClick');

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

    btnClick.addEventListener('click', function() {
        alert('Hello!');
    }, false);
    //無(wú)法移除
    btnClick.removeEventListener('click',function(){

    },fasle)
</script>

區(qū)別：使用Dom2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序，而Dom0級(jí)為一個(gè)事件添加多個(gè)事件處理程序時(shí)，后面的程序會(huì)覆蓋前面的。

7. attachEvent與addEventListener的區(qū)別？

在添加事件處理程序時(shí)addEventListener和attachEvent（ie）主要有幾個(gè)區(qū)別

1. 參數(shù)個(gè)數(shù)不相同，這個(gè)最直觀(guān)，addEventListener有三個(gè)參數(shù)，attachEvent只有兩個(gè)，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）

2. 第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類(lèi)型（比如click，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱(chēng)（onclick，onload）

3. 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window，而不是元素id

4. 為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無(wú)規(guī)律了)，所以添加多個(gè)的時(shí)候，不依賴(lài)執(zhí)行順序的還好，若是依賴(lài)于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器

8. 解釋IE事件冒泡和DOM2事件傳播機(jī)制？

1.IE的事件流叫做事件冒泡（event bubbling），即事件開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)（文檔）
2.Netscape的事件捕獲（event capturing）：不太具體的節(jié)點(diǎn)更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反
3.DOM事件流：DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，最先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段(如圖)
QQ截圖20161227160815.jpg

9. 如何阻止事件冒泡？ 如何阻止默認(rèn)事件？

  • 阻止事件冒泡：
<script>
    var stopPropagation= function(event){
        if(event.stoppropagation()){
            event.stopPropagation();
        }else{
             
             event.cancelBubble = true;

        }
    }//兼容ie
 </script>
  • 阻止默認(rèn)事件：
 <script>
    var preventDefault= function(event){
        if(event.preventDefault()){
            event.preventDefault();
        }else{

            event.returnValue= false;
        }
    }//兼容ie
 </script>

代碼練習(xí)

  • 要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
    代碼1

  • 補(bǔ)全代碼，要求：當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在li這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶(hù)輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在li前端6班/li后添加用戶(hù)輸入的非空字符串.當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。
    代碼2

  • 要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片。
    代碼3

  • 實(shí)現(xiàn)Tab切換的功能
    代碼4

  • 實(shí)現(xiàn)模態(tài)框功能
    代碼5

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答 一、dom對(duì)象的innerText和innerHTML有什么區(qū)別？ innerTextinnerText是一...
    婷樓沐熙閱讀 470評(píng)論 0贊 0
  • 1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？ innerText是一個(gè)可寫(xiě)屬性。將寫(xiě)入的內(nèi)容...
    candy252324閱讀 611評(píng)論 0贊 0
  • 1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？ innerText是一個(gè)可寫(xiě)屬性，返回元素內(nèi)包...
    GarenWang閱讀 497評(píng)論 0贊 0
  • 問(wèn)題 1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？ innerText： 當(dāng)使用innerT...
    饑人谷_任磊閱讀 659評(píng)論 0贊 1
  • 圖文～清修 南方的筆墨還在淌汗 北方的琴弦已穿著棉襖 幾百公里 就是溫差的距離 綠皮火車(chē) 用顏色證明它來(lái)自...
    艷青閱讀 227評(píng)論 7贊 1

友情鏈接更多精彩內(nèi)容