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

あなたの質問には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は同じ要素ですが、2 つの異なる変数がそれを指しています。

1 つの変数を介して行われた変更は、他の変数にも自動的に適用されます。それらを異なる方法で扱うには、一方が他方のクローンでなければなりません。 Node.cloneNode役立つかもしれませんが、広くサポートされていません。ディープコピーを作成する必要があります。

于 2013-02-20T13:41:21.660 に答える