【JavaScript】詳解HTML DOM

時間  2019-11-13
標籤 JavaScript 詳解 html dom 欄目 JavaScript 简体版
原文   原文鏈接

HTML DOM定義了訪問和操做HTML文檔的標準方法。HTML DOM 把HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。javascript

HTML DOM簡介html

HTML文檔對象模型（HTML Document Object Model）定義了訪問和處理HTML文檔的標準方法。java

您應當具有的基礎知識node

在繼續學習以前，您須要對下面的知識有基本的瞭解：web

◆HTML / XHTML瀏覽器

◆JavaScript學習

什麼是DOM？this

經過JavaScript，您能夠重構整個HTML文檔。您能夠添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西，JavaScript就須要對HTML文檔中全部元素進行訪問的入口。這個入口，連同對HTML元素進行添加、移動、改變或移除的方法和屬性，都是經過文檔對象模型來得到的（DOM）。spa

在1998年，W3C發佈了第一級的DOM規範。這個規範容許訪問和操做HTML頁面中的每個單獨的元素。全部的瀏覽器都執行了這個標準，所以，DOM的兼容性問題也幾乎難覓蹤跡了。DOM可被JavaScript用來讀取、改變HTML、XHTML以及XML文檔。DOM被分爲不一樣的部分（核心、XML及HTML）和級別（DOM Level 1/2/3）：code

◆Core DOM：定義了一套標準的針對任何結構化文檔的對象。

◆XML DOM：定義了一套標準的針對XML文檔的對象。

◆HTML DOM：定義了一套標準的針對HTML文檔的對象。

HTML DOM 節點

HTML文檔中的每一個成分都是一個節點。

節點

根據DOM，HTML文檔中的每一個成分都是一個節點。DOM是這樣規定的：

◆整個文檔是一個文檔節點

◆每一個HTML標籤是一個元素節點

◆包含在HTML元素中的文本是文本節點

◆每個HTML屬性是一個屬性節點

◆註釋屬於註釋節點

Node層次

節點彼此都有等級關係。HTML文檔中的全部節點組成了一個文檔樹（或節點樹）。HTML文檔中的每一個元素、屬性、文本等都表明着樹中的一個節點。樹起始於文檔節點，並由此繼續伸出枝條，直處處於這棵樹最低級別的全部文本節點爲止。下面這個圖片表示一個文檔樹（節點樹）：

HTML DOM 節點樹

一棵節點樹中的全部節點彼此都是有關係的。

文檔樹（節點數）

 
     
 
  
  1. 請看下面這個HTML文檔：  
    2.  
 
  
  2. <html> 
    3.  
 
  
  3.   <head> 
    4.  
 
  
  4.     <title>DOM Tutorial</title>   
    5.  
 
  
  5.   </head>   
    6.  
 
  
  6.   <body>   
    7.  
 
  
  7.     <h1>DOM Lesson one</h1>   
    8.  
 
  
  8.     <p>Hello world!</p>   
    9.  
 
  
  9.   </body>   
    10.  
 
  
  10. </html> 
    11.

上面全部的節點彼此間都存在關係。除文檔節點以外的每一個節點都有父節點。舉例，<head> 和 <body>的父節點是<html>節點，文本節點"Hello world!"的父節點是<p>節點。

大部分元素節點都有子節點。比方說，<head>節點有一個子節點：<title>節點。<title>節點也有一個子節點：文本節點"DOM Tutorial"。當節點分享同一個父節點時，它們就是同輩（同級節點）。比方說，<h1>和 <p>是同輩，由於它們的父節點均是<body>節點。

節點也能夠擁有後代，後代指某個節點的全部子節點，或者這些子節點的子節點，以此類推。比方說，全部的文本節點都是<html>節點的後代，而第一個文本節點是<head>節點的後代。節點也能夠擁有先輩。先輩是某個節點的父節點，或者父節點的父節點，以此類推。比方說，全部的文本節點均可把<html>節點做爲先輩節點。

HTML DOM訪問節點

經過DOM，您可訪問HTML文檔中的每一個節點。

查找並訪問節點

你可經過若干種方法來查找您但願操做的元素：

◆經過使用 getElementById() 和 getElementsByTagName() 方法。

◆經過使用一個元素節點的parentNode、firstChild以及lastChild屬性。

getElementById() 和 getElementsByTagName()

getElementById() 和 getElementsByTagName()這兩種方法，可查找整個HTML文檔中的任何HTML元素。

這兩種方法會忽略文檔的結構。假如您但願查找文檔中全部的<p>元素，getElementsByTagName()會把它們所有找到，無論<p>元素處於文檔中的哪一個層次。同時，getElementById()方法也會返回正確的元素，不論它被隱藏在文檔結構中的什麼位置。這兩種方法會像您提供任何你所須要的HTML元素，不論它們在文檔中所處的位置！getElementById()可經過指定的ID來返回元素：

 
     
 
  
  1. document.getElementById("ID");  
    2.

註釋：getElementById() 沒法工做在XML中。在XML文檔中，您必須經過擁有類型id的屬性來進行搜索，而此類型必須在XML DTD中進行聲明。

getElementsByTagName() 方法會使用指定的標籤名返回全部的元素（做爲一個節點列表），這些元素是您在使用此方法時所處的元素的後代。getElementsByTagName() 可被用於任何的HTML元素：

getElementsByTagName() 語法

 
     
 
  
  1. document.getElementsByTagName("標籤名稱");  
    2.

或者：

 
     
 
  
  1. document.getElementById('ID').getElementsByTagName("標籤名稱");  
    2.

實例 1

下面這個例子會返回文檔中全部<p>元素的一個節點列表：

 
     
 
  
  1. document.getElementsByTagName("p");  
    2.

實例 2

下面這個例子會返回全部<p>元素的一個節點列表，且這些<p>元素必須是id爲"maindiv"的元素的後代：

 
     
 
  
  1. document.getElementById('maindiv').getElementsByTagName("p");  
    2.

節點列表（nodeList）

當咱們使用節點列表時，一般要把此列表保存在一個變量中，就像這樣：

 
     
 
  
  1. var x=document.getElementsByTagName("p"); 
    2.

如今，變量x包含着頁面中全部<p>元素的一個列表，而且咱們能夠經過它們的索引號來訪問這些<p>元素。註釋：索引號從0開始。您能夠經過使用length屬性來循環遍歷節點列表：

 
     
 
  
  1. var x=document.getElementsByTagName("p");  
    2.  
 
  
  2. for (var i=;i<x.length;i++)  
    3.  
 
  
  3.   {   
    4.  
 
  
  4.   // do something with each paragraph  
    5.  
 
  
  5.   } 
    6.

您也能夠經過索引號來訪問某個具體的元素。要訪問第三個<p>元素，您能夠這麼寫：

 
     
 
  
  1. var y=x[2]; 
    2.

parentNode、firstChild以及lastChild

這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構，在文檔中進行「短距離的旅行」。請看下面這個HTML片斷：

 
     
 
  
  1. <table> 
    2.  
 
  
  2.   <tr> 
    3.  
 
  
  3.     <td>John</td> 
    4.  
 
  
  4.     <td>Doe</td> 
    5.  
 
  
  5.     <td>Alaska</td> 
    6.  
 
  
  6.   </tr> 
    7.  
 
  
  7. </table> 
    8.

在上面的HTML代碼中，第一個<td>是<tr>元素的首個子元素（firstChild），而最後一個<td>是<tr>元素的最後一個子元素（lastChild）。此外，<tr>是每一個<td>元素的父節點（parentNode）。對firstChild最廣泛的用法是訪問某個元素的文本：

 
     
 
  
  1. var x=[a paragraph];  
    2.  
 
  
  2. var text=x.firstChild.nodeValue;  
    3.

parentNode屬性常被用來改變文檔的結構。假設您但願從文檔中刪除帶有id爲"maindiv"的節點：

 
     
 
  
  1. var x=document.getElementById("maindiv");  
    2.  
 
  
  2. x.parentNode.removeChild(x);  
    3.

首先，您須要找到帶有指定id的節點，而後移至其父節點並執行removeChild()方法。

根節點

有兩種特殊的文檔屬性可用來訪問根節點：

 
     
 
  
  1. document.documentElement   
    2.  
 
  
  2. document.body  
    3.

第一個屬性可返回存在於XML以及HTML文檔中的文檔根節點。第二個屬性是對HTML頁面的特殊擴展，提供了對<body>標籤的直接訪問。

HTML DOM 節點信息

nodeName、nodeValue以及nodeType包含有關於節點的信息。

節點信息

每一個節點都擁有包含着關於節點某些信息的屬性。這些屬性是：

◆nodeName（節點名稱）

◆nodeValue（節點值）

◆nodeType（節點類型）

nodeName

nodeName屬性含有某個節點的名稱。

◆元素節點的nodeName是標籤名稱

◆屬性節點的nodeName是屬性名稱

◆文本節點的nodeName永遠是#text

◆文檔節點的nodeName永遠是#document

註釋：nodeName所包含的XML元素的標籤名稱永遠是大寫的

nodeValue

◆對於文本節點，nodeValue屬性包含文本。

◆對於屬性節點，nodeValue屬性包含屬性值。

◆nodeValue屬性對於文檔節點和元素節點是不可用的。

nodeType

nodeType屬性可返回節點的類型。最重要的節點類型是：

一個 HTML DOM 實例

下面這個例子向咱們展現了當一個用戶在文檔中點擊時，HTML文檔的背景顏色如何被改變。

 
     
 
  
  1. <html> 
    2.  
 
  
  2. <head> 
    3.  
 
  
  3. <script type="text/javascript"> 
    4.  
 
  
  4. function ChangeColor()  
    5.  
 
  
  5. {  
    6.  
 
  
  6. document.body.bgColor="yellow" 
    7.  
 
  
  7. }  
    8.  
 
  
  8. </script> 
    9.  
 
  
  9. </head> 
    10.  
 
  
  10. <body onclick="ChangeColor()"> 
    11.  
 
  
  11. Click on this document!  
    12.  
 
  
  12. </body> 
    13.  
 
  
  13. </html> 
    14.

原文連接：http://www.webjx.com/htmldata/2007-09-21/1190376115.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程