第二个 Instagram 按钮的 CSS 属性

Question

Streammer

Asked:2022-04-01 01:19:48 +0000 UTC2022-04-01 01:19:48 +0000 UTC 2022-04-01 01:19:48 +0000 UTC

找到页面上所有的<a>标签并删除它们，内容（<a></a>之间的内容）应该保留

我需要找到所有标签。在 html 页面上，删除所有标签本身，并保持内容不变。据我了解，您可以找到每个标签的父标签并删除子标签。我可以获取所有 DOM 节点的数组并遍历它们，但是在这种情况下如何获取父节点？还是我爬错了草原？

user347472 · Answer 1 · 2022-04-01T02:18:05Z

Best Answer

user347472

document.querySelectorAll('a').forEach( link => {
  link.outerHTML = link.innerHTML;
});

<a href="#">123</a>
<div>
  <a href="#">456 <span>789</span></a>
</div>
<p>ABC</p>
<p>
  <a href="#">DEF<br>XYZ</a>
</p>

请注意，通过这种方式，更改 HTML 会创建新元素，而不会移动旧元素。如果旧元素有任何通过 JS 设置的属性，它们将丢失。例如div.myProperty = 123;，删除。

以下代码中不存在此缺点，它将元素移出链接：

document.querySelectorAll('a').forEach( link => {
  Array.from(link.childNodes).forEach( childNode => link.before(childNode) );
  link.remove();
});

<a href="#">123</a>
<div>
  <a href="#">456 <span>789</span></a>
</div>
<p>ABC</p>
<p>
  <a href="#">DEF<br>XYZ</a>
</p>