阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript DOM 元素 (节点)

      JavaScript HTML DOM 元素 (节点)

      本章节介绍如何向文档中添加和移除元素(节点)。

      创建新的 HTML 元素 (节点) - appendChild()

      要创建新的 HTML 元素 (节点)需要先创建一个元素,然后在已存在的元素中添加它。

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

      实例解析

      以下代码是用于创建 p 元素:

      var para = document.createElement("p");
      

      为 p 元素创建一个新的文本节点:

      var node = document.createTextNode("这是一个新的段落。");
      

      将文本节点添加到 p 元素中:

      para.appendChild(node);
      

      最后,在一个已存在的元素中添加 p 元素。

      查找已存在的元素:

      var element = document.getElementById("div1");
      

      添加到已存在的元素中:

      element.appendChild(para);
      

      创建新的 HTML 元素 (节点) - insertBefore()

      以上的实例我们使用了 appendChild() 方法,它用于添加新元素到尾部。

      如果我们需要将新元素添加到开始位置,可以使用 insertBefore() 方法:

      <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");
      var child = document.getElementById("p1");
      element.insertBefore(para, child);
      </script>
      

      移除已存在的元素

      要移除一个元素,你需要知道该元素的父元素。

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

      **注意:**早期的 Internet Explorer 浏览器不支持 node.remove() 方法。

      实例解析

      HTML 文档中 div 元素包含两个子节点 (两个 p 元素):

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

      查找 id=“div1” 的元素:

      var parent = document.getElementById("div1");
      

      查找 id=“p1” 的 p 元素:

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

      从父元素中移除子节点:

      parent.removeChild(child);
      

      如果能够在不引用父元素的情况下删除某个元素,就太好了。

      不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。

      以下代码是已知要查找的子元素,然后查找其父元素,再删除这个子元素(删除节点必须知道父节点):

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

      替换 HTML 元素 - replaceChild()

      我们可以使用 replaceChild() 方法来替换 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 parent = document.getElementById("div1");
      var child = document.getElementById("p1");
      parent.replaceChild(para, child);
      </script>
      

      HTML DOM 教程

      在我们的 JavaScript 教程的 HTML DOM 部分,您已经学到了:

      • 如何改变 HTML 元素的内容 (innerHTML)
      • 如何改变 HTML 元素的样式 (CSS)
      • 如何对 HTML DOM 事件作出反应
      • 如何添加或删除 HTML 元素
      目录
      目录