JavaScript가 문자열을 사용하여 DOM 인스턴스를 동적으로 생성하는 방법에 대한 자세한 설명

JavaScript에서 표준 DOM 개체를 동적으로 생성하려면 일반적으로 다음을 사용합니다.

var obj = document.createElement('p');

그런 다음 obj에 대한 일부 속성을 설정합니다.
그러나 실제로 사용해보면 표준 DOM 객체를 이런 식으로 만들 수 있으면 좋겠다고 생각하는 사람들이 있을 수도 있습니다.
의사 코드: var obj=strToDom('

')
그럼 오늘의 목적은 문자열을 표준 DOM 객체로 직접 변환하는 메서드를 구현하는 방법을 가르치는 것입니다

start:
실제로 이 변환은 매우 간단합니다. 여기서는 주로 innerHTML 속성을 사용합니다. 특히 요소에 콘텐츠를 동적으로 삽입할 때 여기에서는 너무 친숙한 내용을 소개하겠습니다.
InnerHTML은 w3c 표준이 아니며 IE에서 발명하고 만든 것입니다. 그러나 이 속성의 편리성과 당시 마이크로 보스의 상황으로 인해 IE가 아닌 다른 브라우저에도 innerHTML이 내장되어 지원을 제공하고 있습니다.
innerHTML은 w3c 표준은 아니지만 사실상의 표준입니다. 즉, 현재 모든 주류 브라우저가 innerHTML을 지원하므로 자연스럽게 여러 브라우저와 호환됩니다.

function parseDom(arg) { 
　　 var objE = document.createElement("p"); 
　　 objE.innerHTML = arg; 
　　 return objE.childNodes; 
};

변환은 단 몇 줄의 코드만으로 이루어집니다. 먼저 표준 방법을 사용하여 p를 만든 다음 innerHTML을 사용하여 요소를 삽입합니다. 실제로 이는 브라우저 자체 커널 알고리즘을 사용하여 수행되는 변환입니다. . childNodes를 사용하여 반환합니다.

이런 방식으로 문자열을 표준 DOM으로 변환하는 작업을 완료했습니다. 브라우저 자체 알고리즘을 교묘하게 사용하면 간단하고 적은 양의 코드로 수많은 복잡한 변환을 완료할 수 있습니다. 문자열을 사용하되 브라우저에 맡기고 직접 수행하여 정확하고 오류가 없도록 하세요.
용도:

var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p>&#39;); 
var obj=parseDom(&#39;<p id="p_1" class="p1">Hello World!</p><span>多个也没关系</span>&#39;);

참고:

childNodes는 배열과 유사한 목록을 반환합니다. 따라서 요소인 경우 이 DOM을 사용하려면 obj[0]을 이렇게 사용해야 합니다. 여러 동일한 레벨의 DOM 변환인 경우 obj[0], obj[1]...


을 사용할 수 있습니다.

위 내용은 JavaScript가 문자열을 사용하여 DOM 인스턴스를 동적으로 생성하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!