ホームページ > 記事 > ウェブフロントエンド > JavaScriptでHTML文字列をjquery domオブジェクトに変換する方法
最近のプロジェクトの要件は、Baidu Maps に関連するアプリケーションを開発することです。js または jq で要素のノードと属性を操作するため、必要な要素と属性情報を抽出する必要があります。以下に、JavaScript で HTML 文字列を jquery dom オブジェクトに変換する方法を紹介します。必要な方は、以下のとおりです。
var text="<p id='overLay' style='width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;'>" + "<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>" + "</p>";
1.テキスト文字列変数を Jquery オブジェクトに変換します。
Jqueryのコードは以下の通りです:
alert($(text).html());このうち、$(text)は文字列をJqueryオブジェクトに変換し、最後にJqueryオブジェクトのhtml()を使ってhtmlを変換しています。コンテンツを文字列に変換します 出力、結果は次のようになります:
<img style='margin-left:4px;margin-top: 3px;' src='ima.png' width='43px' height='43px'/>これは、$(text)Jquery オブジェクトが最も外側の HTML 要素 p を表すことを示しています。
2. JqueryオブジェクトとDOMオブジェクトを相互に変換します。
コードは次のとおりです:
var element= $(text).get(0) //element就是一个dom对象 var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。注: DOMオブジェクトとJqueryオブジェクトの違い私の理解では、JqueryオブジェクトとDOMオブジェクトはどちらもカプセル化されたHTML要素であり、HTML上で操作できます。要素ノードはプログラミングには便利ですが、一部のメソッドは共有できません。たとえば、Jquery オブジェクトの html() メソッドや DOM オブジェクトの GetElementById() は使用できません。 Jquery オブジェクトによって。したがって、必要に応じて相互変換を行うことができる。
3. jsコードを使用して、テキスト文字列変数をDOMオブジェクトに変換します。
jsコードは以下の通りです:
/*字符串转dom对象*/ function loadXMLString(txt) { try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(txt); //alert('IE'); return(xmlDoc); } catch(e) { try //Firefox, Mozilla, Opera, etc. { parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,"text/xml"); //alert('FMO'); return(xmlDoc); } catch(e) {alert(e.message)} } return(null); }テキスト文字列をDOMオブジェクトに変換するjsコードはブラウザに関係するものなので。 。 。 。 。 。分けて書きます。 このようにして、HTML文字列からJqueryオブジェクトやDOMオブジェクトへの変換が実現されます。
jQueryオブジェクトとdomオブジェクト間の変換方法の紹介
jQueryを初めて学習し始めると、どれがjQueryオブジェクトでどれがDOMオブジェクトなのか分からないかもしれません。 DOM オブジェクトに関しては、あまり多くの説明がありません。jQuery とその 2 つの間の変換に焦点を当てましょう。
jQuery オブジェクトとは何ですか?
---DOMオブジェクトをjQueryでラップすることで生成されたオブジェクトです。 jQuery オブジェクトは jQuery に固有であり、jQuery のメソッドを使用できます。
例: $("#test").html() は、ID テストを持つ要素内の HTML コードを取得することを意味します。このうち、html()はjQueryのメソッドですこのコードは、DOMを使用してコードを実装するのと同等です:
document.getElementById("id").innerHTML;DOMオブジェクトをラップした後にjQueryオブジェクトが生成されますが、 , jQuery DOM オブジェクトのメソッドも同様に、むやみに使用するとエラーが報告されます。例: $("#test").innerHTML、document.getElementById("id").html() などの記述方法が間違っています。
もう 1 つの注意点は、#id をセレクターとして使用して取得される jQuery オブジェクトと document.getElementById("id") で取得される DOM オブジェクトは同等ではないということです。以下の 2 つの間の変換を参照してください。
jQuery オブジェクトを DOM オブジェクトに変換する:
jQuery オブジェクトを DOM オブジェクトに変換する 2 つの変換メソッド: [index] と .get(index);
(1) jQuery オブジェクトはデータ オブジェクトです。 [index] メソッドを通じて対応する DOM オブジェクトを取得できます。
例:
var $v =$("#v") ; //jQuery对象 var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中
(2) jQuery自体は、.get(index)メソッドを通じて、対応するDOMオブジェクトを取得できます
例:
var $v=$("#v"); //jQuery对象 var v=$v.get(0); //DOM对象 alert(v.checked) //检测这个checkbox是否被选中
DOM オブジェクトは jQuery オブジェクトに変換されます:
すでに DOM オブジェクトである DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。 $(DOM object)
例:var v=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象変換後は、jQuery メソッドを自由に使用できます。 上記のメソッドを通じて、jQuery オブジェクトと DOM オブジェクトを自由に相互に変換できます。もう一度強調しておく必要があるのは、DOM 内のメソッドを使用できるのは DOM オブジェクトのみであり、jQuery オブジェクトは DOM 内のメソッドを使用できないということです。 上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 関連する推奨事項:
js を介して HTML の元のコンテンツを変更する方法
以上がJavaScriptでHTML文字列をjquery domオブジェクトに変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。