Question

我想从主DOM的副本中删除一个元素但是我无法让它工作。

基本上我正在尝试从重复的DOM中删除h2元素并在警报中返回修改后的代码，但是到目前为止，我已经尝试过的任何东西，我仍然可以获得原始DOM。

<html>
<head>

</head>

<body>

<h2>Test</h2>

<script type="text/javascript" id="CustomScript">

    var Page = document.documentElement;
    var TempPage = document.documentElement;

    TempPage.removeChild("h2"); // Remove Not working
    TempPage.getElementById("h2").innerHTML = ""; // Remove Not working

</script>

<input type="button" value="Get Pages Code" onclick="alert(TempPage.innerHTML)">

</body>
</html>

如果可能，我宁愿不使用jQuery或YUI等，只想使用常规Javascript。

Answer 1

TempPage和Page是相同的元素，只有两个不同的变量指向它。

通过一个变量进行的任何更改都将自动发生在另一个变量上。要以不同的方式对待它们，必须要克服另一个。 Node.cloneNode可能有用，但没有得到广泛支持。您需要制作深副本。

Answer 2

您的问题分为两个部分，而且这两部分都是错误的。

TempPage与Page是相同的对象。分配给另一个变量不会复制 - 它只是让您通过其他名称访问同一个对象。您需要明确创建副本。
您尝试获取h2元素的方法都不正确。
1. removeChild()无效，因为：
  1. 它需要一个Node对象，而不是一个字符串。
  2. documentElement是<html>元素，但<h2>元素是<body>的子元素，而不是<html>。
2. getElementById()无效，因为您的<h2>元素没有id属性。

你将如何做到这一点：

var TempPage = document.documentElement.cloneNode(true); // copy document
var h2 = TempPage.querySelector('h2'); // find h2 element
h2.parentNode.removeChild(h2);  // remove h2 element

如果querySelector不可用，这将是一项更繁琐的任务，但仍然可以使用正常的DOM操作。你真的需要learn about DOM manipulation

但是，从完整的代码中我无法理解为什么需要克隆页面。就这样做：

function textContent(node) {
    return node.textContent || node.innerText || '';
}
var h2 = document.getElementsByTagName('h2')[0];
var h2Text = textContent(h2);

从DOM副本中删除元素

2 个答案: