1.DOM簡(jiǎn)介

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

My Document

Header

Paragraph

1.1.DOM和JavaScript

DOM是一套標(biāo)準(zhǔn)編程接口，可以用JavaScript來訪問，可以對(duì)文檔結(jié)構(gòu)進(jìn)行改變，例如：可以設(shè)置內(nèi)容，可以修改樣式，但是，DOM并不是JavaScript的一部分，也可以用其他語言來使用

1.2.ECMAScript 和 JavaScript 的關(guān)系

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

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

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

在實(shí)際應(yīng)用中，JavaScript的表現(xiàn)能力取決于宿主環(huán)境中的API支持程度，例如：BOM、DOM提供的API，可以讓JavaScript具有操作頁面元素、修改元素樣式、打開某個(gè)窗口等能力

瀏覽器就是JavaScript的宿主環(huán)境，BOM和DOM在瀏覽器端，由W3C標(biāo)準(zhǔn)組織來規(guī)范

在Node環(huán)境中，根據(jù)CommonJS規(guī)范，讓JavaScript擁有了更多的能力，例如：文件操作、數(shù)據(jù)庫操作、網(wǎng)絡(luò)傳輸?shù)?#xff0c;因此，JavaScript也可以用來做后臺(tái)開發(fā)

1.4.DOM節(jié)點(diǎn)

1.4.1.什么是節(jié)點(diǎn)？

DOM 節(jié)點(diǎn)是指在HTML、XML文檔中的每個(gè)成分都是一個(gè)節(jié)點(diǎn)。 整個(gè)文檔就是一個(gè)文檔節(jié)點(diǎn)，每個(gè)HTML、XML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)。

1.4.2.節(jié)點(diǎn)之間的關(guān)系

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

1.4.3.節(jié)點(diǎn)類型

nodeType 屬性表示節(jié)點(diǎn)類型，用來區(qū)分不同類型的節(jié)點(diǎn)，例如：文本、元素、注釋等

語法：

var type = node.nodeType;

螺釘課堂

var oDiv = document.getElementById("box")

console.log(oDiv.nodeType)

節(jié)點(diǎn)類型通常在過濾節(jié)點(diǎn)的時(shí)候，用來做判斷，例如：

Document

#wrap div{

width: 50px;

height: 50px;

background-color: #009f95;

margin-bottom: 20px

}

點(diǎn)擊

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.節(jié)點(diǎn)名字

可以通過nodeName獲取節(jié)點(diǎn)的名字，具體應(yīng)用實(shí)例：

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"

}

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。