innerText vs innerHTML vs label vs text vs textContent vs outerText

Javascript로 채워진 드롭 다운 목록이 있습니다.

로드시 표시 할 기본값을 결정하는 동안 다음 속성이 정확히 동일한 값을 표시한다는 것을 깨달았습니다.

• innerText
• innerHtml
• label
• text
• textContent
• outerText

내 자신의 연구에 따르면 벤치 마킹 테스트 또는 일부 비교 결과가 있지만 전부는 아닙니다.

나는 내 자신의 상식을 사용하고 동일한 결과를 제공하기 때문에 하나 또는 다른 것을 선택할 수 있지만 데이터가 변경되면 이것이 좋은 생각이 아닐 것이라고 우려합니다.

내 결과는 다음과 같습니다.

• innerText 값을있는 그대로 표시하고 포함될 수있는 HTML 형식을 무시합니다.
• innerHTML 값을 표시하고 HTML 형식을 적용합니다.
• label과 같은 것 innerText같아서 차이가 보이지 않습니다.
• textinnerTextjQuery 약식 버전 과 동일하게 보입니다.
• textContent같은 나타납니다 innerText하지만 (예 : 서식 계속 \n)
• outerText 다음과 같은 것 같습니다. innerText

내 연구 단지 나는 단지 내가 생각할 또는 게시 무엇을 읽을 수 있는지 테스트 할 수 있습니다으로 지금까지 저를 취할 수 있습니다 하나 확인 내 연구가 올바른지하지만 아무것도 특별 대해이있는 경우 label및 outerText?

에서 MDN :

Internet Explorer는 element.innerText를 도입했습니다. 의도는 몇 가지 차이점을 제외하고 [textContent와] 거의 동일합니다.

• textContent는 <script>및 <style>요소를 포함한 모든 요소의 콘텐츠를 가져 오지만 대부분 동등한 IE 관련 속성 인 innerText는 가져 오지 않습니다.

• innerText는 스타일을 인식하고 숨겨진 요소의 텍스트를 반환하지 않지만 textContent는 반환합니다.

• innerText는 CSS 스타일을 인식하므로 리플 로우를 트리거하지만 textContent는 그렇지 않습니다.

따라서 innerTextCSS에 의해 숨겨진 텍스트는 포함되지 않습니다 textContent.

innerHTML은 이름이 나타내는대로 HTML을 반환합니다. 종종 요소 내에서 텍스트를 검색하거나 작성하기 위해 사람들은 innerHTML을 사용합니다. 대신 textContent를 사용해야합니다. 텍스트가 HTML로 구문 분석되지 않기 때문에 더 나은 성능을 가질 수 있습니다. 또한 이것은 XSS 공격 벡터를 방지합니다.

경우 당신이 놓친, 좀 더 명확하게 반복하자 : 음주 하지 사용 .innerHTML특별히 요소 내에 삽입 HTML로 작정하고 삽입하는 HTML 악의적 인 내용을 포함 할 수 있도록 필요한 조치를 수행하지 않은 경우. 텍스트 만 삽입하려면을 사용 .textContent하거나 IE8 및 이전 버전을 지원해야하는 경우 기능 감지를 사용하여 .textContent및 .innerText.

서로 다른 속성이 너무 많은 주된 이유는 서로 다른 브라우저가 원래 이러한 속성에 대해 서로 다른 이름을 가졌고 여전히 모든 속성에 대한 완전한 브라우저 간 지원이 없기 때문입니다. jQuery를 사용하는 경우 .text()브라우저 간 차이를 완화하도록 설계되었으므로이를 고수해야합니다 . *

다른 일부의 경우 : outerHTML기본적으로는 innerHTML해당 요소의 시작 및 끝 태그를 포함한다는 점을 제외 하면과 동일 합니다. 나는 전혀 많은 설명을 찾을 수없는 것 같습니다 outerText. 나는 아마 모호한 레거시 속성이므로 피해야한다고 생각합니다.

드롭 다운 목록은 Option개체 모음으로 구성 되므로 .text속성을 사용 하여 요소의 텍스트 표현을 검사 해야합니다.

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.text.innerTextJQuery 속기 버전 과 동일하게 보입니다.

그것은 정확하지 않습니다. $(element).text()jQuery 버전이고 element.text속성 액세스 버전입니다.

JLRishe의 훌륭한 답변에 대한 부록 :

innerText와 outerText가 모두 존재하는 이유는 innerHTML 및 outerHTML과의 대칭 때문입니다. 이것은 속성에 할당 할 때 중요 합니다.

eHTML 코드 가있는 요소가 있다고 가정합니다 <b>Lorem Ipsum</b>.

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

textContent 포맷하지 않음 (\ n)

특정 브라우저를 대상으로하는 경우 브라우저 호환성 http://www.quirksmode.org/dom/html/을 참조하십시오 . 그들 모두 자신 만의 방식으로 일을하는 것 같기 때문입니다. 그렇기 때문에 조작 하고 싶지 않다면 JQuery .text () ( http://api.jquery.com/text/ ) 를 사용하는 것이 좋습니다 .

text그리고 label여분의 공백을 제거합니다. 드롭 다운에서 옵션을 쿼리 할 때 다음 결과를 얻었습니다.

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"