몇 주 전에 나는 뭔가 작업을 하고 있었는데 그 중 하나가 '아하!' 뭔가가 너무 심오한 의미를 가지고 있어서 그것을 탐구하고 그것에 대해 써야 한다고 스스로에게 말했던 순간들.

안타깝게도 제가 무엇을하고 있었는지, 그게 뭔지 '아하!' 가 기억 나지 않습니다 . 순간이었다. 그래서, 나는 잠수해서 내가 그것을 재발견할 수 있는지 알아보려고 합니다.

내부텍스트

바닐라 JavaScript에서 innerText는 HTML 요소의 렌더링된 텍스트만 가져옵니다. 본질적으로 브라우저에 표시되는 텍스트는 innerText가 가져오는 것입니다.

HTML

<p id=“example”>This is an <span> example </span>.</p>

자바스크립트

var x = document.getElementById(“example”).innerText;

유의해야 할 사항 :

• 요소가 CSS로 숨겨진 경우('display' 또는 'visibility' 속성과 같은 것을 사용하여) innerText는 요소에 액세스할 수 없습니다.
• innerText는 <script> 또는 <style> 요소의 내용을 반환하지 않습니다.

이것은 실제로 HTML 요소의 내부 내용을 가져 오거나 설정합니다.

내부 콘텐츠를 검색할 때 공백 및 <li> 또는 <span> 등과 같은 내부 요소 태그도 포함됩니다.

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).innerHTML;

HTML 요소의 내용을 변경하려면:

document.getElementById(“example”).innerHTML = “And <strong> NOW </strong> the contents have been changed!”;

***innerHTML을 사용하여 페이지의 내용을 변경할 수 있으므로 위험한 <script> 태그 및 기타 JavaScript 공격이 실행될 수 있습니다.***

***따라서 innerHTML을 사용하지 않는 것이 좋습니다.***

대신 textContent를 사용해 보십시오.

텍스트 내용

이것은 공백이 있는 텍스트 콘텐츠(innerHTML과 유사)를 반환하지만 내부 요소 태그는 포함하지 않습니다.

textContent를 검색하려면:

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).textContent;

textContent를 설정하려면 위의 innerHTML 예제와 같이 하면 됩니다.

document.getElementById(“example”).textContent = “And <strong> NOW </strong> the contents have been changed!”;

• <script> 및 <style>을 포함한 모든 요소의 텍스트 내용을 반환합니다.
• CSS로 숨겨진 요소의 텍스트를 반환합니다.