JavaScript HTML DOM

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

HTML DOM (文檔對象模型)

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹：

HTML DOM 樹

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

查找 HTML 元素

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

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

通過 id 找到 HTML 元素
通過標簽名找到 HTML 元素
通過類名找到 HTML 元素

通過 id 查找 HTML 元素

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

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

實例

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

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

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

通過標簽名查找 HTML 元素

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

實例

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

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

通過類名找到 HTML 元素

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

實例

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

HTML DOM 后篇

我會接著介紹：

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

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

HTML DOM 節點

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

文檔是一個文檔。
所有的HTML元素都是元素節點。
所有 HTML 屬性都是屬性節點。
文本插入到 HTML 元素是文本節點。are text nodes。
注釋是注釋節點。

Document 對象

當瀏覽器載入 HTML 文檔, 它就會成為 document 對象。

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

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

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

瀏覽器支持

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

Document 對象屬性和方法

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

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

警告 !!!

在 W3C DOM核心，文檔對象繼承節點對象的所有屬性和方法。

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

HTML 文檔對象可以避免使用這些節點對象和屬性：

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

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

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

前言

相信做網站對JavaScript再熟悉不過了，它是一門腳本語言，不同于Python的是，它是一門瀏覽器腳本語言，而Python則是服務器腳本語言，我們不光要會Python，還要會JavaScript，因為它對做網頁方面是有很大作用的。

1.文檔對象（DOM）

1).Document對象

這是我們用的最普遍的一個文檔對象了，專門用來操作DOM節點時用。

1)).獲取元素

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

2)).獲取網頁內容

document.cookie        #網頁cookie
document.domain        #文檔的域名
document.lastModified  #文檔被最后修改的日期和時間
document.referrer      #載入當前文檔的文檔的URL
document.title         #當前文檔的標題
document.URL           #當前文檔的URL
document.doctype       #當前文檔的doctype
document.baseURI       #當前文檔的絕對URI
document.documentMode   #瀏覽器使用的模式
document.documentURI    #文檔的URI
document.implementation #DOM實現
document.inputEncoding  #文檔的編碼（字符集）
document.readyState     #文檔的（加載）狀態
document.strictErrorChecking    #是否強制執行錯誤檢查

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)).獲取節點

childNodes          #獲取子節點的集合 ，返回數組 ，并把換行和空格也當成是節點信息。
children            #獲取子節點的集合 ，返回數組   
firstChild          #獲取第一個子元素  并把換行和空格也當成是節點信息
firstElementChild   #獲取第一個子節點
lastChild           #獲取最后一個子節點 并把換行和空格也當成是節點信息
lastElementChild    #獲取最后一個子節點
parentNode          #獲取父節點
parentElement       #獲取父節點(IE)
offsetParent        #獲取所有父節點  對應的值是body下的所有節點信息
previousSibling         #獲取上一個兄弟節點  匹配字符，包括換行和空格，而不是節點
previousElementSibling  #獲取上一個兄弟節點  直接匹配節點
nextSibling             #獲取下一個兄弟節點  匹配字符，包括換行和空格，而不是節點
nextElementSibling      #獲取下一個兄弟節點  直接匹配節點
ownerDocument           #元素的根節點

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

6)).創建節點

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

document.createElement(標簽)  #創建HTML元素
document.createTextNode(文本) #給文檔添加文本
document.createComment(文本)  #創建一個注釋節點
document.createDocumentFragment() #創建文檔粉碎節點

7)).增加節點

appendChild（節點） #節點被添加到元素的末尾
insertBefore（a,b） #a節點會插入b節點的前面

8)).刪除節點

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

9)).替換節點

replaceChild(插入的節點，被替換的節點)

10)).復制節點

a.cloneChild() #復制a節點,復制出來的節點作為返回值為true時，則a元素后代也一并復制。否則，僅復制a元素本身

11)).節點屬性

#節點類型 nodeType 有三種情況
#1.元素節點  2.屬性節點  3.文本節點


#節點名稱 nodeName 


#節點值 nodeValue 
#元素節點沒節點值，為null 
#文本節點的節點值就是文本
#屬性節點的節點值就是該屬性值


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


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


a.id 獲取當前元素的id
a.className  獲取當前元素的class
a.classList  獲取當前元素的class列表


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

12)).獲取元素文本

a.innerHTML  獲取或者設置對象內的HTML
a.innerText  獲取或者設置對象內的文本
a.outerHTML  獲取或者設置對象外的HTML
a.outerText  獲取或者設置對象外的文本
a.value      獲取或者設置表單元素的值

總結

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商