栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在JavaScript中删除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]


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432223.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号