Question

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

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

Answer 1

我可能会克隆整棵树，然后删除不需要的元素：

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>

Answer 2

好吧，您可以在HTML块上使用 querySelector() 和 :not() css selector ，从其中排除不需要的元素。

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标签。

Answer 3

我知道我参加晚会很晚，但这是我的贡献，我已经使用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>

如何将整个HTML文档作为不包含某些元素的字符串获取？

3 个答案: