HTML DOM节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

创建新的 HTML 元素

• 一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

  一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

  一些 DOM 对象方法

  方法	描述
  getElementById()	返回带有指定 ID 的元素。
  getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
  getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
  appendChild()	把新的子节点添加到指定节点。
  removeChild()	删除子节点。
  replaceChild()	替换子节点。
  insertBefore()	在指定的子节点前面插入新的子节点。
  createAttribute()	创建属性节点。
  createElement()	创建元素节点。
  createTextNode()	创建文本节点。
  getAttribute()	返回指定的属性值。
  setAttribute()	把指定属性设置或修改为指定的值。

  
  

  如需向 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>