minTech

[JavaScript] 주요 노드(Node) 프로퍼티(Property) 본문

JavaScript

[JavaScript] 주요 노드(Node) 프로퍼티(Property)

pushzzeong 2024. 1. 17. 21:27

DOM 노드들은 프로퍼티들을 갖는다. 그 중 주요한 프로퍼티들 몇 가지를 정리해보았다. 

 

👉 innerHTML

  • 요소 안에 있는 HTML 자체를 문자열로 리턴한다. 
  • 들여쓰기와 줄 바꿈 모두 포함한다.
  • HTML의 내용을 수정하거나, + 연산자를 이용해 요소 추가도 가능하다. 

[html의 body]

<body>
  <p id="content">It's content!</p>
  <script src="test.js"></script>
</body>

 

[javascript]

const tag = document.querySelector('#content');
tag.innerHTML = "<p>changed content !!</p>"

 

[result]

다음 결과를 보면 content의 내용이 "It's content !" => "changed content !!" 로 바뀌었음을 확인할 수 있다. 

 

‼️ 주의 

+ 연산자를 이용해 요소를 추가할 경우 기존의 내용을 삭제한 후에, 기존 내용과 합쳐진
새로운 내용을 리턴함에 주의해야한다. 

 

 

👉 outerHTML

  • 자신의 요소를 포함한 전체 HTML을 리턴한다. 
  • innerHTML과 같이 줄바꿈, 들여쓰기, 뛰어쓰기 모두 포함되어 리턴됨에 주의한다. 
  • 해당 요소 자체를 가리키는 특성이 있기 때문에, 원래 있던 요소에서 수정하는 innerHTML과 달리 outerHTML은 원래 있던 요소를 삭제하고 새로운 요소로 교체가 된다.

 

다음의 예를 통해 쉽게 이해가 가능하다.

 

[javascript]

const tag = document.querySelector('#content');
tag.outerHTML = "<p>changed content !!</p>"
console.log(tag.outerHTML);

 

[result]

결과를 보면 innerHTML을 사용하여 내용을 바꿔준 것처럼 웹페이지의 content부분이 바뀌었다. 

하지만 console을 통해 tag의 outerHTML을 출력해보면 변경 전 값이 출력됨을 보았다. 

 

why❓

다음 과정에서의 동작 과정은 다음과 같다. 

☝️ 문서에서 <p id="content> It's content!</p> 를 삭제한다.

✌️ 삭제한 후, 남은 공간에 <p>changed content !!</p>를 삽입한다.

👌 그렇기 때문에 tag는 여전히 기존의 값을 가지고 있고, 새롭게 할당된 HTML 조각은 저장되지 않는다. 

 

 

 

👉 textContent

  • 해당 요소 내용 중에서 text 값만 리턴한다.
  • 새로운 값을 할당하여 요소의 text 수정이 가능하다.
tag.textContent = "changed content by textContent"

 

 

💡 innerText와 textContent의 차이

  • textContent는 style 태그나 script 태그 상관 없이 해당 요소 내의 텍스트 값을 들여쓰기,  뛰어쓰기, 줄바꿈도 모두 포함하여 가져온다.
  • innerText는 요소 내의 사용자에게 보여지는 텍스트 값을 가져온다.  따라서 textContent와 달리 style 태그를 이용해 스타일이 적용된 텍스트를 가져온다. 

 

 

 

 

 

'JavaScript' 카테고리의 다른 글

[JavaScript] HTML 속성 다루기  (0) 2024.01.18
[JavaScript] 요소 노드 추가/변경/삭제  (0) 2024.01.18
[JavaScript] DOM(Document Object Model) / 노드(Node) 접근법  (0) 2024.01.17
[JavaScript] 원하는 태그 선택하는 방법  (0) 2024.01.16
[JavaScript] 브라우저 렌더링 원리  (0) 2024.01.12
'JavaScript' Related Articles more