내부 텍스트 vs 내부 텍스트HTML vs 레이블 vs 텍스트 vs 텍스트내용 vs 외부 텍스트

내부 텍스트 vs 내부 텍스트HTML vs 레이블 vs 텍스트 vs 텍스트내용 vs 외부 텍스트

저는 자바스크립트로 채워진 드롭다운 리스트를 가지고 있습니다.

로드에 표시할 기본값을 결정하는 동안 다음 속성이 정확히 동일한 값을 나타냄을 알게 되었습니다.

• innerText
• innerHTML
• label
• text
• textContent
• outerText

제가 직접 조사한 바로는 벤치마크 테스트나 그 중 몇 가지를 비교하는 것을 볼 수 있지만 전부는 아닙니다.

같은 결과를 제공하기 때문에 저만의 상식을 사용해서 하나를 선택할 수는 있지만, 데이터가 바뀐다면 이것은 좋은 생각이 아닐 것 같아 걱정입니다.

제 연구 결과는 다음과 같습니다.

• innerText값을 그대로 표시하고 포함될 수 있는 HTML 형식은 무시합니다.
• innerHTML값을 표시하고 HTML 형식을 적용할 것입니다.
• label와 동일한 것으로 보입니다.innerText, 그래서 나는 그 차이를 볼 수 없습니다.
• text와 동일한 것으로 보입니다.innerText하지만 jQuery 속기 버전은
• textContent와 동일하게 나타남innerText형식은 계속 지정합니다(예:\n)
• outerText와 동일한 것으로 보입니다.innerText

제 연구는 제가 생각하거나 출판된 것을 읽을 수 있는 것만 시험할 수 있는 범위 내에서만 저를 데려갈 수 있습니다. 제 연구가 정확한지, 그리고 에 대해 특별한 것이 있는지를 확인할 수 있는 사람이 있습니까?label그리고.outerText?

MDN에서:

Internet Explorer에서 element.innerText를 도입했습니다.의도는 [textContent]와 거의 같고 몇 가지 차이가 있습니다.

• textContent는 다음을 포함한 모든 요소의 내용을 가져옵니다.<script>그리고.<style>elements, 대부분 동등한 IE 고유 속성인 innerText는 그렇지 않습니다.

• 내부 텍스트는 또한 스타일을 알고 있으며 숨겨진 요소의 텍스트를 반환하지 않는 반면 텍스트 내용은 반환됩니다.

• 내부 텍스트가 CSS 스타일을 인식하고 있으므로 텍스트 내용은 리플로우를 트리거하지만 텍스트 내용은 그렇지 않습니다.

그렇게innerTextCSS에 의해 가려지는 텍스트는 포함하지 않지만,textContent할 것이다.

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

만약 놓치셨다면, 다시 한 번 더 분명히 말씀드리겠습니다. 요소 내에 HTML을 삽입하려는 의도가 있고 삽입하려는 HTML에 악의적인 내용이 포함되지 않도록 하기 위해 필요한 예방 조치를 취하지 않은 경우를 제외하고는 사용하지 마십시오. 텍스트만 삽입하려는 경우 또는 IE8 이전 버전을 지원해야 하는 경우 기능 탐지 기능을 사용하여 및 간에 전환합니다.

이렇게 다양한 속성이 존재하는 주요 이유는 브라우저마다 원래 이러한 속성의 이름이 달랐기 때문이며, 여전히 모든 속성에 대한 완전한 크로스 브라우저 지원이 이루어지지 않고 있기 때문입니다.다의 jQuery면을..text()browser 간의 차이를 완화하기 위해 설계되었기 때문입니다.*

:outerHTML다와 .innerHTML하고에 및 끝하는 것을 합니다.다에 대한 을 많이 수 없는 것 .outerText조금도. 잘 합니다.저는 그것이 아마도 잘 알려지지 않은 유산이므로 피해야 한다고 생각합니다.

JLR의 부록이 아닌 이상 훌륭한 답변입니다.

이유 안쪽 텍스트 및 바깥쪽텍스트는 둘 다 내부와 대칭을 위해 존재합니다.HTML 및 외부HTML. 속성을 할당할 때 중요해집니다.

당신이 어떤 요소를 가지고 있다고 가정해 보겠습니다.e<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!

드롭다운 목록은 개체의 집합으로 구성되므로,.text요소의 텍스트 표현을 검사하기 위한 속성, 즉.

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

그건 그렇고.

.text다와 한 것으로 ..innerText은 JQuery만.

않아요. .$(element).text() jQuery해.element.text속성 액세스 버전입니다.

text그리고.label여분의 공간을 없애 버립니다.드롭다운에서 옵션을 쿼리할 때 다음과 같은 결과가 나타납니다.

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

textContent을 지정하지 음(\n)

특정 브라우저를 대상으로 한다면 브라우저 호환성 http://www.quirksmode.org/dom/html/ 을 참조하십시오.왜냐하면 그들은 모두 자신만의 방식을 가지고 있는 것처럼 보이기 때문입니다.따라서 빈둥거리고 싶지 않다면 JQuery .text ()(http://api.jquery.com/text/) 을 사용하는 것이 더 좋습니다.

언급URL : https://stackoverflow.com/questions/24427621/innertext-vs-innerhtml-vs-label-vs-text-vs-textcontent-vs-outertext