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());

　 그 중 $(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 객체에서 사용할 수 없습니다. 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 객체를 래핑하여 생성된 객체입니다. jQuery 개체는 jQuery에 고유하며 jQuery에서 메서드를 사용할 수 있습니다.

예:

$("#test").html()은 ID가 test인 요소에서 html 코드를 가져오는 것을 의미합니다. 그 중 html()은 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는 다르지만 서로 관련되어 있으므로 jQuery 개체와 DOM 개체도 서로 변환할 수 있습니다. 두 가지를 변환하기 전에 먼저 규칙을 만듭니다. jQuery 객체를 얻은 경우 다음과 같이 변수 앞에 $를 추가합니다. var $variab = jQuery 객체를 얻은 경우 다음과 같습니다. : var variab = DOM object; 이 규칙은 설명과 구별의 편의를 위한 것일 뿐 실제 사용에서는 규정되지 않습니다.

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对象

변환 후에는 jQuery 메서드를 마음대로 사용할 수 있습니다.

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

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

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