從DOM副本中刪除元素

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操作。 你真的需要了解DOM操作

但是，從完整的代碼中我無法理解為什么需要克隆頁面。 這樣做：

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

從DOM副本中刪除元素

問題描述

2 個解決方案

解決方案1
1 2013-02-20 13:41:21

解決方案2
1 已采納 2013-02-20 13:58:21

從DOM副本中刪除元素

問題描述

2 個解決方案

解決方案1 1 2013-02-20 13:41:21

解決方案2 1 已采納 2013-02-20 13:58:21

解決方案1
1 2013-02-20 13:41:21

解決方案2
1 已采納 2013-02-20 13:58:21