JavaScript HTML DOM

通過(guò) HTML DOM，可訪問(wèn) JavaScript HTML 文檔的所有元素。

HTML DOM (文檔對(duì)象模型)

當(dāng)網(wǎng)頁(yè)被加載時(shí)，瀏覽器會(huì)創(chuàng)建頁(yè)面的文檔對(duì)象模型（Document Object Model）。

HTML DOM 模型被構(gòu)造為對(duì)象的樹(shù)：

HTML DOM 樹(shù)

通過(guò)可編程的對(duì)象模型，JavaScript 獲得了足夠的能力來(lái)創(chuàng)建動(dòng)態(tài)的 HTML。

JavaScript 能夠改變頁(yè)面中的所有 HTML 元素
JavaScript 能夠改變頁(yè)面中的所有 HTML 屬性
JavaScript 能夠改變頁(yè)面中的所有 CSS 樣式
JavaScript 能夠?qū)?yè)面中的所有事件做出反應(yīng)

查找 HTML 元素

通常，通過(guò) JavaScript，您需要操作 HTML 元素。

為了做到這件事情，您必須首先找到該元素。有三種方法來(lái)做這件事：

通過(guò) id 找到 HTML 元素
通過(guò)標(biāo)簽名找到 HTML 元素
通過(guò)類(lèi)名找到 HTML 元素

通過(guò) id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最簡(jiǎn)單的方法，是通過(guò)使用元素的 id。

本例查找 id="intro" 元素：

實(shí)例

var x=document.getElementById("intro");

如果找到該元素，則該方法將以對(duì)象（在 x 中）的形式返回該元素。

如果未找到該元素，則 x 將包含 null。

通過(guò)標(biāo)簽名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

實(shí)例

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

通過(guò)類(lèi)名找到 HTML 元素

本例通過(guò) getElementsByClassName 函數(shù)來(lái)查找 class="intro" 的元素：

實(shí)例

var x=document.getElementsByClassName("intro");

HTML DOM 后篇

我會(huì)接著介紹：

如何改變 HTML 元素的內(nèi)容 (innerHTML)
如何改變 HTML 元素的樣式 (CSS)
如何對(duì) HTML DOM 事件對(duì)出反應(yīng)
如何添加或刪除 HTML 元素

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

HTML DOM 節(jié)點(diǎn)

在 HTML DOM (Document Object Model) 中 , 每一個(gè)元素都是 節(jié)點(diǎn):

文檔是一個(gè)文檔。
所有的HTML元素都是元素節(jié)點(diǎn)。
所有 HTML 屬性都是屬性節(jié)點(diǎn)。
文本插入到 HTML 元素是文本節(jié)點(diǎn)。are text nodes。
注釋是注釋節(jié)點(diǎn)。

Document 對(duì)象

當(dāng)瀏覽器載入 HTML 文檔, 它就會(huì)成為 document 對(duì)象。

document 對(duì)象是HTML文檔的根節(jié)點(diǎn)與所有其他節(jié)點(diǎn)（元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn), 注釋節(jié)點(diǎn)）。

Document 對(duì)象使我們可以從腳本中對(duì) HTML 頁(yè)面中的所有元素進(jìn)行訪問(wèn)。

提示：Document 對(duì)象是 Window 對(duì)象的一部分，可通過(guò) window.document 屬性對(duì)其進(jìn)行訪問(wèn)。

瀏覽器支持

所有主要瀏覽器都支持 Document 對(duì)象。

Document 對(duì)象屬性和方法

HTML文檔中可以使用以上屬性和方法:

屬性 / 方法	描述
document.activeElement	返回當(dāng)前獲取焦點(diǎn)元素
document.addEventListener()	向文檔添加句柄
document.adoptNode(node)	從另外一個(gè)文檔返回 adapded 節(jié)點(diǎn)到當(dāng)前文檔。
document.anchors	返回對(duì)文檔中所有 Anchor 對(duì)象的引用。
document.applets	返回對(duì)文檔中所有 Applet 對(duì)象的引用。
document.baseURI	返回文檔的絕對(duì)基礎(chǔ) URI
document.body	返回文檔的body元素
document.close()	關(guān)閉用 document.open() 方法打開(kāi)的輸出流，并顯示選定的數(shù)據(jù)。
document.cookie	設(shè)置或返回與當(dāng)前文檔有關(guān)的所有 cookie。
document.createAttribute()	創(chuàng)建一個(gè)屬性節(jié)點(diǎn)
document.createComment()	createComment() 方法可創(chuàng)建注釋節(jié)點(diǎn)。
document.createDocumentFragment()	創(chuàng)建空的 DocumentFragment 對(duì)象，并返回此對(duì)象。
document.createElement()	創(chuàng)建元素節(jié)點(diǎn)。
document.createTextNode()	創(chuàng)建文本節(jié)點(diǎn)。
document.doctype	返回與文檔相關(guān)的文檔類(lèi)型聲明 (DTD)。
document.documentElement	返回文檔的根節(jié)點(diǎn)
document.documentMode	返回用于通過(guò)瀏覽器渲染文檔的模式
document.documentURI	設(shè)置或返回文檔的位置
document.domain	返回當(dāng)前文檔的域名。
document.domConfig	返回normalizeDocument()被調(diào)用時(shí)所使用的配置
document.embeds	返回文檔中所有嵌入的內(nèi)容（embed）集合
document.forms	返回對(duì)文檔中所有 Form 對(duì)象引用。
document. getElementsByClassName()	返回文檔中所有指定類(lèi)名的元素集合，作為 NodeList 對(duì)象。
document.getElementById()	返回對(duì)擁有指定 id 的第一個(gè)對(duì)象的引用。
document.getElementsByName()	返回帶有指定名稱(chēng)的對(duì)象集合。
document.getElementsByTagName()	返回帶有指定標(biāo)簽名的對(duì)象集合。
document.images	返回對(duì)文檔中所有 Image 對(duì)象引用。
document.implementation	返回處理該文檔的 DOMImplementation 對(duì)象。
document.importNode()	把一個(gè)節(jié)點(diǎn)從另一個(gè)文檔復(fù)制到該文檔以便應(yīng)用。
document.inputEncoding	返回用于文檔的編碼方式（在解析時(shí)）。
document.lastModified	返回文檔被最后修改的日期和時(shí)間。
document.links	返回對(duì)文檔中所有 Area 和 Link 對(duì)象引用。
document.normalize()	刪除空文本節(jié)點(diǎn)，并連接相鄰節(jié)點(diǎn)
document.normalizeDocument()	刪除空文本節(jié)點(diǎn)，并連接相鄰節(jié)點(diǎn)的
document.open()	打開(kāi)一個(gè)流，以收集來(lái)自任何 document.write() 或 document.writeln() 方法的輸出。
document.querySelector()	返回文檔中匹配指定的CSS選擇器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節(jié)點(diǎn)列表
document.readyState	返回文檔狀態(tài) (載入中……)
document.referrer	返回載入當(dāng)前文檔的文檔的 URL。
document.removeEventListener()	移除文檔中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者屬性節(jié)點(diǎn)。
document.scripts	返回頁(yè)面中所有腳本的集合。
document.strictErrorChecking	設(shè)置或返回是否強(qiáng)制進(jìn)行錯(cuò)誤檢查。
document.title	返回當(dāng)前文檔的標(biāo)題。
document.URL	返回文檔完整的URL
document.write()	向文檔寫(xiě) HTML 表達(dá)式或 JavaScript 代碼。
document.writeln()	等同于 write() 方法，不同的是在每個(gè)表達(dá)式之后寫(xiě)一個(gè)換行符。

警告 !!!

在 W3C DOM核心，文檔對(duì)象繼承節(jié)點(diǎn)對(duì)象的所有屬性和方法。

很多屬性和方法在文檔中是沒(méi)有意義的。

HTML 文檔對(duì)象可以避免使用這些節(jié)點(diǎn)對(duì)象和屬性：

屬性 / 方法	避免的原因
document.attributes	文檔沒(méi)有該屬性
document.hasAttributes()	文檔沒(méi)有該屬性
document.nextSibling	文檔沒(méi)有下一節(jié)點(diǎn)
document.nodeName	這個(gè)通常是 #document
document.nodeType	這個(gè)通常是 9(DOCUMENT_NODE)
document.nodeValue	文檔沒(méi)有一個(gè)節(jié)點(diǎn)值
document.ownerDocument	文檔沒(méi)有主文檔
document.ownerElement	文檔沒(méi)有自己的節(jié)點(diǎn)
document.parentNode	文檔沒(méi)有父節(jié)點(diǎn)
document.previousSibling	文檔沒(méi)有兄弟節(jié)點(diǎn)
document.textContent	文檔沒(méi)有文本節(jié)點(diǎn)

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

家好，我是IT共享者，人稱(chēng)皮皮。

前言

相信做網(wǎng)站對(duì)JavaScript再熟悉不過(guò)了，它是一門(mén)腳本語(yǔ)言，不同于Python的是，它是一門(mén)瀏覽器腳本語(yǔ)言，而Python則是服務(wù)器腳本語(yǔ)言，我們不光要會(huì)Python，還要會(huì)JavaScript，因?yàn)樗鼘?duì)做網(wǎng)頁(yè)方面是有很大作用的。

1.文檔對(duì)象（DOM）

1).Document對(duì)象

這是我們用的最普遍的一個(gè)文檔對(duì)象了，專(zhuān)門(mén)用來(lái)操作DOM節(jié)點(diǎn)時(shí)用。

1)).獲取元素

document.getElementById()           #通過(guò)id查找HTML元素
document.getElementsByName()        #通過(guò)name查找HTML元素
document.getElementsByTagName()     #通過(guò)標(biāo)簽名查找HTML元素
document.getElementsByClassName()   #通過(guò)類(lèi)名查找HTML元素 
document.querySelector(".h")        #第一個(gè)類(lèi)名為 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class為"no"或者id為"h"的div元素
document.body          #獲取body標(biāo)簽
document.documentElement   #獲取html標(biāo)簽

2)).獲取網(wǎng)頁(yè)內(nèi)容

document.cookie        #網(wǎng)頁(yè)cookie
document.domain        #文檔的域名
document.lastModified  #文檔被最后修改的日期和時(shí)間
document.referrer      #載入當(dāng)前文檔的文檔的URL
document.title         #當(dāng)前文檔的標(biāo)題
document.URL           #當(dāng)前文檔的URL
document.doctype       #當(dāng)前文檔的doctype
document.baseURI       #當(dāng)前文檔的絕對(duì)URI
document.documentMode   #瀏覽器使用的模式
document.documentURI    #文檔的URI
document.implementation #DOM實(shí)現(xiàn)
document.inputEncoding  #文檔的編碼（字符集）
document.readyState     #文檔的（加載）狀態(tài)
document.strictErrorChecking    #是否強(qiáng)制執(zhí)行錯(cuò)誤檢查

3)).文檔寫(xiě)入

document.write('hello world')   向文檔寫(xiě)入文本
document.writeln('hello world') 向文檔寫(xiě)入文本并換行

4)).獲取集合

document.all        #所有html元素
document.anchors    #所有Anchor引用
document.forms      #所有的表單引用
document.images     #所有的圖片引用
document.links      #所有的超鏈接引用
document.scripts    #所有的腳本引用
document.embeds     #所有的流媒體引用

5)).獲取節(jié)點(diǎn)

childNodes          #獲取子節(jié)點(diǎn)的集合 ，返回?cái)?shù)組 ，并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息。
children            #獲取子節(jié)點(diǎn)的集合 ，返回?cái)?shù)組   
firstChild          #獲取第一個(gè)子元素  并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息
firstElementChild   #獲取第一個(gè)子節(jié)點(diǎn)
lastChild           #獲取最后一個(gè)子節(jié)點(diǎn) 并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息
lastElementChild    #獲取最后一個(gè)子節(jié)點(diǎn)
parentNode          #獲取父節(jié)點(diǎn)
parentElement       #獲取父節(jié)點(diǎn)(IE)
offsetParent        #獲取所有父節(jié)點(diǎn)  對(duì)應(yīng)的值是body下的所有節(jié)點(diǎn)信息
previousSibling         #獲取上一個(gè)兄弟節(jié)點(diǎn)  匹配字符，包括換行和空格，而不是節(jié)點(diǎn)
previousElementSibling  #獲取上一個(gè)兄弟節(jié)點(diǎn)  直接匹配節(jié)點(diǎn)
nextSibling             #獲取下一個(gè)兄弟節(jié)點(diǎn)  匹配字符，包括換行和空格，而不是節(jié)點(diǎn)
nextElementSibling      #獲取下一個(gè)兄弟節(jié)點(diǎn)  直接匹配節(jié)點(diǎn)
ownerDocument           #元素的根節(jié)點(diǎn)

這里我們獲取到了所有的Div元素，我們可以針對(duì)性的獲取一個(gè)ID下的Div的子元素以及它的兄弟和父，子元素，如下：

6)).創(chuàng)建節(jié)點(diǎn)

我們可以自定義節(jié)點(diǎn)并添加值，不過(guò)要將它添加到文檔中去，所以必須添加節(jié)點(diǎn)，一般和下方的增加節(jié)點(diǎn)配套使用。

document.createElement(標(biāo)簽)  #創(chuàng)建HTML元素
document.createTextNode(文本) #給文檔添加文本
document.createComment(文本)  #創(chuàng)建一個(gè)注釋節(jié)點(diǎn)
document.createDocumentFragment() #創(chuàng)建文檔粉碎節(jié)點(diǎn)

7)).增加節(jié)點(diǎn)

appendChild（節(jié)點(diǎn)） #節(jié)點(diǎn)被添加到元素的末尾
insertBefore（a,b） #a節(jié)點(diǎn)會(huì)插入b節(jié)點(diǎn)的前面

8)).刪除節(jié)點(diǎn)

removeChild(節(jié)點(diǎn)名)  #被移除的節(jié)點(diǎn)仍在文檔中，只是文檔中已沒(méi)有其位置了

9)).替換節(jié)點(diǎn)

replaceChild(插入的節(jié)點(diǎn)，被替換的節(jié)點(diǎn))

10)).復(fù)制節(jié)點(diǎn)

a.cloneChild() #復(fù)制a節(jié)點(diǎn),復(fù)制出來(lái)的節(jié)點(diǎn)作為返回值為true時(shí)，則a元素后代也一并復(fù)制。否則，僅復(fù)制a元素本身

11)).節(jié)點(diǎn)屬性

#節(jié)點(diǎn)類(lèi)型 nodeType 有三種情況
#1.元素節(jié)點(diǎn)  2.屬性節(jié)點(diǎn)  3.文本節(jié)點(diǎn)


#節(jié)點(diǎn)名稱(chēng) nodeName 


#節(jié)點(diǎn)值 nodeValue 
#元素節(jié)點(diǎn)沒(méi)節(jié)點(diǎn)值，為null 
#文本節(jié)點(diǎn)的節(jié)點(diǎn)值就是文本
#屬性節(jié)點(diǎn)的節(jié)點(diǎn)值就是該屬性值


#節(jié)點(diǎn)屬性獲取
a.width
a['width']
a.gerAttribute(屬性名)  返回指定的屬性值
a.gerAttributeNode(屬性名) 返回指定的屬性節(jié)點(diǎn)
節(jié)點(diǎn)屬性設(shè)置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的屬性
a.setAttributeNode(b) 添加指定的屬性節(jié)點(diǎn)


#節(jié)點(diǎn)屬性刪除
a.removeChild(子節(jié)點(diǎn))    從元素中移除子節(jié)點(diǎn)
a.removeAttribute(屬性)  從元素中移除指定屬性
a.removeAttributeNode(屬性) 移除指定的屬性節(jié)點(diǎn)，并返回被移除的節(jié)點(diǎn)


a.id 獲取當(dāng)前元素的id
a.className  獲取當(dāng)前元素的class
a.classList  獲取當(dāng)前元素的class列表


a.accessKey='w'    設(shè)置或返回元素的快捷鍵
a.namespaceURI     返回指定節(jié)點(diǎn)的命名空間的 URI
a.dir              設(shè)置或返回元素的內(nèi)容是否可編輯
a.normalize()      合并元素中相鄰的文本節(jié)點(diǎn)，并移除空的文本節(jié)點(diǎn)
a.tabIndex='3'     設(shè)置或返回元素的tab鍵控制次序
a.tagName          返回元素的標(biāo)簽名
a.textContent      設(shè)置或返回節(jié)點(diǎn)及其子代的文本內(nèi)容
a.title            設(shè)置或返回元素的標(biāo)題屬性
a.item(num)        返回節(jié)點(diǎn)列表中位于指定下標(biāo)的節(jié)點(diǎn)
a.length           返回節(jié)點(diǎn)列表中的節(jié)點(diǎn)數(shù)

12)).獲取元素文本

a.innerHTML  獲取或者設(shè)置對(duì)象內(nèi)的HTML
a.innerText  獲取或者設(shè)置對(duì)象內(nèi)的文本
a.outerHTML  獲取或者設(shè)置對(duì)象外的HTML
a.outerText  獲取或者設(shè)置對(duì)象外的文本
a.value      獲取或者設(shè)置表單元素的值

總結(jié)

這篇文章主要介紹了JavaScript的文檔對(duì)象。下一篇文章，我們繼續(xù)介紹JavaScript，敬請(qǐng)期待！

在線(xiàn)咨詢(xún)

上一篇：Word插入gif動(dòng)圖，簡(jiǎn)單3步理清門(mén)路（贈(zèng)268份
下一篇：CSS Transform

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

JavaScript HTML DOM

前言

1.文檔對(duì)象（DOM）

1).Document對(duì)象

1)).獲取元素

2)).獲取網(wǎng)頁(yè)內(nèi)容

3)).文檔寫(xiě)入

4)).獲取集合

5)).獲取節(jié)點(diǎn)

6)).創(chuàng)建節(jié)點(diǎn)

7)).增加節(jié)點(diǎn)

8)).刪除節(jié)點(diǎn)

9)).替換節(jié)點(diǎn)

10)).復(fù)制節(jié)點(diǎn)

11)).節(jié)點(diǎn)屬性

12)).獲取元素文本

總結(jié)

您的項(xiàng)目需求