1.DOM簡介

DOM(Document Object Model)即文檔對象模型，是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，并定義了一種方式可以使得從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析為一個由節點和對象(包含屬性和方法的對象)組成的結構集合。簡言之，它會將web頁面和腳本或程序語言連接起來。

My Document

Header

Paragraph

1.1.DOM和JavaScript

DOM是一套標準編程接口，可以用JavaScript來訪問，可以對文檔結構進行改變，例如：可以設置內容，可以修改樣式，但是，DOM并不是JavaScript的一部分，也可以用其他語言來使用

1.2.ECMAScript 和 JavaScript 的關系

JavaScript的創造者為 Netscape 公司，它們將JavaScript 提交給國際標準化組織 ECMA(前身為歐洲計算機制造商協會)，希望這種語言能夠成為國際標準，1967年，ECMA 發布 262 號標準文件(ECMA-262)的第一版，規定了瀏覽器腳本語言的標準，并將這種語言稱為 ECMAScript，因此，ECMAScript是JavaScript的規格，JavaScript是ECMAScript的實現，在日常場合是可以互換的，就像漢語中的普通話，以北京語音為標準因，以北方方言為基礎方言，制定了一套標準，在實際生活中會出現各種方言普通話，例如：四川普通話帶點兒四川方言，山西普通話、山東普通話...

1.3.BOM/DOM/Node/W3C/CommonJs/ECMAScript

ECMAScript規范中，包含了詞法、類型、上下文、表達式、聲明、方法、對象等語言的基本要素

在實際應用中，JavaScript的表現能力取決于宿主環境中的API支持程度，例如：BOM、DOM提供的API，可以讓JavaScript具有操作頁面元素、修改元素樣式、打開某個窗口等能力

瀏覽器就是JavaScript的宿主環境，BOM和DOM在瀏覽器端，由W3C標準組織來規范

在Node環境中，根據CommonJS規范，讓JavaScript擁有了更多的能力，例如：文件操作、數據庫操作、網絡傳輸等，因此，JavaScript也可以用來做后臺開發

1.4.DOM節點

1.4.1.什么是節點？

DOM 節點是指在HTML、XML文檔中的每個成分都是一個節點。 整個文檔就是一個文檔節點，每個HTML、XML標簽是一個元素節點。

1.4.2.節點之間的關系

根節點(祖先節點): HTML 父節點：相對于子節點來說的，當某個節點包含了子節點，這個節點就是其子節點的父節點 子節點：相對于父節點來說的，某個元素下的所有節點，稱為這個元素的子節點 兄弟節點：當兩個節點處于同一個父節點下，這兩個節點可以互稱兄弟節點 注意：兄弟節點可以有多個，父節點只有一個，根節點為html，是祖先節點，也只有一個

1.4.3.節點類型

nodeType 屬性表示節點類型，用來區分不同類型的節點，例如：文本、元素、注釋等

語法：

var type = node.nodeType;

螺釘課堂

var oDiv = document.getElementById("box")

console.log(oDiv.nodeType)

節點類型通常在過濾節點的時候，用來做判斷，例如：

Document

#wrap div{

width: 50px;

height: 50px;

background-color: #009f95;

margin-bottom: 20px

}

點擊

11111111111111111111

var oWrap = document.getElementById("wrap")

var oBtn = document.getElementById("btn")

oBtn.onclick = function(){

var aNodes = oWrap.childNodes

for(var i=0;i

if(aNodes[i].nodeType == 1){

aNodes[i].style.backgroundColor = "red"

}

}

}

1.4.4.節點名字

可以通過nodeName獲取節點的名字，具體應用實例：

Document

添加

• 1111

var oBtn = document.getElementById("btn")

var oIpt = document.getElementById("ipt")

var oUl1 = document.getElementById("ul1")

oBtn.onclick = function(){

var oLi = document.createElement("li")

oLi.innerHTML = oIpt.value

oUl1.appendChild(oLi)

}

oUl1.onclick = function(ev){

var ev = ev || event

if(ev.target.nodeName == "LI"){

ev.target.style.backgroundColor = "red"

}

}

總結

以上是生活随笔為你收集整理的bom event周期_DOM-BOM-EVENT（1）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。