詳解JavaScript操作HTML DOM的基本方式，javascriptdom

最後更新：2015-10-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。
HTML DOM (文件物件模型)
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
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
HTML DOM 允許 JavaScript 改變 HTML 元素的內容。
改變 HTML 輸出資料流
JavaScript 能夠建立動態 HTML 內容：
今天的日期是： Wed Oct 21 2015 14:43:25 GMT+0800 (中國標準時間)
在 JavaScript 中，document.write() 可用於直接向 HTML 輸出資料流寫內容。
執行個體

<!DOCTYPE html><html><body><script>document.write(Date());</script></body></html>

lamp 絕對不要在文檔載入完成之後使用 document.write()。這會覆蓋該文檔。

改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容，請使用這個文法：
document.getElementById(id).innerHTML=new HTML
本例改變了 <p>元素的內容：
執行個體

<html><body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="New text!";</script></body></html>

本例改變了 <h1> 元素的內容：
執行個體

<!DOCTYPE html><html><body><h1 id="header">Old Header</h1><script>var element=document.getElementById("header");element.innerHTML="New Header";</script></body></html>

執行個體講解：

上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內容 (innerHTML)

改變 HTML 屬性
如需改變 HTML 元素的屬性，請使用這個文法：

document.getElementById(id).attribute=new value

本例改變了 <img> 元素的 src 屬性：
執行個體

<!DOCTYPE html><html><body><img id="image" src="smiley.gif"><script>document.getElementById("image").src="landscape.jpg";</script></body></html>

執行個體講解：

上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來獲得 id="image" 的元素
JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

詳解JavaScript操作HTML DOM的基本方式，javascriptdom

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support