JavaScript HTML DOM

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

HTML DOM (文檔對象模型)

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

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

HTML DOM 樹

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

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠?qū)撁嬷械乃惺录龀龇磻?yīng)

查找 HTML 元素

通常，通過 JavaScript，您需要操作 HTML 元素。

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

通過 id 找到 HTML 元素
通過標(biāo)簽名找到 HTML 元素
通過類名找到 HTML 元素

通過 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。

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

實(shí)例

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

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

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

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

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

實(shí)例

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

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

通過類名找到 HTML 元素

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

實(shí)例

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

HTML DOM 后篇

我會接著介紹：

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

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

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

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

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

Document 對象

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

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

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

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

瀏覽器支持

所有主要瀏覽器都支持 Document 對象。

Document 對象屬性和方法

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

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

警告 !!!

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

很多屬性和方法在文檔中是沒有意義的。

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

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

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

家好，我是IT共享者，人稱皮皮。

前言

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

1.文檔對象（DOM）

1).Document對象

這是我們用的最普遍的一個文檔對象了，專門用來操作DOM節(jié)點(diǎn)時(shí)用。

1)).獲取元素

document.getElementById()           #通過id查找HTML元素
document.getElementsByName()        #通過name查找HTML元素
document.getElementsByTagName()     #通過標(biāo)簽名查找HTML元素
document.getElementsByClassName()   #通過類名查找HTML元素 
document.querySelector(".h")        #第一個類名為 "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)頁內(nèi)容

document.cookie        #網(wǎng)頁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)前文檔的絕對URI
document.documentMode   #瀏覽器使用的模式
document.documentURI    #文檔的URI
document.implementation #DOM實(shí)現(xiàn)
document.inputEncoding  #文檔的編碼（字符集）
document.readyState     #文檔的（加載）狀態(tài)
document.strictErrorChecking    #是否強(qiáng)制執(zhí)行錯誤檢查

3)).文檔寫入

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

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          #獲取第一個子元素  并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息
firstElementChild   #獲取第一個子節(jié)點(diǎn)
lastChild           #獲取最后一個子節(jié)點(diǎn) 并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息
lastElementChild    #獲取最后一個子節(jié)點(diǎn)
parentNode          #獲取父節(jié)點(diǎn)
parentElement       #獲取父節(jié)點(diǎn)(IE)
offsetParent        #獲取所有父節(jié)點(diǎn)  對應(yīng)的值是body下的所有節(jié)點(diǎn)信息
previousSibling         #獲取上一個兄弟節(jié)點(diǎn)  匹配字符，包括換行和空格，而不是節(jié)點(diǎn)
previousElementSibling  #獲取上一個兄弟節(jié)點(diǎn)  直接匹配節(jié)點(diǎn)
nextSibling             #獲取下一個兄弟節(jié)點(diǎn)  匹配字符，包括換行和空格，而不是節(jié)點(diǎn)
nextElementSibling      #獲取下一個兄弟節(jié)點(diǎn)  直接匹配節(jié)點(diǎn)
ownerDocument           #元素的根節(jié)點(diǎn)

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

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

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

document.createElement(標(biāo)簽)  #創(chuàng)建HTML元素
document.createTextNode(文本) #給文檔添加文本
document.createComment(文本)  #創(chuàng)建一個注釋節(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)會插入b節(jié)點(diǎn)的前面

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

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

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

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

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

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

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

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


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


#節(jié)點(diǎn)值 nodeValue 
#元素節(jié)點(diǎn)沒節(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è)置對象內(nèi)的HTML
a.innerText  獲取或者設(shè)置對象內(nèi)的文本
a.outerHTML  獲取或者設(shè)置對象外的HTML
a.outerText  獲取或者設(shè)置對象外的文本
a.value      獲取或者設(shè)置表單元素的值

總結(jié)

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

在線咨詢

上一篇：Word插入gif動圖，簡單3步理清門路（贈268份
下一篇：CSS Transform

您的項(xiàng)目需求

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

整合營銷服務(wù)商

JavaScript HTML DOM

前言

1.文檔對象（DOM）

1).Document對象

1)).獲取元素

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

3)).文檔寫入

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)目需求