Manuel de référence HTML DOM chinois
/ HTML DOM - 修改
HTML DOM - 修改
修改 HTML = 改變?cè)亍傩浴邮胶褪录?/p>
修改 HTML 元素
修改 HTML DOM 意味著許多不同的方面：
改變 HTML 內(nèi)容
改變 CSS 樣式
改變 HTML 屬性
創(chuàng)建新的 HTML 元素
刪除已有的 HTML 元素
改變事件（處理程序）
在接下來的章節(jié)，我們會(huì)深入學(xué)習(xí)修改 HTML DOM 的常用方法。
創(chuàng)建 HTML 內(nèi)容
改變?cè)貎?nèi)容的最簡(jiǎn)單的方法是使用 innerHTML 屬性。
下面的例子改變一個(gè) <p> 元素的 HTML 內(nèi)容：
實(shí)例
<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)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
 | 我們將在下面的章節(jié)為您解釋例子中的細(xì)節(jié)。 |
|---|
改變 HTML 樣式
通過 HTML DOM，您能夠訪問 HTML 元素的樣式對(duì)象。
下面的例子改變一個(gè)段落的 HTML 樣式：
實(shí)例
<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)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
創(chuàng)建新的 HTML 元素
如需向 HTML DOM 添加新元素，您首先必須創(chuàng)建該元素（元素節(jié)點(diǎn)），然后把它追加到已有的元素上。
實(shí)例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<div id="div1">
<p id="p1">這是一個(gè)段落。</p>
<p id="p2">這是另一個(gè)段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個(gè)新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例