HTML DOM 之一：访问、修改、删除HTML内容

什么是 DOM？

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

编者注：DOM 是 Document Object Model（文档对象模型）的缩写。

1、getElementById

<!DOCTYPE html>
<html>
<body>
 
<p id="intro">Hello World!</p>
<p> DOM很有用 </p>
 
<p style="color: red; margin-left: 20px">
1、getElementById的例子开始：
</p>
<!--getElementById-->
<script>
x=document.getElementById("intro");
document.write("innnerHTML="+x.innerHTML);
document.write("<p></p>");
document.write("firstChild.nodeValue="+x.firstChild.nodeName);
document.write("<p></p>");
document.write("firstChild.nodeValue="+x.firstChild.nodeValue);
document.write("<p></p>");
document.write("firstChild.nodeType="+x.firstChild.nodeType);
document.write("<p></p>");
</script>
 
</body>
</html>

2、getElementsByTagName

<!DOCTYPE html>
<html>
<body>
 
<p style="color: green; margin-left: 20px">
2、getElementsByTagName的例子开始：
</p>
<!--getElementsByTagName-->
<script>
x=document.getElementsByTagName("p");
document.write("x[1].innerHTML="+x[0].innerHTML);
</script>
 
 
<div id="main">
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
 
<script>
x=document.getElementById("main").getElementsByTagName("p");
document.write("div 中的第一段的文本: " + x[0].innerHTML);
</script>
</body>
</html>

3、修改HTML元素

<!DOCTYPE html>
<html>
<body>
 
<p style="color: rgb(0,0,255); margin-left: 20px">
3、修改 HTML 元素的例子开始
</p>
<!--修改 HTML 元素-->
<p id="p1">Hello World!</p>
 
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
 
<p style="color: rgb(255,255,0); margin-left: 20px">
 
</body>
</html>

4、向HTML DOM中添加新元素

<!DOCTYPE html>
<html>
<body>
 
<p style="color: rgb(255,255,0); margin-left: 20px">
4、向 HTML DOM 添加新元素的例子开始
</p>
<!--向 HTML DOM 添加新元素-->
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<!--如需向 <p> 元素添加文本，您首先必须创建文本节点，
然后您必须向 <p> 元素追加文本节点，
最后，您必须向已有元素追加这个新元素。
-->
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
 
var element=document.getElementById("div1");
element.appendChild(para);
</script>
 
</body>
</html>

5、删除HTML元素

<!DOCTYPE html>
<html>
<body>
 
<p style="color: rgb(0,255,255); margin-left: 20px">
5、删除已有的 HTML 元素的例子开始
</p>
<div id="div2">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var parent=document.getElementById("div2");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
 
</body>
</html>

提示：能否在不引用父元素的情况下删除某个元素？

很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。

这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

6、替换元素

<!DOCTYPE html>
<html>
<body>
 
<p style="color: rgb(0,255,255); margin-left: 20px">
6、替换元素的例子开始
</p>
<div id="div3">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
 
<script>
var parent=document.getElementById("div3");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>
 
</body>
</html>