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

원본 HTML 문자열은 다음과 같습니다.

var text="<div 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'/>"
        + "</div>";

　1. 다음으로 Jquery 라이브러리를 사용하여 텍스트 문자열 변수를 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 요소인 div를 나타내는 것을 보여줍니다.

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

코드는 다음과 같습니다.

var element= $(text).get(0) //element就是一个dom对象
　　var jqueryobj=$(element);//jqueryobj就是一个Jquery对象。

참고: DOM 객체와 Jquery 객체의 차이점

제가 이해한 바에 따르면 Jquery 객체와 DOM 객체는 캡슐화된 html 요소입니다. 프로그래밍을 용이하게 하기 위해 html 요소 노드를 조작할 수 있지만 Jquery 객체의 html() 메소드와 같은 일부 메소드는 공유할 수 없습니다. DOM 객체는 사용할 수 없으며 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와 둘 사이의 변환에 중점을 두겠습니다.

jQuery 객체란 무엇인가요?

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

예:

$("#test").html()은 ID가 test인 요소에서 html 코드를 가져오는 것을 의미합니다. 그 중 html()은 jQuery의 메소드입니다

이 코드는 DOM을 사용하여 코드를 구현하는 것과 같습니다.

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

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

jQuery는 다르지만 서로 관련되어 있으므로 jQuery 객체와 DOM 객체도 서로 변환될 수 있습니다. 두 가지를 변환하기 전에 먼저 규칙을 만듭니다. jQuery 객체를 얻은 경우 다음과 같이 변수 앞에 $를 추가합니다. var $variab = jQuery 객체를 얻은 경우 다음과 같습니다. : var variab = DOM object; 이 규칙은 설명과 구별의 편의를 위한 것일 뿐 실제 사용에서는 규정되지 않습니다.

jQuery 객체를 DOM 객체로 변환:

두 가지 변환 방법인 [index] 및 .get(index)는 jQuery 객체를 DOM 객체로 변환합니다.

(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 객체를 $()로 래핑하기만 하면 jQuery 객체를 얻을 수 있습니다. $(DOM 객체)

예:

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

변환 후에는 모든 jQuery 메서드를 사용할 수 있습니다.

위의 방법을 통해 jQuery 객체와 DOM 객체를 임의로 서로 변환할 수 있습니다. 다시 한 번 강조할 점은 DOM 객체만이 DOM에서 메소드를 사용할 수 있고, jQuery 객체는 DOM에서 메소드를 사용할 수 없다는 점입니다.