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

发布于 2024-09-24 13:50:30 字数 721 浏览 5 评论 0原文

我有以下 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>

... 和以下 Javascript 代码，我正在通过 Greasemonkey: 运行这些代码：

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

我希望它能够找到并删除所有 A 标签；相反，它找到第一个，但找不到第二个。据我所知，第二个 A 标签的嵌套方式有困难。

有人可以让我知道如何使用 getElementsByTagName 删除所有标签吗？如果可能的话，我宁愿不使用 XPath，这是有原因的。

原文

I have the following 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:

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自演自醉 2024-10-01 13:50:30

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

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);
    }
}

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

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

然后您的整个代码将变为：

$("a").remove ();

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 ();

回复收藏 0 原文

放飞的风筝 2024-10-01 13:50:30

按照 Vinay 的回答：

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

如果您实际上没有使用迭代器来执行任何操作，那么使用这样的 for 循环是很奇怪的。

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.

回复收藏 0 原文

她比我温柔 2024-10-01 13:50:30

您犯的错误是删除节点然后跳到下一个元素。删除第一个 (#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);    
}

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.

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);    
}

回复收藏 0 原文

那片花海 2024-10-01 13:50:30

将代码更改为

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

nodes.length，每次删除子项时都会评估长度。

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.

回复收藏 0 原文

~没有更多了~