js 요소 콘텐츠 Operations_javascript 기술 요약

1.innerHTML
이것은 누구나 익숙할 것입니다. 읽기 및 쓰기가 가능하며, 요소 내용을 수정하는 것이 매우 빠르고 편리합니다. 호환성 문제에 대해서는 W3Help의 지식 기록을 참조할 수 있습니다.

2.outerHTML
이 방법을 사용하면 다음과 같이 요소 자체를 빠르게 교체할 수 있습니다.

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

안녕하세요, 저는 데모입니다

$('hello').outerHTML = ''

안타깝게도 Firefox에서는 아직 지원하지 않으며(현재는 firefox8을 사용하고 있습니다), 다른 브라우저에서는 꽤 잘 지원하는데, ff에서 사용할 수 있습니다. innerHTML을 사용하여 구현을 시뮬레이션합니다.

3.documentFragment
DocumentFragment는 효율적인 DOM 노드 삽입 작업을 구현할 수 있습니다. 새로운 DocumentFragment를 생성할 수 있습니다.

var docFragment = document.createDocumentFragment();

메모리의 임시 공간에 해당하는 노드를 추가하는 데 사용할 수 있는 요소 노드의appendChild 메소드를 지원합니다. 그런 다음 DOM에 한번에 추가됩니다. Tree에는 이전 블로그 게시물에서 언급한 브라우저 관련 reflow 및 repaint 이벤트가 거의 없습니다.

4.insertAdjacentHTML
이 방법은 매우 흥미롭습니다. IE4에서 처음 도입되었으며 현재 HTML5 표준에 포함되어 있으며 현재 모든 브라우저에서 지원하고 있으며 ff에서는 이제 막 지원하기 시작했습니다. . 요소 내부와 외부 4곳에 콘텐츠를 유연하게 추가할 수 있습니다. 예:

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

안녕하세요, 저는 데모입니다.< - beforeend-->

<-- afterend-->
$('test').insertAdjacentHTML('beforebegin', /* 여기에 콘텐츠 */); 🎜>
정말 멋지죠? 그런데 아쉽게도 IE 자체에서 도입된 기능이고, IE6~8 버전에서는 버그가 정말 많습니다. 예를 들어 제 테스트에서는 요소가 div인 경우입니다. , 우리가 예상한 대로 콘텐츠를 네 위치 모두에 원활하게 삽입할 수 있습니다. 그러나 이를 p 요소로 변경하면 'beforebegin' 및 'afterend'는 p 외부의 콘텐츠 삽입만 지원합니다. p 내부에는 이 방법을 지원하지 않는 tr, td 등 다양한 버그가 있습니다. IE9에서 테스트한 결과 예상대로 작동합니다. jQuery의 아버지는 이 방법에 대한 블로그를 운영하고 있습니다. 관심이 있으시면 http://ejohn.org/blog/dom-insertadjacenthtml/

5.textContent
를 참조하세요. 요소 자체 및 해당 하위 요소의 텍스트 콘텐츠 작동은 자주 사용되지 않지만 여전히 알아야 합니다. 예:

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

뭐든 어쩌고저쩌고.안녕하세요, 저는 데모

$('test').textContent //어차피 어쩌구저쩌고. 안녕하세요, 저는 데모입니다


텍스트를 직접 연결해보세요. IE9 및 기타 브라우저에서는 이 방법을 잘 지원합니다.

6.innerText
이것도 원래 IE에서 도입한 기능인데 현재 Firefox 외에 다른 브라우저에서도 지원하고 있지만 결과가 약간 다릅니다. Opera에서는 결과가 textContent와 일치합니다. Chrome에서는 텍스트 요소가 포함된 스타일과 관련이 있습니다. IE9에서는 텍스트 요소를 포함하는 스타일과 관련이 있습니다. 실제로 innerText와 textContent는 비슷해 보이지만 몇 가지 눈에 띄는 차이점이 있습니다. MDN에는 다음과 같은 구체적인 지침이 있습니다.

1. textContent는 스크립트 및 스타일 요소에서 텍스트를 얻을 수 있습니다. innerText가 작동하지 않습니다

2. innerText의 결과는 스타일과 관련되어 있으며 숨겨진 요소의 텍스트 내용을 얻을 수 없지만 textContent는 제한되지 않습니다

3. innerText가 브라우저 내부에서 리플로우 이벤트가 발생하지만 textContent는 그럴 수 없습니다. 예, 이는 효율성에 어느 정도 영향을 미칩니다.

물론 IE6~8에서는 노드를 순회함으로써 textContent의 효과를 쉽게 얻을 수 있습니다. 코뿔소 책에 제시된 해결 방법:

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

function textContent(e) {

var child, type, s = []; // s는 모든 하위 항목의 텍스트를 보유합니다.
for(child = e.firstChild; child != null; child = child.nextSibling) {
type = child.nodeType;
if(type === 3 || type === 4) { //텍스트 및 CDATASection 노드
s.push(child.nodeValue) ;
} else if(type === 1) {
s.push(textContent(child))
}
return s.join(''); >}