javascript - 在 JavaScript 中删除 DOM 节点的所有子元素

Question

如何在 JavaScript 中删除 DOM 节点的所有子元素？

假设我有以下(丑陋的)HTML:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

然后我像这样捕获我想要的节点:

var myNode = document.getElementById("foo");

如何删除 foo 的子级所以只有 <p id="foo"></p>还剩吗？

我可以这样做吗:

myNode.childNodes = new Array();

或者我应该使用removeElement 的某种组合吗？ ?

我希望答案是直接的 DOM；如果您还提供了 jQuery 中的答案以及仅 DOM 的答案，则会加分。

Answer 1

选项 1 A:清算 innerHTML .

• 这种方法很简单，但可能不适合高性能应用程序，因为它会调用浏览器的 HTML 解析器(尽管浏览器可能会针对值为空字符串的情况进行优化)。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

选项 1 B:清除 textContent

• 同上，但使用 .textContent . According to MDN这将比 innerHTML 更快因为浏览器不会调用它们的 HTML 解析器，而是立即用单个 #text 替换元素的所有子元素。节点。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

选项 2 A:循环删除每个 lastChild :

• 对此答案的早期编辑使用了 firstChild ，但已更新为使用 lastChild与计算机科学一样，一般，删除集合的 last 元素比删除第一个元素要快得多(取决于集合的实现方式)。
• 循环继续检查 firstChild 以防万一检查 firstChild 会更快比 lastChild (例如，如果元素列表由 UA 实现为有向链表)。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

选项 2 B:循环删除每个 lastElementChild :

• 这种方法保留了所有非 Element (即 #text 节点和 <!-- comments --> )父级(但不是它们的后代)的子级 - 这在您的应用程序中可能是可取的(例如，一些使用内联 HTML 注释来存储模板指令的模板系统)。
• 直到最近几年才使用这种方法，因为 Internet Explorer 只增加了对 lastElementChild 的支持。在 IE9 中。

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

奖金:Element.clearChildren猴子补丁:

• 我们可以在 Element 中添加一个新的方法属性。 JavaScript 中的原型(prototype)，以简化对它的调用，只需 el.clearChildren() (其中 el 是 任何 HTML 元素对象)。
• (严格来说，这是一个猴子补丁，而不是 polyfill，因为这不是标准的 DOM 功能或缺失的功能。请注意，在许多情况下不鼓励使用猴子补丁。)

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}

<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>