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)行實例" 按鈕查看在線實例