1

私は実際に (AJAX ベースの) サイドバー ガジェットを作成しており、AJAX リクエストから単一の要素を抽出する方法を探しています。

私がまだ見つけた唯一の方法は、そのようなことをすることでした:

var temp = document.createElement("div");
temp.innerHTML = HttpRequest.innerText;
document.body.appendChild(temp);
temp.innerHTML = document.getElementByID("WantedElement").innerText;

しかし、それはかなり醜いです。実際のドキュメントに追加せずに、リクエストから直接 WantedElement を抽出したいと思います...

ありがとうございました！

4

5 に答える 5

1

データを管理している場合は、その方法がおそらく最善の方法です。ここでの他の回答には利点がありますが、すべてかなり欠陥があります。たとえば、この querySelector()メソッドは、ホスト マシン上で IE8 モードで実行されている Windows デスクトップ ガジェットでのみ使用できます。正規表現は、HTML の解析には特に信頼性が低く、使用しないでください。

データを管理していない場合、またはデータが安全なプロトコルを介して転送されていない場合は、コードの美学よりもセキュリティに注意する必要があります。サニタイズされていない HTML をドキュメントに挿入します。ガジェットはユーザーまたは管理者レベルの権限で実行されるため、信頼できないソース/ MITMスクリプト インジェクションによる明らかなセキュリティ リスクがあり、実行中のマシンに悪意のあるスクリプトが大混乱をもたらす穴が残されます。

htmlfile考えられる解決策の 1 つは、 ActiveXObjectを使用することです。

function getElementFromResponse(divId)
{
    var h = new ActiveXObject("htmlfile");
    h.open();

    // disable activex controls
    h.parentWindow.ActiveXObject = function () {};

    // write the html to the document
    h.write(html);

    h.close();
    return h.getElementById("divID").innerText;
}

IE8 の方法を利用することもできtoStaticHTML()ますが、ガジェットは IE8 モードで実行する必要があります。

于 2010-04-10T21:21:25.533 に答える
0

この場合、 getElementById を使用して要素を検索するのは良い方法ではないと思います。これは、使用するために必要な追加の手順があるためです。要素を DIV でラップし、DOM に挿入し、getElementById を使用して要素を検索し、挿入された DIV を DOM から削除します。

DOM 操作はコストが高く、インジェクションによって不要なリフローが発生する可能性もあります。問題は、ドキュメントに挿入せずにクエリを実行できるようにする element.getElementById ではなく、document.getElementById があることです。

これを解決するために、querySelector を使用することは、はるかに簡単な明白な解決策です。それ以外の場合は、要素にクラスが定義されている場合は、getElementsByClassName を使用することをお勧めします。

getElementsByClassName は ELEMENT で定義されているため、要素を DOM に注入しなくても使用できます。

お役に立てれば。

于 2010-04-11T23:16:44.537 に答える
0

非表示の div 内に XMLHttpRequest からの応答を追加し、呼び出しgetElementByIdて目的の要素を取得できます。作業が完了したら、後で div を削除します。または、これを処理する関数を作成することもできます。

function addNinjaNodeToDOM(html) {
    var ninjaDiv = document.createElement("div");
    ninjaDiv.innerHTML = html;
    ninjaDiv.style.display = 'none';
    return ninjaDiv;
}

var wrapper = addNinjaNodeToDOM(HttpRequest.innerText);
var requiredNode = wrapper.getElementById("WantedElement");
// do something with requiredNode
document.body.removeChild(wrapper); // remove when done

DOM に追加する唯一の理由getElementByIdは、DOM ツリーの一部でないと機能しないためです。MDCを参照してください。

ただし、デタッチされた DOM ノードでセレクターと XPath クエリを実行することはできます。これにより、要素を DOM に追加する必要がなくなります。

var superNinjaDiv = document.createElement('div');
superNinjaDiv.innerHTML = html;
var requiedNode = superNinjaDiv.querySelector("[id=someId]");
于 2010-04-10T18:52:56.523 に答える
0

1 つのオプションは、正規表現を使用することです。

var str = response.match(/<div id="WantedElement">(.+)<\/div>/);
str[0]; // contents of div

ただし、サーバーの応答がより複雑な場合は、応答にJSONなどのデータ形式を使用することをお勧めします。そうすれば、クライアント側で解析する方がはるかにきれいになります。

于 2010-04-10T18:13:27.717 に答える
-1

AJAX リクエストを介して HTML を渡すのは少し珍しいことです。通常、クライアントが直接評価できる JSON 文字列を渡し、それを操作します。

そうは言っても、JavaScript で HTML をクロスブラウザーで解析する方法はないと思いますが、Mozilla の派生物でそれを行う方法は次のとおりです。

var r = document.createRange();
r.selectNode(document.body);
var domNode = r.createContextualFragment(HTTPRequest.innerText);
于 2010-04-10T18:22:01.957 に答える