Manuel de référence HTML DOM chinois
/ HTML DOM - 修改
HTML DOM - 修改
修改 HTML = 改變元素、屬性、樣式和事件。
修改 HTML 元素
修改 HTML DOM 意味著許多不同的方面:
改變 HTML 內(nèi)容
改變 CSS 樣式
改變 HTML 屬性
創(chuàng)建新的 HTML 元素
刪除已有的 HTML 元素
改變事件(處理程序)
在接下來的章節(jié),我們會深入學(xué)習(xí)修改 HTML DOM 的常用方法。
創(chuàng)建 HTML 內(nèi)容
改變元素內(nèi)容的最簡單的方法是使用 innerHTML 屬性。
下面的例子改變一個 <p> 元素的 HTML 內(nèi)容:
實例
<html><!DOCTYPE html> <html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> <p>The paragraph above was changed by a script.</p> </body> </html>
運(yùn)行實例 ?
點擊 "運(yùn)行實例" 按鈕查看在線實例
![]() | 我們將在下面的章節(jié)為您解釋例子中的細(xì)節(jié)。 |
---|
改變 HTML 樣式
通過 HTML DOM,您能夠訪問 HTML 元素的樣式對象。
下面的例子改變一個段落的 HTML 樣式:
實例
<html><!DOCTYPE html> <html> <body> <p id="p1">Hello world!</p> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> </body> </html>
運(yùn)行實例 ?
點擊 "運(yùn)行實例" 按鈕查看在線實例
創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素,您首先必須創(chuàng)建該元素(元素節(jié)點),然后把它追加到已有的元素上。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <div id="div1"> <p id="p1">這是一個段落。</p> <p id="p2">這是另一個段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("這是一個新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
運(yùn)行實例 ?
點擊 "運(yùn)行實例" 按鈕查看在線實例