JavaScript HTML DOM 元素（节点）

梦里梦外; 2022-09-29 14:51 342阅读 0赞

# JavaScript HTML DOM 元素（节点） #

--------------------

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

**创建新的 HTML 元素**

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

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

## 删除已有的 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> document.getElementById("p1").innerHTML="New text!"; </script>
    </body>
    </html>

### 改变 HTML 样式 ###

<html>
    
    <body>
    <p id="p2">Hello world!</p>
    
    <script> document.getElementById("p2").style.color="blue"; </script>
    
    </body>
    </html>

### HTML DOM 节点列表 ###

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

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

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

，您可以这么写：

y=x[1];

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

x=document.getElementsByTagName("p");
    
    for (i=0;i<x.length;i++) { document.write(x[i].innerHTML); document.write("<br />");
    }