innerText, textContent, innerHtml 및 outerHtml의 차이점
4575 단어 htmlcssjavascript
때때로 우리는 그들 사이의 차이점에 대해 의아해합니다. 지금 해결합시다. 이것은 우리의 html 요소입니다:
<h2>
Sub Div
<span>I am hidden</span>
</h2>
위 요소의 텍스트 부분을 추출하고 싶습니다. javascript(기본적으로 dom-manipulation)를 작성해 봅시다.
const heading = document.querySelector('h2');
console.log(heading.textContent);
console.log(heading.innerText);
브라우저 콘솔에서 볼 수 있습니다. 두 출력이 거의 동일합니다('textContent'를 사용하는 출력이 제대로 잘리지 않음).
그래서, 그들 사이의 차이점은 무엇입니까? 예를 들어 h2 요소 안에 스타일 태그를 추가합니다.
<h2>
Sub Div
<style>
h2 {
background-color: orangered;
}
</style>
<span>I am hidden</span>
</h2>
이제 다시 console.log하면 됩니다. 당신은 이것을 출력으로 얻을 것입니다
우리는 textContent가 텍스트와 함께 전체 스타일 요소를 제공하고 innerText가 사람이 읽을 수 있는 텍스트를 제공하는 것을 보고 있습니다.
그들 사이에는 또 다른 유용한 차이점이 있습니다. css 규칙을 적용하여 요소의 가시성을 숨긴 다음 추출하려고 한다고 가정합니다.
<head>
<style>
h2 span {
display: none;
}
</style>
<head>
<body>
<h2>
Sub Div
<span>I am hidden</span>
</h2>
</body>
이제 console.log가 제공하는 내용을 살펴보겠습니다.
우리는 textContent가 css 규칙에 신경쓰지 않지만 innerText는 신경쓰는 것을 보고 있습니다. 따라서 CSS에 의해 숨겨진 요소의 텍스트를 가져와야 하는 경우 textContent가 편리합니다. 😉
다른 두 기술은 innerHtml 및 outerHtml입니다. 브라우저 콘솔에서 출력을 보면 매우 자명하기 때문에 쉽게 이해할 수 있을 것이라고 생각합니다.
const heading = document.querySelector('h2');
console.log(heading.innerHTML);
console.log(heading.outerHTML);
브라우저 cosnole에서 출력을 보자
Reference
이 문제에 관하여(innerText, textContent, innerHtml 및 outerHtml의 차이점), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ashiqcseworld/difference-between-innertext-textcontent-and-innerhtml-2d8m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)