0

我想从主 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。

4

2 回答 2

2

你的问题有两个部分，你都做错了。

  1. TempPage是同一个对象Page。分配给不同的变量不会产生副本——它只是让您可以通过另一个名称访问同一个对象。您需要显式创建一个副本。
  2. 您获取元素的尝试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 操作。你真的需要学习 DOM 操作

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

function textContent(node) {
    return node.textContent || node.innerText || '';
}
var h2 = document.getElementsByTagName('h2')[0];
var h2Text = textContent(h2);
于 2013-02-20T13:58:21.377 回答
1

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

通过一个变量所做的任何更改都会自动发生在另一个变量上。为了区别对待它们，一个必须是另一个的克隆。 Node.cloneNode可能有用，但未得到广泛支持。您将需要进行深层复制。

于 2013-02-20T13:41:21.660 回答