首页 \ 问答 \ 在DOM深层获取评论节点(Get comment nodes in DOM deep level)

在DOM深层获取评论节点(Get comment nodes in DOM deep level)

如何获得包含DOM中所有注释元素的数组或类数组(JQuery对象)? JQuery contents()只检索1个级别的元素。

更广泛的问题:我需要删除DOM中2个文本注释之间的所有元素。 评论也可以在子元素中。

...html code...
<!--remove from here-->
...code...
<!--finish removing-->
...html code...

所以在该方法之后,HTML DOM应该如下所示:

...html code...
...html code...

谢谢。


How can I get an array or array-like (JQuery object) containing all the comment elements in the DOM? JQuery contents() only retrieve 1 level elements.

The broader problem: I need to remove all the elements between 2 text comments in my DOM. Comments can also be in child elements.

...html code...
<!--remove from here-->
...code...
<!--finish removing-->
...html code...

So after the method, HTML DOM should look like:

...html code...
...html code...

Thanks.


原文:https://stackoverflow.com/questions/31966118
更新时间:2021-09-14 12:09

最满意答案

您可以将TreeWalkerwhatToShow设置为NodeFilter.SHOW_ALL一起使用,以查看文档中的所有节点。

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ALL,
  null,
  false
);

var commentList = [];

while (treeWalker.nextNode()){
  // keep only comments
  if (treeWalker.currentNode.nodeType === 8) 
    commentList.push(treeWalker.currentNode);
}

var node;
while (node !== commentList[1]) {
  node = commentList[0].nextSibling;
  node.parentElement.removeChild(node);
}
<!--Folowing element will be deleted-->
<span> Hello world</span>
<!-- the next one should be kept -->
<span> keep me !</span>


You can use TreeWalker with whatToShow set to NodeFilter.SHOW_ALL to see all nodes on your document.

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ALL,
  null,
  false
);

var commentList = [];

while (treeWalker.nextNode()){
  // keep only comments
  if (treeWalker.currentNode.nodeType === 8) 
    commentList.push(treeWalker.currentNode);
}

var node;
while (node !== commentList[1]) {
  node = commentList[0].nextSibling;
  node.parentElement.removeChild(node);
}
<!--Folowing element will be deleted-->
<span> Hello world</span>
<!-- the next one should be kept -->
<span> keep me !</span>

相关问答

更多
  • 您可以将TreeWalker与whatToShow设置为NodeFilter.SHOW_ALL一起使用,以查看文档中的所有节点。 var treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_ALL, null, false ); var commentList = []; while (treeWalker.nextNode()){ // keep only comments ...
  • DOM 0级事件基于在DOM元素上使用元素属性或命名事件的概念,例如: 要么 input.onclick = function() { ... }; 通过DOM Level 2,我们现在有了一个更加标准化的方法来管理事件和订阅,使用addEventListener , removeEventListener等。 你可以在这里阅读更多 直到IE8,微软才将支持事件管理的W3C标准支持到他们的浏览器。 不知道他们叫什么 ...
  • 我认为你提到的“隐藏角色”的概念并不准确。 事情是nextSibling 从字面上返回dom上的下一个兄弟,这并不意味着它将成为dom上的下一个元素 。 如果您想尝试,请移除所有换行符并重试,或者直接使用nextElementSibling 。 I think that the concept of "hidden characters" that you mention is not accurate. The thing is that nextSibling returns literally the ...
  • 不,您需要使用低级DOM方法来创建新节点。 你确定你使用的是正确的方法吗? 是否可以在XSLT中更轻松地编写整个应用程序? 即使您想使用基于Java树的API,为什么还有DOM,与后续的树模型(如JDOM和XOM)相比,它是如此缓慢和笨拙? No, you will need to use low-level DOM methods to create new nodes. Are you sure you are using the right approach? Could the whole appl ...
  • 像这样的Smth通过引入一些顶级父指令与几个子指令结合来完成。 子指令需要父指令,因此他们可以使用父控制器。 HTML:
    1
    2 指示: app.directive('mydir', function() { return { require : '^main', link : function(scope, el, ...
  • 这在规范中定义 。 元素节点的nodeValue为null 。 DOMString类型的nodeValue :此节点的值,具体取决于其类型; 见上表。 如果将其定义为null,则将其设置为无效。 如果要获取每个节点的文本内容,则必须遍历所有文本节点后代并连接它们的值。 也就是说,您正在使用的API实现可能提供一种方法来直接检索元素的文本内容。 例如,PHP的DOMNode具有$textContent属性。 如果在您的情况下,元素的唯一子节点实际上是您想要的文本节点,则可以简单地访问其值: element.g ...
  • 最后我得到了一个解决方案。 诀窍是使用node.getNextSibling() 下面的代码获取所有menu标签,然后读取它们的title Tag并将其添加到Arraylist。 private void diveDeep(int index) { currentNode = (Node)currentNodes.get(index); currentNodes = new ArrayList(); valueList = new ArrayList() ...
  • 是的,这是安全的。 DOM对象不会被浏览器取代,它们是相当稳定的对象。 我自己经常使用WeakMaps将数据绑定到元素而没有问题( 例子 )。 Yes, this is safe. DOM objects aren't replaced by the browser, they're fairly stable objects. I myself frequently use WeakMaps to bind data to elements without problems (example).
  • 第一步是从当前选择中获取范围。 要做到这一点,只需致电: var ranges = editor.getSelection().getRanges(); 这为您提供了一系列范围,因为理论上(这个理论仅由Firefox证明),一个选择可以包含许多范围。 但在99%的现实案例中,您可以处理第一个案例并忽略其他案例。 所以你有range 。 现在,迭代此范围内每个节点的最简单方法是使用CKEDITOR.dom.walker 。 以这种方式使用它: var walker = new CKEDITOR.dom.wa ...

相关文章

更多

最新问答

更多
  • 如何避免iPhone应用程序泄漏?(How to avoid leaking in iPhone application?)
  • Rails引擎:在哪里定义仅用于测试的gems(Rails Engines: Where to define gems only used in testing)
  • 如何在android中的texviews中随机设置文本?(How to randomly settext in textviews in Android?)
  • PHP函数 - 用.00清理数字(PHP Function - cleaning up numbers with .00)
  • 如何在WPF中数据绑定到IGrouping?(How do I databind to a IGrouping in WPF?)
  • 在更新语句中增加时是否存在并发问题[复制](Are there concurrency issues when incrementing in update statement [duplicate])
  • RabbitMQ与NodeJS Addon for C ++应用程序集成(RabbitMQ vs NodeJS Addon for C++ Application Integration)
  • 使用CoreData执行乘法(聚合):如何?(Performing multiplication (aggregation) with CoreData: how to?)
  • 如何在Android中按位置显示Listview中的项目(How to display Item from a Listview by position in Android)
  • 无效的命令ProxyRequests设置jenkins时(Invalid command ProxyRequests when setting up jenkins)
  • C#,MySQL - 从表中检索行并在方法中填充变量,然后将Add()方法填充到List <>(C#, MySQL - Retrieve row from table and populate variables in method then Add() method to List<>)
  • 如何从内部拒绝承诺功能(How to reject a promise from inside then function)
  • javadoc for String [] args(javadoc for String[] args)
  • Laravel格式查询json结果(Laravel format query json result)
  • ImageIO - 从加载的图像中获取图像宽度和高度(ImageIO - get image Width and Height from loaded image)
  • 如何在Windows 7中批量重命名文件名,以便它们在结尾处具有数字顺序?(How do I batch-rename filenames in windows 7, so that they have numerical order at the end of them?)
  • 限制用户在Apple应用商店中撰写有关该应用的评论(Restrict user to write review about the app at Apple app store)
  • 亚马逊Kindle Fire中的java.lang.OutOfMemoryError(java.lang.OutOfMemoryError in Amazon Kindle Fire)
  • 如何使用C#在python中将字符串作为命令行参数传递(How to pass string as command line argument in python using C#)
  • 发生操作时使用ngrx-effect调用服务(Use ngrx-effect to call a service when an action occurs)
  • 在Android应用程序中集成所有社交资源(Integrating All Social Feeds In an Android App)
  • 哪些对象需要产前诊断?
  • 在React模板渲染上调用函数(Call function on React template render)
  • 如何将图标添加到SlidingTabLayout?(How to add Icons to SlidingTabLayout?)
  • 根据给定的数字数组创建一个几乎唯一的标识符(Create an almost unique identifier based on a given array of numbers)
  • 使用样式标签更改鼠标上方的文本颜色(Change text color on mouse over using the style tag)
  • Ruby String#{}不起作用(Ruby String #{} doesn't work)
  • 字符串和指针(Strings and pointers)
  • 中小学教师信息技术应用能力提升全员培训要求教师每五年不少于学时的培训标
  • 无法传递函数值来设置数组大小C ++(Can't pass a function value to set an array size C++)