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

  • Z时代
  • 2024-01-10
  • 分类：问答

我将如何删除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答案，则需要加分。

回答：

选项1 A：清算innerHTML。

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

    doFoo.onclick = () => {
    const myNode = document.getElementById(“foo”);
    myNode.innerHTML = ‘’;
    }
    [HTML_REMOVED]
    [HTML_REMOVED]Hello[HTML_REMOVED]
    [HTML_REMOVED]
    [HTML_REMOVED]Remove via innerHTML[HTML_REMOVED]

选项1 B：清算 textContent

如上，但使用.textContent。根据MDN的说法，这将比innerHTML浏览器不会调用其HTML解析器，而将立即用单个#text节点替换元素的所有子代更快。

    doFoo.onclick = () => {
    const myNode = document.getElementById(“foo”);
    myNode.textContent = ‘’;
    }
    [HTML_REMOVED]
    [HTML_REMOVED]Hello[HTML_REMOVED]
    [HTML_REMOVED]
    [HTML_REMOVED]Remove via textContent[HTML_REMOVED]

选项2 A：循环删除以下所有内容lastChild：

早先对此答案进行了修改firstChild，但已更新lastChild为在计算机科学中使用， 通常来说 ，删除集合的 最后一个 元素比删除第 一个 元素要快得多（具体取决于集合的实现方式） ）。
循环将继续检查，firstChild 以防万一 其检查速度firstChild比lastChild（例如，如果UA将元素列表实现为有向链接列表）。

    doFoo.onclick = () => {
    const myNode = document.getElementById(“foo”);
    while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
    }
    }
    [HTML_REMOVED]
    [HTML_REMOVED]Hello[HTML_REMOVED]
    [HTML_REMOVED]
    [HTML_REMOVED]Remove via lastChild-loop[HTML_REMOVED]

选项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);
    }
    }
    [HTML_REMOVED]
    [HTML_REMOVED]
    [HTML_REMOVED]Hello [HTML_REMOVED][HTML_REMOVED]
    [HTML_REMOVED]
    [HTML_REMOVED]
    [HTML_REMOVED]Remove via lastElementChild-loop[HTML_REMOVED]

奖励：Element.clearChildren猴子补丁：

我们可以在新的方法，属性添加到ElementJavaScript中的原型简化它调用只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);
      }
    });
    }
    [HTML_REMOVED]
    [HTML_REMOVED]Hello [HTML_REMOVED][HTML_REMOVED]
    [HTML_REMOVED]
    [HTML_REMOVED]Remove via monkey-patch[HTML_REMOVED]

以上是 在JavaScript中删除DOM节点的所有子元素 的全部内容， 来源链接： utcz.com/qa/435321.html

回到顶部