4

（最初の質問がひどく定式化された後、もう一度質問します）

私は次の問題に直面しています：

<div class="testA" id="test1"></div>

上記の要素は事前定義されています。XMLHttpRequest＆Co。を介してxmlツリーをロードし、次の応答を返します。

<response>
    <div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>
</response>

div私は今、最初の使用を追加します

request.responseXML.getElementsByTagName("response")[0]
                       .getElementsByTagName("div")[0]

事前定義されたdiv

<div class="testA" id="test1">

最終的なドキュメントは次のようになります（開発ツールを使用してチェック）。

<div class="testA" id="test1">
    <div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>
</div>

<div class="colorSelector" id="0-0">を使用して要素を取得しようとするとgetElementById("0-0")、期待どおりの結果が得られます。

ただし、を使用するとgetElementsByClassName("colorSelector")戻り値が返されます[]。

私は何か見落としてますか？それはおそらく、ノードがタイプElementであり、そうではなかったという事実の残り物HTMLElementですか？

4

6 に答える 6

3

colorSelectorコメントアウトされています。JavaScriptはDOM内でのみ機能し、コメントアウトされた部分はDOM内にありません。

于 2011-09-30T16:59:34.557 に答える
1

成功したと言ったのでgetElementById("0-0")、明らかにノードは実際にはコメントアウトされていません。

私はあなたがやっていると推測しています：

document.getElementById("0-0").getElementsByClassName('colorSelector');

... IDで選択された要素には、そのクラスの子孫がないため、機能しません。

マークアップにHTMLコメントを表示しているので、IDを持つページに別の要素があるのではないかと思います"0-0"。それを見てください。

ノードが実際にコメント化されている場合は、最初にコメントを選択し、その中に含まれているマークアップに置き換える必要があります。

var container = document.getElementById('test1'),
    comment = container.firstChild;

while( comment && comment.nodeType !== 8 ) {
    comment = comment.nextSibling;
}

if( comment ) {
    container.innerHTML = comment.nodeValue;
}

...その結果：

<div class="testA" id="test1">
    <div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>
</div>

...しかし、ここでも、あなたが機能しているので、これはありそうにないようですgetElementsById。

于 2011-09-30T17:16:01.480 に答える
0 
<!--<div class="colorSelector" id="0-0">
        <div class="gbSelector" id="1-0">
            <table style="none" id="2-0"></table>
        </div>
    </div>-->

上記のコードは理由で灰色です：それはコメントです。コメントはブラウザによってまったく解析されず、ページにはまったく影響しません。

HTMLを解析し、コメントを読み、コメントの内容を使用して新しいDOMオブジェクトを作成する必要があります。

于 2011-09-30T17:00:22.140 に答える
0

返された結果で何をしているのか説明してください。nodeListとノードの間には大きな違いがあります。nodeListsはLIVEです。

したがって、getElementsByClassName()（または同様の）によって返されるnodeListを変数に割り当てると、nodeList内のノードをDOMから削除すると、この変数が変更されます。

于 2011-09-30T17:57:02.683 に答える
0

最初のdivを追加します

どうやってそれをしますか？にあるのresponseXMLはXML要素であり、HTML要素ではありません。

  • appendChildそれらを非XHTMLHTMLドキュメントに変換することはできません。

  • 実際には、appendChildそれらを別のドキュメントに入れることはできません。importNodeあるドキュメントから別のドキュメントに要素を取得するために使用することになっています。そうでない場合は、WRONG_DOCUMENT_ERR;を取得する必要があります。

  • ブラウザの緩みのためにHTMLに挿入できたとしても、それらはXML要素であり、意味的にはHTML要素ではありません。したがって、class属性について特別なことは何もありません。その名前を持っているだけでは、属性が実際にクラスを表すわけではありません。名前getElementsByClassNameが付いた属性があるという理由だけで要素を返しません。それらは、言語定義が属性をクラスネスの概念（一般にHTML、XHTML、またはSVGを意味する）に関連付ける要素である必要があります。 class

（属性についても同じことが言えidます。属性を呼び出すだけでは、id概念的には機能しませんID。したがって、機能しないgetElementByIdはずです。任意のXML属性をID-nessに関連付ける方法がありますが、これは取得できません。クラス性を備え<!ATTLIST、doctypeで宣言を使用します。ただし、通常は気にする価値はありません。またxml:id、XML IDをサポートする実装では、特殊なケースもあります。）

xmlnsネイティブXHTMLページを使用している場合は、コンテンツに適切な属性を設定して、任意のXMLだけでなく実際のXHTMLにし、を使用することで、機能させることができる可能性がありますimportNode。しかし、一般的に、これは価値がありません。HTMLマークアップ文字列（通常はJSON）、またはクライアント側のスクリプトがHTML要素自体を構築できる生のXMLデータを返す方が簡単な傾向があります。

于 2011-09-30T19:59:30.400 に答える
0

Firefox、Opera、Chrome、Safariでこれを行う方法は次のとおりです。基本的には、div.innerHTML = div.innerHTMLを実行して、コンテンツをHTMLとして再解釈します。これにより、XMLファイルのクラス属性がHTMLクラス名として扱われます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.addEventListener("DOMContentLoaded", function() {
                var div = document.getElementsByTagName("div")[0];
                var req = new XMLHttpRequest();
                req.onreadystatechange = function() {
                    if (this.readyState === 4 && this.status === 200) {
                        var doc = this.responseXML;
                        div.appendChild(document.importNode(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0], true));
                        div.innerHTML = div.innerHTML;
                        alert(document.getElementsByClassName("colorSelector").length);
                    }
                };
                req.open("GET", "div.xml");
                req.send();
            }, false);
        </script>
    </head>
    <body>
        <div class="testA"></div>
    </body>
</html>

xhrをローカルでサポートするブラウザーでローカルでテストしている場合は、this.status===200を削除してください。

importNode（）関数はIEでは機能しないようです（たとえば9）。漠然とした「インターフェイスがサポートされていません」というエラーが表示されます。

次のようにすることもできます。

var doc = this.responseXML;
var markup = (new XMLSerializer()).serializeToString(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0]);
div.innerHTML = markup;

空の要素の終了タグに関する限り、マークアップがHTML対応である限り。

于 2011-09-30T20:10:43.360 に答える