標籤：
1、DOM
在學習DOM之前你應該已經具備了以下三個知識點的應用：HTML CSS javascript
DOM 是 W3C（全球資訊網聯盟）的標準。
W3C DOM 標準被分為 3 個不同的部分：
在下面的的介紹中，我們會針對html DOM進行舉例和驗證，HTML DOM 定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。換言之，HTML DOM 是關於如何擷取、修改、添加或刪除 HTML 元素的標準。
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
1 <html>2 <head>3 <title>DOM 教程</title>4 </head>5 <body>6 <h1>DOM 第一課</h1>7 <p>Hello world!</p>8 </body>9 </html>
在上面的 HTML 中：
並且：
並且：
一些 DOM 對象方法
這裡提供一些您將在本教程中學到的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回帶有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點數組）。 |
| getElementsByClassName() | 返回包含帶有指定類名的所有元素的節點列表。 |
| appendChild() | 把新的子節點添加到指定節點。 |
| removeChild() | 刪除子節點。 |
| replaceChild() | 替換子節點。 |
| insertBefore() | 在指定的子節點前面插入新的子節點。 |
| createAttribute() | 建立屬性節點。 |
| createElement() | 建立元素節點。 |
| createTextNode() | 建立文本節點。 |
| getAttribute() | 返回指定的屬性值。 |
| setAttribute() | 把指定屬性設定或修為指定的值。 |
編程介面:
可通過 JavaScript （以及其他程式設計語言）對 HTML DOM 進行訪問。
所有 HTML 元素被定義為對象，而編程介面則是對象方法和對象屬性。
方法是您能夠執行的動作（比如添加或修改元素）。
屬性是您能夠擷取或設定的值（比如節點的名稱或內容）.
innerHTML 屬性<html><body><p id="intro">Hello World!</p><script>var txt1=document.getElementById("intro").innerHTML;
var txt2=document.write(txt);</script></body></html>
在上面的例子中，getElementById 是一個方法，而 innerHTML 是屬性。
innerHTML 屬性可用於擷取或改變任意 HTML 元素，包括 <html> 和 <body>。
對事件作出反應
當事件發生時，可以執行 JavaScript，比如當使用者點擊一個 HTML 元素時。
如需在使用者點擊某個元素時執行代碼，請把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript
HTML 事件的例子：
1 <script>2 function changetext(id){3 id.innerHTML = ‘Hello!‘;4 }5 </script>6 <h1 onclick="changetext(this)" class="curser">請點擊這段文本！</h1>
這段代碼實現的是當你點擊文本的時候，<h1>中的文本節點內容會變成Hello!
onchange 事件 :
function myfunction(){ var x = document.getElementById(‘fname‘); x.value= x.value.toUpperCase(); } 請輸入你的英文名：<input type="text" id="fname" onchange="myfunction()" />
這段代碼實現的是當你輸入自己的英文名，並移出文字框的時候，英文名會變成大寫。
getElementsByTagName：
<p>Hello Word!</p> <p>Dom 很有用</p> <script> x = document.getElementsByTagName(‘p‘); document.write("第二段的 innerHTML 是: " + x[1].innerHTML); </script>
這段代碼使用的是另外一個方法，返回的是節點列表，然後使用下標擷取某個<p>元素的值。
DOM和jQuery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
