nodeValue 대 innerHTML 및 textContent. 선택하는 방법?

레이블 요소의 내부 텍스트를 변경하기 위해 일반 js를 사용하고 있으며 innerHTML 또는 nodeValue 또는 textContent를 사용해야하는 근거를 확신하지 못했습니다. 새 노드를 만들거나 HTML 요소 등을 변경할 필요가 없습니다. 텍스트 만 바꾸십시오. 코드의 예는 다음과 같습니다.

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

jQuery 소스를 살펴본 결과 nodeValue를 정확히 한 번만 사용하지만 innerHTML 및 textContent를 여러 번 사용합니다. 그런 다음 firstChild.nodeValue가 상당히 빠르다는 것을 나타내는이 jsperf 테스트를 발견했습니다. 적어도 그것이 의미하는 바입니다.

firstChild.nodeValue가 훨씬 빠르면 캐치가 무엇입니까? 널리 지원되지 않습니까? 다른 문제가 있습니까?

MDN에서 textContent / innerText / innerHTML의 차이점

그리고 innerText / nodeValue에 대한 Stackoverflow 답변.

요약

1. innerHTML은 내용을 HTML로 구문 분석하므로 시간이 더 오래 걸립니다.
2. nodeValue 는 일반 텍스트를 사용하고 HTML을 구문 분석하지 않으며 더 빠릅니다.
3. textContent 는 일반 텍스트를 사용하고 HTML을 구문 분석하지 않으며 더 빠릅니다.
4. innerText 스타일을 고려합니다. 예를 들어 숨겨진 텍스트는 표시되지 않습니다.

innerTextcaniuse 에 따르면 FireFox 45까지 파이어 폭스에는 존재하지 않았지만 모든 주요 브라우저에서 지원됩니다.

.textContent출력 text/plain하는 동안 .innerHTML출력 text/html합니다.

빠른 예 :

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

출력 : <a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

출력 : 구글

첫 번째 예제 text/plain에서 브라우저가 type 출력을 구문 분석하지 않고 전체 내용이 표시되는 것을 볼 수 있습니다. 유형의 출력은 text/html브라우저에 표시하기 전에 구문 분석하도록 지시합니다.

MDN innerHTML , MDN textContent , MDN nodeValue

내가 잘 알고 작업하는 두 가지는 innerHTML과 textContent 입니다.

내가 사용 하는 TextContent을 난 그냥 그렇게 같은 단락 또는 제목의 텍스트를 변경하려면 :

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

따라서 textContent 는 텍스트를 변경하지만 결과에서 일반 텍스트로 표시되는 태그에서 알 수 있듯이 HTML을 구문 분석하지 않습니다.

HTML을 파싱하려면 다음 과 같이 innerHTML 을 사용 합니다.

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

두 번째 예는 DOM 요소의 innerHTML 속성에 할당 한 문자열 을 HTML로 구문 분석합니다 .

이것은 훌륭하고 큰 보안 취약점입니다. :)

(보안에 대해 알고 싶다면 XSS를 찾으십시오)

innerText 는 텍스트를 선택하고 복사하면 얻을 수있는 것입니다. 렌더링되지 않은 요소는 innerText에 없습니다.

textContent 는 하위 트리 의 모든 TextNode 값을 연결 한 것 입니다. 렌더링 여부.

차이점을 자세히 설명 하는 훌륭한 게시물 이 있습니다.

innerHTML 또는 textContent와 비교할 때 innerHTML 은 완전히 다르므로 포함하지 말아야하며 이유를 알아야합니다.

[참고 :이 게시물은 사람들에게 무엇을해야하는지 알려주는 것보다 누군가에게 도움이 될 수있는 특정 데이터를 공유하는 것에 관한 것입니다.]

누군가가 오늘 가장 빠른 것을 궁금해하는 경우 : https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( 두 번째 테스트의 경우 범위의 내용은 일반 텍스트이며 내용에 따라 결과가 변경 될 수 있습니다)

.innerHtml순수한 속도면에서 가장 큰 승자 인 것 같습니다 !

(참고 : 속도에 대해서만 이야기하고 있습니다. 사용할 기준을 선택하기 전에 다른 기준을 찾고 싶을 수도 있습니다!)

Element.innerHTML 속성을 set로 또는 get요소의 HTML 코드

예 : 우리는 <h1>태그와 강한 스타일을 가지고 있습니다 :

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> 위해 get요소의 콘텐츠 ID, 우리는 할 것 "myHeader"동일한 동일있다 :

var element = document.getElementById("myHeader");
element.innerHTML

반환 결과 :

<strong>My Header</strong> Normal Text`

이 요소에 대한 새로운 내용 (값)을 "설정"하기 위해 코드는 다음과 같습니다.

Element.innerHTML = "My Header My Text";

따라서이 속성은 일반 텍스트와 함께 작동 할뿐만 아니라 HTML 코드를 전달하거나 복사하기위한 것입니다.

=> 우리는 그것을 사용해서는 안됩니다.

그러나 많은 프로그래머 (나 자신을 포함하여)는이 속성을 사용하여 웹 페이지에 텍스트를 삽입하며이 방법은 잠재적 인 위험이 따릅니다.

1. 잘못된 작업 : 각 텍스트 만 삽입하면 삽입 된 요소의 다른 모든 HTML 코드가 삭제되는 경우가 있습니다.
2. 보안을 위해 : 물론 HTML5 표준으로 인해 태그 내부에서 명령 행이 실행되지 않기 때문에 태그를 사용하는 데 여전히 문제가없는 경우에도 위의 두 예제는 완전히 무해합니다. innerHTML 속성을 통해 웹 페이지에 삽입 될 때 여기이 규칙을 참조 하십시오 .

따라서 innerHTML일반 텍스트를 삽입 할 때는 사용 하지 않는 것이 좋습니다 textContent. 이 textContent속성은 전달하는 코드가 HTML 구문이라는 것을 이해하지 못하고 100 % 텍스트에 불과합니다.

textContent위 예제에서 사용하면 결과가 반환됩니다 .

My Header My Text