dom物件的innerText和innerHTML有什麼差別？

本篇將會說明dom物件的innerText和innerHTML之間的相關差異。

innerText會將所有輸出的東西以文字的形式展示在頁面上，inderHTML則會傳回元素的HTML結構，根據內容會自動建立DOM。

elem.children和elem.childNodes的差別？

elem.children是取得文字節點以外的DOM節點對象，
elem.childNodes是取得所有的DOM節點，包括空的、文字節點。

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

getElementsById():尋找指定ID屬性的元素

getElementsByClassName():尋找指定class屬性的元素

getElementsByTagName():尋找指定標籤的元素

getElementsByName():尋找具有name屬性的元素

querySeletor():相當於css選擇器，尋找具有匹配標籤的第一個節點

querySeletorAll():相當於css選擇器，尋找所有具有符合標籤的節點

如何建立一個元素？如何給元素設定屬性？

createElement()建立一個HTML元素，參數為tagname，不帶<>括號。

createTextNode()建立一個文字節點，參數為文字內容。

setAttribute()用於設定元素屬性，

元素的新增、刪除？

appendChild():在某個元素結束時加入元素

insertBefore():在某個元素之前加入元素

removeChild():刪除某個元素

DOM0 事件和DOM2級在事件監聽使用方式上有什麼不同？

DOM0級事件 是將一個函數賦值綁定在一個事件處理程序上，只能同時處理一個事件。

DOM2級 定義了兩個方法用於處理指定和刪除事件處理程序的操作，並且可以為事件新增多個事件處理程序。

attachEvent與addEventListener的差別？

參數個數不同，addEventListener有三個參數，attchEvent只有兩個，attachEvent新增的時間處理程序只能發生在冒泡階段，addEventListener第三個參數可以決定新增的事件處理程序在捕獲階段或冒泡階段處理

第一個參數意義不同， addEventListener的第一個參數是事件類型（如click,load)，而addachEvent第一個參數所指明的是事件處理函數名稱（onclick ,onload）

事件處理程序的作用域不同，addEventListener的作用域是元素本身，this指的是觸發元素，而attachEvent事件處理程序會在全域變數內執行，this是window

為一個事件新增多個事件處理程序時，執行順序不同，addEventListener新增會依照新增順序執行，而addachEvent新增多個事件處理程序時順序無規律（新增的方法少的時候大多是依照新增順序的反順序執行的，但是添加的多了就無規律了），所以添加多個的時候，若依賴執行函數順序，需要自己處理，不能指望瀏覽器。

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

IE事件冒泡指的是事件會從最內層的元素開始發生，一層一層的向上傳播，直到HTML根節點。

DOM2事件傳播機制：

事件擷取階段：事件從根節點向下一層一層尋找事件的目標節點。

目標階段：到達目標節點，執行目標事件。

事件冒泡階段：事件從目標節點一層一層回溯到根節點。

如何阻止事件冒泡？如何阻止預設事件？

使用stopPropagation()函數阻止事件冒泡。

使用preventDefault()函數取消事件的預設行為。

程式碼問題

有以下程式碼，要求當點擊每個元素li時控制台展示該元素的文字內容。不考慮相容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li></ul>
  <script>var ct = document.querySelector(&#39;.ct&#39;),
    li= ct.querySelectorAll(&#39;li&#39;);for(var i= 0; i< li.length; i++){
    li[i].onclick = function(){        console.log(this.innerText);
    }
}</script>

本篇說明了dom物件的innerText和innerHTML之間的相關差異，更多相關內容請關注php中文網。

相關推薦：

一些關於JS的基礎問題

#如何用前端js模組化寫require .js

用CSS實作的一張圖完成的按鈕實例

以上是dom物件的innerText和innerHTML有什麼差別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！