innerText
-
HTML요소 인터페이스의 속성으로 요소안의 텍스트 컨텐츠를 나타낼 때 사용합니다. -
화면에 표시되지 않는 텍스트,
"display:none"과 같은 속성을 부여해서 화면에
렌더링 되지 않는 요소 안의 텍스트는 가져오지 않습니다. -
텍스트를 표시하는 태그 요소 안의 텍스트 데이터는 DOM 안에서 하나의 노드로
저장됩니다. 노드로 저장되지 않는 텍스트 데이터는 제외된다. 대표적인 것으로form
요소 안의inputtextarea안에 작성한 텍스트 등 입니다 -
해당 속성으로는
HTML에서 사용하는 태그를 적용할 수 없습니다.
1.1 innerText 사용
<body>
<h1> Hi </h1>
<script src="./index.js"></script>
</body>const h1 = document.querySelector('h1');
h1.innerText = 'hello';
/* h1 요소의 컨텐츠 내용을 변경 */⭐
innerText속성을 사용해서 요소의 컨텐츠를 변경할 수 있다.
주의할 점은 사용자의 눈에 보이는 요소만 값을 수정할 수 있습니다.
⛔
innerText안의 모든 컨텐츠는 문자열로 인식합니다.
innerHTML
-
HTML요소 인터페이스의 속성으로 요소안의 컨텐츠를 가져오거나 문자열 또는 태그를
삽입해서 값을 수정할 수 있다. -
innerText와는 다르게 태그를 사용할 수 있기에 범용성이 좋다.
2.1 innerHTML 사용
const h1 = document.querySelector('h1');
h1.innerHTML = '<p style="color:blue"> Hello </p>';⭐
innerHTML속성은 요소안에 태그도 넣어서 스타일도 정의할 수 있다
textContent
-
DOM 객체의 Node 속성으로써
script와style요소를 포함한 모든 요소의 콘텐츠를
텍스트로 가져올 수 있다. -
innerText와는 다르게 숨겨진 요소도 가져오며HTML로 분석할 필요가 없다는 점에서
innerHTML보다 성능도 좋습니다.
3.1 textContent 사용
const h1 = document.querySelector('h1');
h1.textContent = '<p style="color:blue"> Hello </p>';⭐
textContent는 모든 요소(숨겨진요소)를 가져와서 출력합니다. 태그같은 경우에는
innerHTML처럼 요소에 적용하지 않고, 어떤 태그가 사용되었는지 확인할 수는 있습니다.
세가지 속성의 차이
- 숨겨진 요소를 사용해서 세 가지 속성의 차이점을 살펴보겠습니다.
<body>
<div id='content'>
요소 테스트
<span style='display:none'>밀짚모자 루피 👒</span>
</div>
<script src="./index.js"></script>
</body>
const content = document.querySelector('#content');
console.log(content.innerText);
console.log(content.innerHTML);
console.log(content.textContent);⭐
innerText는 숨겨진 요소를 제외한 텍스트를 가져옵니다
innerHTML은HTML에서 작성된 모든 요소를 가져옵니다.
textContent는 스크립트나 태그 상관없이 노드가 가지고 있는 모든 텍스트를 가져옵니다.
