HTML DOMを使用して文書内の要素を検索

HTML文書の要素を選択して変更できる必要があります。 jQueryを使用して要素を検索する一般的な方法は、属性、ID、クラスまたは要素のタイプを選択するセレクタを使用することです。私の場合、私は要素のHTML DOMを持っていて、このDOMと一致する要素を私の文書上で見つけたいと思っています。HTML DOMを使用して文書内の要素を検索

重要：

私はクラスセレクタまたはIDセレクタなど..しかし、私が選択するクラスやIDや属性を持っていない取得時々HTMLなどを使用することができます知っている、だから私要素のHTMLから選択できる必要があります。ここで例えば

は、私が見つける必要がある要素です：

<span class='hello' data='na'>Element</span>

が、私はjQueryの検索を（）を使用しようとしたが、それは動作しません、ここでの裁判のjsfiddleです：https://jsfiddle.net/ndn9jtbj/

裁判：

次のコードは、HTMLに存在し、私が提供したDOMに対応する要素に変更を加えません。ネイティブのJavascriptまたはjQueryを使用して目的の結果を得る方法はありますか？

出典

2016-11-26 Faouzi FJTech

これを試してください： 'jQuery（" body "）。find（el）.html（" modified html "）;' –

関連するセレクタを使って何が問題なのですか？ '$（ 'i.fa.fa -camera '）.html（ "modified html"）; '??? –

@ Alexandru-IonutMihai私も体を試みましたが、同じ結果でした –

あなたはブラウザが解析されたか確認している場合は、outerHTMLプロパティでそれをフィルタリングすることができます：

var $el = jQuery("body *").filter(function(){ 
    return this.outerHTML === '<span class="hello" data="na">Element</span>'; 
}); 
$el.html("modified element");

出典

2016-11-26 17:33:07

これは唯一の解決策です。ありがとうございました！ –

これは賢明で少し怖いです。 +1 – lonesomeday

あなたは

document.getElementById... 
document.getElementsByClassName... 
document.getElementsByTagName...

のようなもので要素を取得Javascriptを使用する必要がありますJavascriptが使用すると、選択したID、クラスやタグ名を持つ要素を返しています。

出典

2016-11-26 17:13:25 DamiToma

あなたはあなたが単にそのクラス名によってそれを参照することができIDsとClasses

出典

2016-11-26 17:17:07

私は完全なhtmlを使用する必要があります。セレクタを使用する必要はありません。セレクタを持たない場合があるからです。 –

を選択することができますquerySelectorでdocument.querySelector('.fa-camera')

で要素エン得ることができます。ここで

$('.fa.fa-camera').html("modified html");

この回答に似て

https://stackoverflow.com/a/1041352/409556

は完全な例である：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.fa.fa-camera').html("modified html"); 

}); 

</script> 
</head> 
<body> 
<i class="fa fa-camera"><h1>Some HTML</h1></i> 


</body> 
</html>`

出典

2016-11-26 17:17:39 hayres

セレクタを使用してフルサイズのHTMLを使用する必要があります私がセレクタを持っていないケース。 –

el = jQuery('<i class="fa fa-camera"></i>');

これはは "<i class="fa fa-camera"></i>のように見える要素を見つける" と言っていません。これは、「二つのクラスfaとfa-cameraで新しいi要素を作成すること。それはthe signature for creating new elements on the flyです。

jQueryのセレクタCSSのような、いないHTMLのように見える。これら二つのクラスとi要素を見つけるには、あなたがi.fa.fa-cameraのようなセレクタを必要としています。

さらに$("document")は、documentというHTML要素を探します。これは存在しません。実際の文書を選択するには、$(document)が必要です。あなたはこれを行うことができます：

$(document).find('i.fa.fa-camera').html("modified html")

のか、より簡単に、あなたはこれを行うことができます：

$('i.fa.fa-camera').html('modified html');

あなたが文字列に基づいて要素を見つける必要があなたの質問にコメントで示していますあなたが受け取るHTMLのこれは、ブラウザを解析した後は本質的にHTMLが存在しなくなるため、軽くて難しいです。それはDOM構造に変換されます。文字列検索だけではありません。これが唯一の要素を見つけるために、タグ名とクラス名を使用することを

var searchEl = jQuery('<i class="fa fa-camera"></i>'); 
var tagName = searchEl.prop('tagName'); 
var classes = [].slice.apply(searchEl.prop('classList')); 

$(tagName + "." + classes.join('.')).html('modified html');

注：

あなたができる最善のは、このようなものです。 IDやその他のものが必要な場合は、同じ行にそれを追加する必要があります。

出典

2016-11-26 17:24:21 lonesomeday

セレクタが存在しないときには、常にセレクタが1つ以上あることが保証されていれば、良い解決策です。 –

@FaouziFJTech "セレクタがない場合"はどのように見えますか？あなたは例を挙げることができますか？ – lonesomeday

例：これは例です –

あなたが使用できる一つのことは、属性をチェックすることです（クラスとidが何らかの形でここにもなります）その要素に必要な要素を見つけるためにjQueryセレクタをビルドするか、DOM querySelectorを使用します。最も難しいのはinnerHTMLプロパティに基づいて要素を見つけることです - この要素の中に "Element"というテキストがあります。これはおそらく類似した要素をすべて取得してから検索する必要があります。 'スパン' の

<span class='hello' data='na'>Element</span> 
jQuery('body').find('span.hello[data=\'na\']').html('modified element')

テイク通知は - それは、タグセレクタの '.hello' - クラス、 '[データ= "NA"]' データの名称と属性データ。あなたの例を拡張した;

Jsfiddle link here;

出典

2016-11-26 17:41:31

HTML DOMを使用して文書内の要素を検索

答えて

関連する問題