Dom、事件

一、問答

1. dom對象的`innerText`和`innerHTML`有什么區別？

innerHTML：也就是從對象的起始位置到終止位置的全部內容,包括Html標簽。
innerHTML：從起始位置到終止位置的內容, 但它去除Html標簽。

測試

2. `elem.children`和`elem.childNodes`的區別？

elem.children：它返回指定元素的子元素集合，不會返回TextNode。用的比較多
-elem.childNodes：它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本。

測試

3. 查詢元素有幾種常見的方法？

原生JS獲取元素的方法
（1）.通過頂層document節點獲取：
- document.getElementById(elementId):該方法通過節點的ID，可以準確獲得需要的元素，是比較簡單快捷的方法。如果頁面上含有多個相同id的節點，那么只返回第一個節點。
- document.getElementsByName(elementName)：用來選擇一些具有name屬性的html元素，比如form、img等，返回一個儲存對應類名的類數組對象，要用arr[i] 來使用，只有 document
  能使用
- document.getElementsByTagName(tagName)：該方法是通過節點的Tag獲取節點，同樣該方法也是返回一個數組
- document.getElementsByClassName(className)：通過類名來選擇元素，返回一個儲存對應類名的類數組對象
- querySelector()：使用css選擇器語法來選中目標元素，會返回匹配到的元素節點如果有多個滿足條件的元素節點將只返回第一個
- querySelectorAll() ：與querrSelector類似，返回所有滿足條件的元素節點,是一個類數組對象

4. 如何創建一個元素？如何給元素設置屬性？

1.如何創建一個元素

document.createElement(): 用來生成HTML元素節點；
-createTextNode()：createTextNode方法用來生成文本節點，參數為所要生成的文本節點的內容。
-createDocumentFragment()：createDocumentFragment方法生成一個DocumentFragment對象。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="container">
    <ul id="bar">
        <li class="item">你</li>
        <li class="item">是</li>
        <li class="item">誰</li>
        <li class="item">在</li>
        <li class="item">干</li>
    </ul>
</div>
<script>
    function $$(id){
        return document.getElementById(id);
    }
    function tag(className){
        return document.getElementsByClassName(className);
    }
</script>
</body>
</html>

測試

2.如何給元素設置屬性

HTML元素對象有一個attributes屬性，返回一個類似數組的動態對象，成員是該元素標簽的所有屬性節點對象，屬性的實時變化都會反映在這個節點對象上。其他類型的節點對象，雖然也有attributes屬性，但是返回的都是null，因此可以把這個屬性視為元素對象獨有的。
常用有兩種方法：第一種是直接用HTML標簽對象進行讀寫操作，第二種是用setAttribute()方法進行讀寫；

測試

5. 元素的添加、刪除？

添加元素的方法:
- appendChild() ：在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore()：在某個元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()：replaceChild()接受兩個參數：要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);```

刪除元素的方法：
- removeChild()

parentNode.removeChild(childNode);


![節點對象的方法](http://upload-images.jianshu.io/upload_images/2775927-59814a76c7241b25.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


###6. DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？
- 概念：事件是某些動作發生時產生的信號。JavaScript能夠感知這些信號，因此能夠編寫代碼來響應這些信號，也就是響應這些事件。而響應某個事件的函數就叫做**事件處理程序（或事件偵聽器）**。事件處理程序的名字以on開頭，所以click點擊事件的事件處理程序就是onclick，load事件的事件處理程序就是onload等等。

- DOM0級事件處理程序：
因為在HTML代碼中直接指定事件處理程序存在一些缺陷，所以人們轉而使用JavaScript來指定事件處理程序。通過JavaScript來指定事件處理程序的方式就是將一個函數賦值給一個事件處理屬性。
在DOM0級事件處理程序中，要使用JavaScript來指定事件處理程序，首先需要獲取操作對象的引用。每一個元素對象都有自己的事件處理屬性，例如onclick
，將這些屬性的值設置為一個函數，就可以指定事件處理程序了。例如：

<input type="button" value="點擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("你點擊了按鈕");
}
</script>

使用DOM0級方法指定的事件處理程序被認為是元素的方法。這時候的事件處理程序是在元素的作用域中運行的，也就是說，在事件處理程序中，this
引用就是這個元素對象。例如：

<input type="button" value="點擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(this.id); //輸出“btn”
}
</script>

我們可以在上事件處理程序中使用this
關鍵字來獲取元素的所有屬性和方法。以這種方式添加的事件處理程序會在[事件流](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201512012851.html)的冒泡階段被處理。例如使用下面的代碼可以查看事件冒泡的情況。

下面是控制臺中輸出的結果：

![firefox-event-bubbling.jpg](http://upload-images.jianshu.io/upload_images/2775927-64a7f8e287ba6de5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

從控制臺中的輸出結果可以看出，由上到下的順序為child→parent→body→html，說明事件最先發生在按鈕（child）上面，然后逐級往上冒泡。
DOM0事件處理程序會產生事件冒泡。如果要取消事件冒泡，可以使用event.stopPropagation()方法，但是IE瀏覽器不支持這個方法，在IE中，取消事件冒泡的方法為：event.cancleBubble = true。

//取消事件冒泡
event.stopPropagation(); //DOM方法
event.cancleBubble = true; //IE的方法

另外要提的一點是DOM0事件處理程序不支持事件捕獲。
我們也可以刪除通過DOM0級方法指定的事件處理程序，只要將事件處理程序屬性的值設置為null即可。

btn.onclick = null;

使用DOM0級事件處理程序最大的問題是事件會被覆蓋。來看下面的例子：

<input type="button" value="點擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
console.info("event-one");
}
btn.onclick = function(){
console.info("event-two");
}
btn.onclick = function(){
console.info("event-three");
}
</script>


在上面的代碼中，通過按鈕的引用對象為按鈕添加了3個事件處理函數，那么現在的問題是哪一個事件處理程序會被執行？答案是第三個事件處理程序會被執行，控制臺中會輸出“event-three”。這是因為btn.onclick
實際上就像一個指針，在執行第一個事件處理程序時它指向了內存中的一個引用，執行第二個事件處理程序時它又會指向另一個內存的引用，最終會指向第3個事件處理函數的內存引用。

-  DOM2級事件處理程序

由于DOM0級事件處理程序會產生事件冒泡和事件覆蓋等問題，W3C組織制定了“DOM2級事件處理程序”。“DOM2級事件處理程序”定義了2個方法，用于處理指定和刪除事件處理程序的操作，這2個方法是：```addEventListener```和```removeEventListener```。所有的DOM節點中都包含這兩個方法，這些方法接收3個參數：**要處理的事件名稱**、**作為事件處理程序的函數**和**一個布爾值**。布爾值參數如果設置為**true**，表示在**捕獲階段調用事件處理程序**，如果設置為**false**，表示在事件**冒泡階段調用事件處理程序**。

如果要在一個按鈕上添加DOM2級事件處理程序，可以使用下面的代碼：

<input type="button" value="點擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id);
},false);
</script>

上面的代碼為按鈕添加了一個DOM2級事件處理程序，事件名稱是click，對應DOM0級的onclick屬性。因為最后一個參數為false，所以這個事件會在冒泡階段被觸發。

和DOM0級事件處理程序相同，DOM2級事件處理程序也會依附在元素的作用域中運行。

使用DOM2級事件處理程序就可以避免DOM0級事件處理程序的事件覆蓋問題。例如下面的例子：

<input type="button" value="點擊" id="btn">
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.info("event-one");
},false);
btn.addEventListener("click",function(){
console.info("event-two");
},false);
btn.addEventListener("click",function(){
console.info("event-three");
},false);
</script>

查看控制臺我們會發現，3個事件都會被執行，控制臺中依次打印出：“event-one”、“event-two”和“event-three”。

接下來，我們可以來看一下事件捕獲的情況。[上一篇文章](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201512012851.html)只是介紹了事件捕獲，并沒有舉一個具體的例子。下面我們在DOM2級事件處理程序中來查看事件捕獲的過程。代碼如下：

<html lang="zh" id="html" class="demo">
<head>
<meta charset="UTF-8">
<title>事件捕獲</title>
</head>
<body id="body" class="demo">
<div id="parent" class="demo">
<button id="child" class="demo">點擊一下</button>
</div>
<script type="text/javascript">
window.onload = function(){
var elements = document.querySelectorAll(".demo");
for(var i = 0 ; i < elements.length; i++){
elements[i].addEventListener("click",function(event){
var element = elements[i];
//獲取事件
event = event?event:window.event;
//獲取事件發生的目標
target = event.target?event.target:event.srcElement;
console.info("事件源："+target.id+" , "+target.tagName+", 事件對象："+this.id);
},true);
}
}
</script>
</body>
</html>


由于在上面的事件處理程序中，第3個參數被設置為true
，表示在捕獲階段調用事件處理程序。在Firefox瀏覽器的控制臺中得到下面的結果：


![firefox-dom2-event.jpg](http://upload-images.jianshu.io/upload_images/2775927-44e32d854f93b284.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

從控制臺的結果中可以看到，事件源是按鈕，事件對象從上往下分別為：
<document>→<body>→<parent>→<child>。

通過addEventListener()方法添加的事件處理程序只能通過removeEventListener()方法來移除。移除時傳入的參數和添加事件處理程序時的參數一樣。注意：通過addEventListener()方法添加的匿名函數將無法移除。下面是一個移除DOM2級事件處理程序的例子：

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.info(this.id);
},false);
......
btn.removeEventListener("click",function(){/函數在此處沒有用/},false);


傳入removeEventListener()中的事件處理函數必須與addEventListener()中的事件處理函數相同，例如：

var fn = function(){
console.info(this.id);
}
var btn = document.getElementById("btn");
btn.addEventListener("click",fn,false);
......
btn.removeEventListener("click",fn,false);

在多數情況下，都是將事件處理程序添加到事件流的事件冒泡階段，這樣可以最大限度的兼容各種瀏覽器。最好只在事件到達目標之前截獲它的時候將事件處理程序添加到事件捕獲階段。

###7. ```attachEvent```與```addEventListener```的區別？

- 在添加事件處理程序事addEventListener和attachEvent主要有幾個區別：

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

  (2). **第一個參數意義不同**，addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload）

  (3). **事件處理程序的作用域不相同**，addEventListener的作用域是元素本身，this是指的觸發元素，而attachEvent事件處理程序會在全局變量內運行，this是window，所以剛才例子才會返回undefined，而不是元素id

  (4). **為一個事件添加多個事件處理程序時，執行順序不同**，addEventListener添加會按照添加順序執行，而attachEvent添加多個事件處理程序時順序無規律(添加的方法少的時候大多是按添加順序的反順序執行的，但是添加的多了就無規律了)，所以添加多個的時候，不依賴執行順序的還好，若是依賴于函數執行順序，最好自己處理，不要指望瀏覽器


###8. 解釋IE事件冒泡和DOM2事件傳播機制？

-  事件冒泡：
IE的事件流叫做事件冒泡（event bubbling），它是指事件最初由最具體的元素接收，然后逐級向上傳播到較為不具體的節點。例如有下面的HTML代碼：

<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
</head>
<body>
<button id="btn">點擊一下</button>
</body>
</html>

如果你點擊了頁面中的按鈕，那么事件將按照如下的順序進行傳播：
<button>→<body>→<html>→<document>
也就是說，點擊事件實際發生在<button>元素上，然后事件會沿著DOM樹向上傳播，在每一個DOM節點上都會發生，一直傳播到document對象。
所有的現代瀏覽器都支持事件冒泡，但是在具體實現上略有差別。

- 事件捕獲：
事件捕獲的思想是不具體的節點應該更早的接收到事件，最具體的節點最后才接收到事件。事件捕獲的用意在于在事件到達預定的目標之前捕獲它。還是以上面的HTML頁面的代碼為例子，在點擊了按鈕之后，事件的傳播方式為：
<document>→<html>→<body>→<button>
在事件捕獲的過程中，document對象首先接收到點擊事件，然后事件會沿著DOM樹依次向下，一直傳播到事件的目標元素。
Firefox、Chrome、Safari和Opera瀏覽器都支持事件捕獲。“DOM2級事件”要求事件應該從document對象開始傳播，但是上面的4種瀏覽器都從window對象開始捕獲事件。

- DOM2事件傳播機制：
“DOM2級事件”規定的事件流包括3個階段：事件捕獲階段、處于目標階段和事件冒泡階段。首先發生的是事件捕獲，這為截獲事件提供了機會。接著是實際觸發事件的目標。最后是事件冒泡，可以在這個階段對事件作出響應。還是以前面的HTML代碼為例，單擊按鈕元素后會按照下圖所示的順序觸發事件。

![dom2-event.jpg](http://upload-images.jianshu.io/upload_images/2775927-ed8ea5e8022f7637.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

在DOM事件流中實際的目標元素（按鈕）在事件捕獲階段不會接受到事件。這意味著在事件捕獲階段，事件從document到<html>再到<body>就停止了。然后接著是“處于目標”階段，這時事件在按鈕上發生，這個階段被看成是事件冒泡的一部分。最后是事件冒泡階段，事件又傳播回文檔中。
雖然“DOM2級事件”規范明確規定捕獲階段不會涉及事件目標，但是Firefox、Chrome、Safari和Opera瀏覽器都會在捕獲階段觸發事件對象上的事件。這將給我們兩個機會在目標元素上操作事件。
另外，Firefox、Chrome、Safari和Opera瀏覽器都支持DOM事件流，但是IE不支持DOM事件流。

###9. 如何阻止事件冒泡？ 如何阻止默認事件？

- 在非IE下：
    - 阻止事件冒泡：可以用```event.stopPropagation()```;
    - 阻止默認事件：可以用```event.preventDefault()```;

- 在IE下：
    - 阻止事件冒泡：可以用```event.cancelBubble = true```;
    - 阻止默認事件：可以用```event.returnValue = false```; 

測試如下：

<!DOCTYPE html>
<html class="demo">
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body class="demo">
<div id="container" class="demo">
<a id="btn1">點死我</a>
</div>
<script>
addEventHandler($$('#btn1'),'click',function(event){
event.preventDefault();//點擊不會跳轉，默認行為取消
event.stopPropagation();//由下for循環可知，原本在父容器身上都有事件處理程序，并且會在冒泡階段執行，但是這里設置了，所以父容器身上接收'click'事件的程序響應就被阻止了；
console.log(this);//
});
for(var i=0; i<$$$('.demo').length;i++) {
addEventHandler($$$('.demo')[i], 'click', function () {
console.log(this.tagName);
});}

//封裝DOM對象獲取
function $$(el){
return document.querySelector(el);
}
function $$$(els){
return document.querySelectorAll(els);
}

//封裝添加事件處理程序
function addEventHandler(node,type,handler){
    if(!node) return false;
    if(node.addEventListener){
        node.addEventListener(type,handler,false);
    }else if(node.attachEvent){
        node.attachEvent('on'+type,handler);
    }else{
        node['on'+type] = handler;
    }
}
//封裝刪除事件處理程序
function removeEventHandler(node,type,handler){
    if(node.removeEventListener){
        node.removeEventListener(type,handler,false);
    }else if(node.detachEvent){
        node.detachEvent('on'+type,handler);
    }else{
        node['on'+type] = null;
    }
}

</script>
</body>
</html>

最后編輯于：2017.12.04 04:10:46

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,333評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,491評論 3贊 416
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 176,263評論 0贊 374
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,946評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,708評論 6贊 410
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,186評論 1贊 324
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,255評論 3贊 441
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,409評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,939評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,774評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,976評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,518評論 5贊 359
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,209評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,641評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,872評論 1贊 286
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,650評論 3贊 391
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,958評論 2贊 373

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Dom、事件

Dom、事件

一、問答

1. dom對象的`innerText`和`innerHTML`有什么區別？

2. `elem.children`和`elem.childNodes`的區別？

3. 查詢元素有幾種常見的方法？

4. 如何創建一個元素？如何給元素設置屬性？

5. 元素的添加、刪除？

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Dom、事件

一、問答

1. dom對象的innerText和innerHTML有什么區別？

2. elem.children和elem.childNodes的區別？

3. 查詢元素有幾種常見的方法？

4. 如何創建一個元素？如何給元素設置屬性？

5. 元素的添加、刪除？

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

1. dom對象的`innerText`和`innerHTML`有什么區別？

2. `elem.children`和`elem.childNodes`的區別？