JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）。

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

"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>

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

替换 HTML 元素

如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：

<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>var parent=document.getElementById("div1");
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>

innerHTML 属性

获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

<html>
<body>

<p id="intro">Hello World!</p>
<script>var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>

childNodes 和 nodeValue

除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。

下面的代码获取 id=”intro” 的

元素的值：

<html>
<body>

<p id="intro">Hello World!</p>

<script>var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素：

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

HTML DOM - 修改

创建 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML 属性

<html>
<body>
<p id="p1">Hello World!</p>
<script>"p1").innerHTML="New text!";
</script>
</body>
</html>

改变 HTML 样式

<html>

<body>
<p id="p2">Hello world!</p>

<script>"p2").style.color="blue";
</script>

</body>
</html>

HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

var x=document.getElementsByTagName("p");

可以通过下标号访问这些节点。如需访问第二个

，您可以这么写：

y=x[1];

您可以使用 length 属性来循环节点列表：

<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br");
}