JavaScript는 문자열을 dom 객체로 변환합니다(문자열은 동적으로 dom을 생성합니다)_javascript 기술

머리말:
JavaScript에서 표준 dom 객체를 동적으로 생성하려면 일반적으로 다음을 사용합니다.
var obj = document.createElement('div')
그런 다음 obj에 대한 일부 속성을 설정합니다.
그러나 실제 사용해보면 표준 DOM 객체를 이런 식으로 만들 수 있으면 좋겠다고 생각하는 사람들이 있을 수 있습니다.
의사 코드: var obj=strToDom('

Hello World!

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

start:
사실 이러한 변환을 구현하는 것은 매우 간단합니다. 여기서는 주로 innerHTML 속성을 사용합니다.
innerHTML은 모두가 특히 동적으로 변경하는 데 사용했다고 생각합니다. element. 내용을 삽입할 때 사용됩니다. 여기서는 innerHTML이 익숙하지 않은 분들의 편의를 위해 소개하겠습니다.
InnerHTML은 w3c 표준이 아니며 IE에서 발명하고 만들었습니다. 그러나 이 속성의 편리성과 당시 Weibo의 상황으로 인해 IE가 아닌 다른 브라우저에도 innerHTML이 내장되어 지원을 제공했습니다.
innerHTML은 w3c 표준은 아니지만 사실상의 표준입니다. 즉, 현재 모든 주류 브라우저가 innerHTML을 지원하므로 자연스럽게 여러 브라우저와 호환됩니다.
코드:

코드 복사 코드는 다음과 같습니다.

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

몇 줄의 코드 변환을 수행하려면 먼저 표준 방법을 사용하여 div를 만든 다음 innerHTML을 사용하여 요소를 삽입합니다. 실제로 이는 브라우저 자체 커널 알고리즘을 사용하여 구현된 변환입니다. childNodes를 사용하여 반환합니다.
이렇게 하면 브라우저 자체 알고리즘을 교묘하게 사용하여 문자열을 표준 DOM으로 변환하는 작업을 완료했으며, 간단하고 적은 양의 코드로 수많은 복잡한 변환을 완료할 수 있습니다. 문자열은 그대로 두되 브라우저가 자체적으로 수행하므로 정확하고 오류가 없습니다.
사용:

코드 복사 코드는 다음과 같습니다.

var obj=parseDom ('< ;div id="div_1" class="div1">Hello World!

')
var obj=parseDom('

Hello World!

2개 이상 있어도 상관없습니다')

참고:
childNodes는 배열을 반환합니다. -좋아요 목록. 따라서 요소인 경우 이 DOM을 사용하려면 obj[0]을 이렇게 사용해야 합니다. 동일한 레벨에서 여러 개의 DOM 변환을 수행하는 경우 obj[0], obj[1]을 이렇게 사용할 수 있습니다...
end

여기에서는 제가 직접 작성한 js를 추천합니다. 프레임워크에서는 위 메소드가 프레임워크에 통합됩니다.
사용: b$.parseDom('

Hello World!

')


bBank 오픈소스 자바스크립트 프레임워크