問答
- dom對(duì)象的innerText和innerHTML有什么區(qū)別？
- innerText是一個(gè)可寫屬性欧引，返回元素內(nèi)包含的文本內(nèi)容，在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容
- innerHTML屬性作用和innerText類似恳谎，但是不是返回元素的文本內(nèi)容芝此，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM
注意：
在給.innerHTML賦值時(shí)因痛，瀏覽器會(huì)執(zhí)行代碼,解析成html婚苹；
在給.innerText賦值時(shí)，瀏覽器會(huì)把它解析成文本展示出來鸵膏，相當(dāng)于自動(dòng)轉(zhuǎn)義成文本膊升。所以一般用innerText安全性會(huì)更高一點(diǎn)，比如展示用戶輸入數(shù)據(jù)的時(shí)候谭企，
- elem.children和elem.childNodes的區(qū)別廓译？
- elem.children：只獲取html的節(jié)點(diǎn)，不包括文本節(jié)點(diǎn)债查。
- elem.childNodes：獲取所有的子節(jié)點(diǎn)非区。包括文本，段落盹廷，換行征绸，空格等。注意里面換行和空格的影響
注意：
ps:這種情況下直接用.children會(huì)更穩(wěn)妥一些俄占。
-
查詢?cè)赜袔追N常見的方法管怠？
(1).getElementById()：
getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)缸榄，則返回null渤弛。這也是獲取一個(gè)元素最快的方法(2).getElementsByClassName()：
getElementsByClassName方法返回一個(gè)類似數(shù)組的對(duì)象（HTMLCollection類型的對(duì)象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身）碰凶，元素的變化實(shí)時(shí)反映在返回結(jié)果中暮芭。這個(gè)方法不僅可以在document對(duì)象上調(diào)用鹿驼，也可以在任何元素節(jié)點(diǎn)上調(diào)用。
getElementsByClassName方法的參數(shù)辕宏，可以是多個(gè)空格分隔的class名字畜晰，返回同時(shí)具有這些節(jié)點(diǎn)的元素。
(3)getElementsByTagName()：
getElementsByTagName方法返回所有指定標(biāo)簽的元素（搜索范圍包括本身）瑞筐。這個(gè)方法不僅可以在document對(duì)象上調(diào)用凄鼻，也可以在任何元素節(jié)點(diǎn)上調(diào)用。注意聚假，getElementsByTagName方法會(huì)將參數(shù)轉(zhuǎn)為小寫后块蚌，再進(jìn)行搜索。
(4) querySelector():
querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)膘格。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件峭范，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)瘪贱，則返回null纱控。
(5)querySelectorAll():
querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對(duì)象菜秦。NodeList對(duì)象不是動(dòng)態(tài)集合甜害，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中
querySelectorAll方法的參數(shù)，可以是逗號(hào)分隔的多個(gè)CSS選擇器球昨，返回所有匹配其中一個(gè)選擇器的元素
- 如何創(chuàng)建一個(gè)元素尔店？如何給元素設(shè)置屬性？
createElement():用來生成HTML元素節(jié)點(diǎn)主慰。
setAttribute():用于設(shè)置元素屬性
<pre>
<script>
var newDiv = document.createElement("div");
newDiv.id="mydiv";
newDiv.setAttribute("class","mydiv");
console.log(newDiv);//<div id="mydiv" class="mydiv"></div>
</script>
</pre> - 元素的添加嚣州、刪除？
appendChild():在元素末尾添加元素
<pre>
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
</pre>
insertBefore():在某個(gè)元素之前插入元素
<pre>
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
</pre>
刪除元素使用removeChild()方法即可
<pre>
arentNode.removeChild(childNode);
</pre>
６．DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別河哑？
DOM0 事件: 一個(gè)事件只能綁定一個(gè)函數(shù)(處理程序)避诽，再寫一次相當(dāng)于把原來的函數(shù)覆蓋了，不能綁定多個(gè)函數(shù)
DOM2級(jí):同一個(gè)事件可以用不同的處理方式璃谨，對(duì)同一個(gè)事件可以綁定多個(gè)函數(shù)（即多個(gè)處理程序）
<pre>
document.querySelector('.btn').onclick=function(e){
console.log(e);
// console.log(this);
console.log(this.innerText);
console.log('click me...');
};
document.querySelector('#ct').addEventListener('click',function(){
console.log(this);
console.log('in ct...');
});
</pre>
７．a(chǎn)ttachEvent與addEventListener的區(qū)別？
<pre>
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
}
else if (node.attachEvent) {
node.attachEvent('on' + type, handler, );
return true;
}
return false;
}
</pre>
(1)參數(shù)個(gè)數(shù)不相同鲤妥，這個(gè)最直觀佳吞，addEventListener有三個(gè)參數(shù)，attachEvent只有兩個(gè)棉安，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段底扳，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
(2)第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類型（比如click贡耽，load）衷模，而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick鹊汛，onload）
(3)事件處理程序的作用域不相同，addEventListener的作用域是元素本身阱冶，this是指的觸發(fā)元素刁憋，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window
(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í)由最具體的元素接收痰催，然后逐級(jí)向上傳播到較為不具體的元素
(2)DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段迎瞧，處于目標(biāo)階段夸溶，事件冒泡階段，首先發(fā)生的是事件捕獲凶硅，為截取事件提供機(jī)會(huì)缝裁，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段
＊9. 如何阻止事件冒泡足绅？ 如何阻止默認(rèn)事件捷绑？
(1)stopPaopagation()方法可以停止事件在DOM層次的傳播，即取消進(jìn)一的事件捕獲或冒泡氢妈。我們可以在button的事件處理程序中調(diào)用stopPropagation()從而避免注冊(cè)在body上的事件發(fā)生
<pre>
document.getElementsByTagName('a').onclick = function (e) {
e.preventDefault();
}
</pre>
(2)要阻止事件的默認(rèn)行為粹污，可以使用preventDefault()
方法，前提是cancelable值為true首量，比如我們可以阻止鏈接導(dǎo)航這一默認(rèn)行為
<pre>
document.getElementsByTagName('a').onclick = function (e) {
e.preventDefault();
}
</pre>
代碼
代碼1
代碼2
代碼3-方法一
代碼3-方法二
代碼4
代碼5
****本教程版權(quán)歸本人和饑人谷所有,轉(zhuǎn)載請(qǐng)經(jīng)過允許****
