javascript에서 html 문자열을 jquery dom 객체로 변환하는 방법

최근 프로젝트 요구 사항은 Baidu Maps 관련 애플리케이션을 개발하는 것입니다. js 또는 jq에서 요소 노드 및 속성을 작동하려면 dom 객체 또는 jq 객체를 사용하기 때문에 하드 코딩된 HTML 문자열에서 원하는 요소 및 속성 정보를 추출해야 합니다. 다음은 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());

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

2. Jquery 개체와 DOM 개체를 서로 변환합니다.

코드는 다음과 같습니다.

var element= $(text).get(0) //element就是一个dom对象
　　var jqueryobj=$(element);//jqueryobj就是一个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);
}

jQuery 객체와 dom 객체 간의 변환 방법 소개

jQuery를 처음 배우기 시작하면 어떤 것이 jQuery 객체인지, 어떤 것이 DOM 객체인지 분간하지 못할 수도 있습니다. DOM 개체에 대해서는 설명이 많지 않습니다. jQuery와 둘 사이의 변환에 중점을 두겠습니다.

jQuery 객체란 무엇인가요?

---jQuery를 통해 DOM 객체를 래핑하여 생성된 객체입니다. jQuery 개체는 jQuery에 고유하며 jQuery에서 메서드를 사용할 수 있습니다.

이 코드는 DOM을 사용하여 코드를 구현하는 것과 동일합니다.

document.getElementById("id").innerHTML;jQuery 객체는 DOM 객체를 래핑한 후 생성되지만 , jQuery DOM 객체의 어떤 메소드도 사용할 수 없습니다. 마찬가지로 DOM 객체도 jQuery의 메소드를 무분별하게 사용할 경우 오류가 발생합니다. 예: $("#test").innerHTML, document.getElementById("id").html() 및 기타 작성 방법이 잘못되었습니다.

또 한 가지 주의할 점은 #id를 선택자로 사용하여 얻은 jQuery 개체와 document.getElementById("id")로 얻은 DOM 개체가 동일하지 않다는 것입니다. 아래 둘 사이의 변환을 참조하세요.

jQuery 객체를 DOM 객체로 변환:

jQuery 객체를 DOM 객체로 변환하는 두 가지 변환 방법: [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 객체)

var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象

js를 통해 html의 원본 내용을 변경하는 방법

위 내용은 javascript에서 html 문자열을 jquery dom 객체로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!