javascript textContent와 innerText_javascript 기술의 유사점과 차이점 분석-JS 튜토리얼-php.cn

javascript textContent와 innerText_javascript 기술의 유사점과 차이점 분석

WBOY

풀어 주다： 2016-05-16 18:18:05

원래의

1166명이 탐색했습니다.

textContent와 innerText의 차이점

IE에는 innerText 속성이 있고 FF에는 textContent 속성이 있습니다. IE용 스크립트를 작성하던 많은 사람들이 FF에서 innerText 속성을 찾을 수 없었기 때문에 인터넷에서 찾은 제안은 대신 textContent를 사용하는 것이었습니다. FF 스크립트를 작성하는 사람들도 마찬가지입니다.

그런데 사실 여기에는 오해가 있습니다. 인터넷의 많은 기사에는 "FF의 innerText 속성에 해당하는 속성은 textContent"라고 나와 있지만 실제로는 그렇지 않습니다. innerText와 textContent 사이에는 몇 가지 중요한 차이점이 있으며, 이로 인해 경우에 따라 직접 상호 교환하여 사용할 수 없습니다.

며칠 전에 JS 플러그인을 강조하는 코드를 작성했는데 IE에서는 완벽하게 작동하지만 FF에서는 제대로 작동하지 않습니다. IE에서는 innerText 속성이 사용되고, FF에서는 textContent 속성이 사용됩니다. 이 둘의 차이로 인해 문자열을 처리할 때 전혀 다른 결과가 발생합니다. 그래서 둘 사이의 차이점을 테스트하기 위해 특별히 뭔가를 썼습니다.

테스트 결과에 따르면:
innerText: 내용은 실제로 브라우저에 표시되는 내용입니다. 그 값은 브라우저에 의한 해석의 결과입니다. 요소의 innerHTML을 이스케이프하고 해석하고 최종적으로 표시한 다음 다양한 서식 정보 뒤에 남겨진 일반 텍스트를 제거합니다.
를 개행 문자로 대체하고 여러 공백을 하나의 공백으로 처리합니다. 그러나 원래 개행 문자는 개행 문자를 발생시키지 않으며 IE는 이를 일반 단어 경계(일반적으로 공백)로 처리합니다. ). 좀 더 그래픽적으로 설명하면 요소의 innerText 속성 값은 이 요소의 내용을 메모장에 복사하여 붙여넣을 때 해당 내용과 일치합니다.

textContent: 해당 내용은 모든 태그를 제거한 후 innerHTML의 내용입니다(XMLDOM에서 복사한 속성인 것으로 추측되며 특성은 완전히 동일합니다). innerHTML에서 이스케이프 문자(< 등)를 이스케이프하지만 html 태그를 해석하지 않고 직접 제거합니다. 또한 HTML에 따라 innerHTML의 텍스트 형식을 지정하지 않습니다. 예를 들어 여러 공백은 그대로 유지되고 하나의 공백으로 병합되지 않습니다. 반대로
는 개행을 발생시키지 않습니다. ).

더 간결하게 요약하면 IE의 innerText에는 innerHTML 값이 필요합니다.
1. HTML 이스케이프(XML 이스케이프와 동일, <, & 등의 이스케이프 문자 처리) 2. HTML 해석과 CSS 스타일 해석
3. 그런 다음 형식 정보를 제거한 후 남은 일반 텍스트
.
FF의 textContent에는 2단계와 3단계가 없습니다. HTML 이스케이프 후 모든 html 태그가 직접 제거되고 결과 일반 텍스트가 얻어집니다.

예시:

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

ID가 T1인 이 div는
IE의 innerText 속성 값은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다:

ABCD EFG HIJ KLM N OPQ RS T T

그리고 FF의 textContent 속성 값 다음 코드를 복사하세요.

코드는 다음과 같습니다.

(줄 바꿈 있음) ABCD EFG HIJKLM N OPQRST T

해당 div에 중첩된 div가 있으며 이는 IE의 innerText와 FF의 textContent 처리 방법의 차이를 더 잘 반영합니다. 
div는 블록 요소이며 기본적으로 한 줄을 차지하므로 IE의 innerText는 위 div의 RS가 전용선을 차지하는 것을 반영한 반면, FF의 textContent는 HTML 형식을 완전히 무시하므로 textContent의 RS가 다른 문자와 연결되어 전용선을 차지하지 않습니다. 

더 자세히 알아보려면 다음 흥미로운 결과를 살펴보세요. 
내부 div에 style="float:left;"를 추가하면 div가 블록 요소에서 변경됩니다. 행 요소에 더 이상 독점 라인을 차지하지 않으므로 IE의 innerText 속성에 있는 RS는 더 이상 독점 라인을 차지하지 않고 다른 문자와 연결됩니다. 왜냐하면 textContent는 레이블을 무시하고 CSS 값을 신경 쓰지 않기 때문입니다. textContent 속성은 변경되지 않습니다. 

"FF가 innerText 속성을 지원하도록 하세요"에 대한 많은 온라인 대화는 실제로 다소 문제가 있는 것 같습니다. IE의 innerText 구현은 생각만큼 간단하지 않습니다. JavaScript를 사용하여 FF가 innerText와 정확히 동일한 효과를 가지도록 하려면 모든 html 태그 속성을 직접 구문 분석하고 설명해야 하며 심지어 CSS도 설명해야 합니다. .. 
(단, 원리에 따르면 클립보드의 복사 및 검색 작업을 통해 FF에서 innerText 효과를 시뮬레이션할 수 있는 것으로 보이지만(이것은 테스트되지 않았습니다.) 1은 부작용이 있고 클립보드는 2FF에서의 연산도 매우 번거롭습니다.) 
 
다행히도 대부분의 경우 그렇게 정밀할 필요는 없지만 innerHTML을 사용하여 간단한 처리를 수행하면 더 가까운 효과를 얻을 수 있습니다. 

참고: 위 코드는 IE6 및 FF3에서 테스트되었습니다.