我的前端學(xué)習(xí)筆記20——DOM、事件

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

  • innerText是將對(duì)象中的字符串過(guò)濾組合展示；而innerHTML則是將對(duì)象中的所有內(nèi)容都進(jìn)行展示；
  • 對(duì)于鏈接，innerHTML會(huì)將其保留連接屬性，而innerText則會(huì)將鏈接轉(zhuǎn)化為字符串；

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

  • elem.children：非標(biāo)準(zhǔn)型，它返回指定元素的子元素集合。只返回HTML節(jié)點(diǎn)。

  • elem.childNodes：標(biāo)準(zhǔn)型，返回指定元素的子元素集合，包括HTML屬性，所有屬性，文本?？梢酝ㄟ^(guò)nodeType來(lái)判斷是那種類型的節(jié)點(diǎn),當(dāng)nodeType==1時(shí)時(shí)元素節(jié)點(diǎn)，2是屬性節(jié)點(diǎn)，3是文本節(jié)點(diǎn)。

    <html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id = "part">
<p class="part1">段落二<a href=" http://www.baidu.com ">我是鏈接</a></p>
<p class="part2">段落三</p>
</div>
</body>
<script>
var parts = document.getElementById("part")
parts.children //  [p.part1, p.part2]
parts.childNodes //  [text, p.part1, text, p.part2, text]
</script>
</html>

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

查詢?cè)爻Ｒ?jiàn)的方法

document節(jié)點(diǎn)獲取

document.getElementById(' ')：
返回匹配指定ID屬性的元素節(jié)點(diǎn).如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。
document.getElementsByClassName(' ')：
返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(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)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn).如果沒(méi)有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null;
document.querySelectorAll()：
返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(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ù)值），則返回nul

父元素節(jié)點(diǎn)獲?。?/p> 

parentNode
parentElement

兄弟節(jié)點(diǎn)獲?。?/p> 

nextSibling
previousSibling

通過(guò)子節(jié)點(diǎn)獲取：

childNodes
firstChild
lastChild

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

創(chuàng)建元素：

創(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()用于刪除元素屬性

具體詳見(jiàn)

5，元素的添加、刪除？

appendChild（）：在元素末尾添加元素；
insertBefore（）：在某個(gè)元素前插入元素；
replaceChild（）：替換某個(gè)元素（要插入的元素，要替換的元素）；
removeChild（）：刪除元素；

舉例：

<body>
<div id="part">
  <p class="part1">段落一<a href="#">我是鏈接</a></p>
</div>
<script>
var p = document.createElement('p');
document.body.appendChild(p);  //在body最后添加了<p></p>;

添加div，給div添加class，添加內(nèi)容為hello：

<div class=wrap></div>
var node = document.createElement('div');
node.setAttribute('class','d');
node.innerHTML = "hello";
wrap.appendChild(node);

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

  • DOM0
    DOM0在事件監(jiān)聽(tīng)使用方式上，采用HTML內(nèi)鏈方式，即通過(guò)onclick 寫(xiě)在HTML標(biāo)簽里的事件

    <a href="#" onclick="console.log('clicked');">點(diǎn)我</a>
或者：
<div id="ct">
<a class="button" href="#">點(diǎn)我</a>
</div>
<script>
document.querySelector(".button").onclick = function(e){
console.log('click me...');
console.log(this.innerText);
console.log(e);
}

這種寫(xiě)法的缺點(diǎn)是不利于日后維護(hù)，代碼只能使用一次，不可以重復(fù)使用。

  • DOM2
    DOM2事件有兩種方法：addEventListener()和removeEventListener()。他們都返回三個(gè)參數(shù)，分別是：事件類型、事件處理方法、布爾值（默認(rèn)為false，false是冒泡階段處理，true是調(diào)用階段處理）。

    <div id="ct">
<a class="button" href="#">點(diǎn)我</a>
</div>
<script>
document.querySelector("#ct").addEventListener('click', function(){
console.log(this);
console.log('in ct...');
},false);

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

  • 適用的瀏覽器不同：
    addEventListener適用于現(xiàn)代瀏覽器（非低版本IE瀏覽器）；
    attachEvent是最低版本IE瀏覽器的私有方法；

  • 參數(shù)和觸發(fā)階段不同：
    addEventListener有三個(gè)參數(shù)，分別是事件類型，事件處理方法，布爾值，其中布爾值可以定義處理方式在捕獲/冒泡階段觸發(fā)；
    true表明該事件監(jiān)聽(tīng)器綁定在捕獲階段（和目標(biāo)階段），false則表明綁定在冒泡階段（和目標(biāo)階段）且false是被默認(rèn)的選項(xiàng)。

  • 第一個(gè)參數(shù)的形式不同：
    addEventListener的第一個(gè)參數(shù)是click;
    attachEvent的第一個(gè)參數(shù)是onclick;

  • this不同：
    addEventListener中的this是觸發(fā)事件的元素；
    attachEvent的this指代的是window；

  • 在同一個(gè)事件上綁定多個(gè)事件處理程序時(shí)的執(zhí)行順序不同：
    addEventListener會(huì)按照添加順序并按照布爾值執(zhí)行；
    attachEvent的執(zhí)行是無(wú)序的；

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

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="ct">
  <a class="button" href="#">點(diǎn)我</a>
</div>
</body>
<script>
document.querySelector(".button").onclick = function(e){
  console.log('click me...');
  console.log(this.innerText);
  console.log(e);
}
document.querySelector("#ct").addEventListener('click', function(){
  console.log(this);
  console.log('in ct...');
});
</script>
</html>

  • IE事件冒泡：
    IE事件冒泡是事件由第一個(gè)被觸發(fā)的元素接收，然后逐級(jí)向上傳播。


  • DOM2的事件傳播機(jī)制：

DOM2事件傳播，事件由最外層元素接收，然后逐層向內(nèi)傳播，這個(gè)過(guò)程為捕獲階段，當(dāng)達(dá)到目標(biāo)元素時(shí)，處于目標(biāo)階段，然后事件由目標(biāo)元素向最外層開(kāi)始傳遞，這個(gè)過(guò)程稱之為冒泡階段。

捕獲階段：


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

常規(guī)瀏覽器：

  • 阻止事件冒泡：stopPropagation( )

    <body>
<a id="btn" >點(diǎn)我</a>
<script>
var btn = document.querySelector("#btn");
btn.addEventListener('click',function(e){
console.log('at btn...',e);
e.stopPropagation();    //阻止事件冒泡函數(shù)
})
document.body.addEventListener("click",function(e){
console.log('at body...',e);
})
</script>

當(dāng)執(zhí)行到a鏈接時(shí)，事件就會(huì)被阻止在a鏈接處，不會(huì)傳到body上。

  • 阻止默認(rèn)事件：preventDefault( )

    <body>
<a id="btn" >點(diǎn)我</a>
<script>
var btn = document.querySelector("#btn");
btn.addEventListener('click',function(e){
console.log('at btn...',e);
e.preventDefault();    //阻止默認(rèn)事件函數(shù)
})
document.body.addEventListener("click",function(e){
console.log('at body...',e);
})
</script>

當(dāng)點(diǎn)擊a鏈接時(shí)，由于a鏈接默認(rèn)會(huì)跳轉(zhuǎn)，e.preventDefault()阻止了a鏈接的跳轉(zhuǎn)。

IE瀏覽器：

  • 阻止事件冒泡：

    <body>
<a id="btn" >點(diǎn)我</a>
<script>
var btn = document.querySelector('#btn');
btn.attachEvent('onclick',function(e){
console.log('at btn...',e);
e.cancelBubble = true;    //默認(rèn)為false，設(shè)置為true后可以取消事件冒泡
})
</script>
</body>

  • 阻止默認(rèn)事件：

    <body>
<a id="btn" >點(diǎn)我</a>
<script>
var btn = document.querySelector('#btn');
btn.attachEvent('onclick',function(e){
console.log('at btn...',e);
e.returnValue = false;    //默認(rèn)為true，設(shè)置為false后可以取消事件默認(rèn)行為
})
</script>
</body>
最后編輯于 ：
?著作權(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)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

  • 問(wèn)答 一、dom對(duì)象的innerText和innerHTML有什么區(qū)別？ innerTextinnerText是一...
    婷樓沐熙閱讀 471評(píng)論 0贊 0
  • dom對(duì)象的innerText和innerHTML有什么區(qū)別？ innerHTML指的是從對(duì)象的起始位置到終止位置...
    coolheadedY閱讀 579評(píng)論 0贊 0
  • DOM0級(jí)和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別？ DOM0級(jí)事件監(jiān)聽(tīng)：用JavaScript指定事件處理程序...
    LeeoZz閱讀 435評(píng)論 0贊 1
  • 問(wèn)答題 dom對(duì)象的innerText和innerHTML有什么區(qū)別？答：innerText和innerHTML都...
    饑人谷_桶飯閱讀 604評(píng)論 0贊 0
  • 1.dom對(duì)象的innerText和innerHTML有什么區(qū)別？ innerText是一個(gè)可寫(xiě)屬性。將寫(xiě)入的內(nèi)容...
    candy252324閱讀 614評(píng)論 0贊 0

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