javascript 如何使用 getElementsByTagName() 查找所有嵌套元素?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3783866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 02:13:28  来源:igfitidea点击:

How to use getElementsByTagName() to find all nested elements?

javascriptdomgreasemonkey

提问by Duncan Bayne

I have the following HTML:

我有以下 HTML:

<html>
  <head><title>Title</title></head>
  <body>
    <div id='div2'>
      <a href='#'>1</a>
      <div id='div1'>
        <a href='#'>2</a>
      </div> 
    </div>

  </body>
</html>

... and the following Javascript code, which I'm running through Greasemonkey:

...以及以下我正在通过 Greasemonkey 运行的 Javascript 代码:

var nodes = document.body.getElementsByTagName('a');
for (var i = 0; i < nodes.length; i++) {
  var node = nodes[i];
  node.parentNode.removeChild(node);    
}

I would expect it to find and remove all A tags; instead it finds the first, but not the second. As far as I can tell it's having difficulty with the way the second A tag is nested.

我希望它找到并删除所有 A 标签;相反,它找到第一个,而不是第二个。据我所知,第二个 A 标签的嵌套方式有困难。

Could someone please let me know how to remove all the tags, using getElementsByTagName? There are reasons I'd prefer not to use XPath if at all possible.

有人可以让我知道如何使用 getElementsByTagName 删除所有标签吗?如果可能的话,有一些原因我宁愿不使用 XPath。

回答by Brock Adams

Capture the length and remove in reverse order. This will eliminate side effects.

捕获长度并以相反的顺序删除。这将消除副作用。

var nodes = document.body.getElementsByTagName('a');

for (var J=nodes.length-1;  J >= 0;  J--) //-- Kill the last, first, to avoid orphan problems.
{
    var node    = nodes[J];
    if (node)
    {
        node.parentNode.removeChild (node);
    }
}

But a better way...
Add this directive to your header:

但更好的方法...
将此指令添加到您的标题中:

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

Then your whole code becomes:

然后你的整个代码变成:

$("a").remove ();

回答by Macsek

The mistake you had was to delete the node then skip to the next element. Deleting the very first one (#0) causes the second become the 1st.

您所犯的错误是删除节点然后跳到下一个元素。删除第一个 (#0) 会导致第二个成为第一个。

var nodes = document.body.getElementsByTagName('a');
for (var i = 0; i < nodes.length; i++) {
  var node = nodes[0]; // fixed 0 here, as opposed to i
  node.parentNode.removeChild(node);    
}

回答by Jamie Wong

Following Vinay's answer:

按照维奈的回答:

var nodes = document.body.getElementsByTagName('a');
while(nodes.length > 0) {
  nodes[0].parentNode.removeChild(nodes[0]);
}

Since using a for loop like that is bizarre if you aren't actually using the iterator for anything.

因为如果您实际上没有将迭代器用于任何事情,那么使用这样的 for 循环是很奇怪的。

回答by Vinay B R

change your code to

将您的代码更改为

var nodes = document.body.getElementsByTagName('a');
for (var i = 0; nodes.length > 0; i++) {
    var node = nodes[0];
    node.parentNode.removeChild(node);    
}

nodes.length gets evaluated everytime you remove a child.

每次移除一个孩子时,nodes.length 都会被评估。