如何将整个HTML文档作为一个字符串获取，但排除某些元素？

Question

如何将整个HTML文档作为一个字符串获取，但排除某些元素？

4

我正在寻找一种方法，以字符串形式获取整个HTML文档，但不包括一些项目（可能带有名为“exclude”的className）。我知道可以使用document.documentElement.innerHTML或document.documentElement.outerHTML或document.getElementsByTagName('html')[0].innerHTML获取整个文档。

然而，我仍在苦苦挣扎，如何在获取innerHTML之前排除某些节点（例如具有共同className的按钮、div或任何其他标签）？

- Mick M

3

你需要从 DOM 中移除不必要的元素。 - Pointy

3个回答

0

你可以在 HTML 块上使用 querySelector() 以及 :not() CSS 选择器，来排除其中不需要的元素。

var content = document.getElementsByTagName('html')[0]
var selection = content.querySelectorAll('*:not(.ignore)');

然后只需使用outerHTML从您的selection中获取整个内容：

var htmlString = selection[0].outerHTML;

否则，您可以循环遍历selection元素，并将每个元素的HTML附加到您的结果string中：

var htmlString = "";
selection.forEach(function(el) {
  htmlString += el.innerHTML;
});

演示：

var content = document.getElementsByTagName('html')[0]
var selection = content.querySelectorAll('*:not(.ignore)');

//Then log the selection content
console.log(selection[0].outerHTML);

//Or maybe loop throught the elements and get their contents
var htmlString = "";
selection.forEach(function(el) {
  htmlString += el.innerHTML;
});

console.log(htmlString);

注意：

在此演示中未使用ignore类的元素，但您可以随时添加并测试。
您可以看到这也将保留所有HTML元素，包括scripts和styles标签。

- cнŝdk

嗨，谢谢你的回复。我刚刚测试了你建议的方法，似乎选择确实省略了标记有该className的项目；但是，selection [0] .outerHTML仅返回<head>。我做错了什么吗？ - Mick M

@MickM，你可以制作一个片段演示吗？或者使用fiddle，这样我们就可以看到你的实际代码。 - cнŝdk

0

我知道我来晚了，但这是我的贡献，我使用了chŝdk的想法来实现它。

let markup = document.querySelectorAll('*:not(.exclude)')[0].innerHTML;

console.log("Data Type: " + typeof(markup));
console.log(markup);

<center>
  <div>Hello World</div>
  <div class="exclude">Hello World [Exclude Me]</div>
  <div>Hello World</div>
  <div>Hello World</div>
  <div>Hello World</div>
  <div class="exclude">Hello World [Exclude Me]</div>
  <div class="exclude">Hello World [Exclude Me]</div>
  <div>Hello World</div>
  <div>Hello World</div>
  <div class="exclude">Hello World [Exclude Me]</div>
</center>

- Alex

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

我会把整个树克隆一遍，然后删除你不需要的元素：

var clone = document.body.cloneNode(true);
clone.querySelectorAll(".exclude").forEach(function(element) {
    element.parentNode.removeChild(element);
});
var html = clone.outerHTML;

请注意，这假设body本身没有exclude类。

示例：

var clone = document.body.cloneNode(true);
// Snippet-specific: Also remove the script
clone.querySelectorAll(".exclude, script").forEach(function(element) {
    element.parentNode.removeChild(element);
});
var html = clone.outerHTML;
console.log(html);

<div>
  I want this
  <div>And this</div>
</div>
<div class="exclude">
  I don't want this
  <div>Or this, since its parent is excluded</div>
</div>