ホームページ > 記事 > ウェブフロントエンド > JavaScriptでHTML文字列をjquery domオブジェクトに変換する方法

JavaScriptでHTML文字列をjquery domオブジェクトに変換する方法

不言オリジナル: 2018-06-12 14:38:182711ブラウズ

最近のプロジェクトの要件は、Baidu Maps に関連するアプリケーションを開発することです。js または jq で要素のノードと属性を操作するため、必要な要素と属性情報を抽出する必要があります。以下に、JavaScript で HTML 文字列を jquery dom オブジェクトに変換する方法を紹介します。必要な方は、以下のとおりです。

var text="<p id=&#39;overLay&#39; style=&#39;width:50px;height:60px;background:url(imgs/back.png) left top no-repeat; position: absolute;&#39;>"
        + "<img style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39; width=&#39;43px&#39; height=&#39;43px&#39;/>"
        + "</p>";

1.テキスト文字列変数を Jquery オブジェクトに変換します。

Jqueryのコードは以下の通りです:

　　alert($(text).html());

このうち、$(text)は文字列をJqueryオブジェクトに変換し、最後にJqueryオブジェクトのhtml()を使ってhtmlを変換しています。コンテンツを文字列に変換します

出力、結果は次のようになります:

<img style=&#39;margin-left:4px;margin-top: 3px;&#39; src=&#39;ima.png&#39; width=&#39;43px&#39; height=&#39;43px&#39;/>

これは、$(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(&#39;IE&#39;);
     return(xmlDoc); 
   }
  catch(e)
   {
     try //Firefox, Mozilla, Opera, etc.
      {
        parser=new DOMParser();
        xmlDoc=parser.parseFromString(txt,"text/xml");
       //alert(&#39;FMO&#39;);
        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 は異なるものですが関連しているため、jQuery オブジェクトと DOM オブジェクトを相互に変換することもできます。 2 つを変換する前に、まず規則を作成します。jQuery オブジェクトが取得された場合は、次のように変数の前に $ を追加します。DOM オブジェクトが取得された場合は、次と同じです。通常. : var variab = DOM object; この規則は説明と区別の便宜のためだけであり、実際の使用では規定されていません。

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 サイトをご覧ください。

JavaScriptでHTML文字列をjquery domオブジェクトに変換する方法

関連記事