티스토리 뷰

프론트엔드/JavaScript

[브라우저와 자바스크립트] 08. 요소 노드 프로퍼티

yyoujg 2022. 11. 13. 15:50

HTML 문서를 객체로 표현한 DOM의 각 노드들은 정말 다양한 프로퍼티들을 가지고 있습니다.

// 요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');

// innerHTML
console.log(myTag.innerHTML);

첫 번째는 innerHTML이라는 프로퍼티입니다. 이 프로퍼티는 이름에서도 유추할 수 있듯이 요소 안에 있는 HTML 자체를 문자열로 리턴해주는데요.

한 가지 주의해야 되는 부분은 태그와 태그 사이의 줄바꿈이나 들여 쓰기 같은 부분들도 모두 포함된다는 점입니다.

HTML 파일로 돌아가서 방금 출력한 부분을 표시해보면 

<!DOCTYPE html>
<html lang='ko'>

<head>
  <meta charset='UTF-8'>
  <title>JS with Codeit</title>
</head>

<body>
  <div id="content">
    <h2 id='title-1'>Cat-1</h2>
    <ul id='list-1'>
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
    <h2 id='title-2'>Cat-2</h2>
    <ul id='list-2'>
      <li>Sphynx/li>
      <li>Munchkin</li>
    </ul>
  </div>
</body>

</html>

list-1의 여는 태그의 끝부분과 닫는 태그의 시작 부분까지 태그와 태그 사이의 줄바꿈이나 들여쓰기 같은 부분들이 모두 포함돼서 출력되기 때문에 이런 모양을 하고 있는 것입니다.

그런데 innerHTML은 이렇게 요소 안에 있는 HTML을 확인하는 것보다는 요소 안에 HTML을 수정할 때 좀 더 자주 활용되는데요.

// 요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');

// innerHTML
console.log(myTag.innerHTML);
myTag.innerHTML += '<li>Exotic</li>'

이렇게 innerHTML 프로퍼티에 HTML 코드를 문자열로 할당하면 해당 요소가 이 값으로 완전히 수정되는 것입니다.

참고로 덧셈 할당 연산자를 통해서 기존 HTML의 마지막 부분에 요소를 추가하는 방법으로 활용할 수도 있습니다.

 

다음으로 볼 프로퍼티는 outerHTML인데요. 

// 요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');

// outerHTML
console.log(myTag.outerHTML);
myTag.outerHTML = '<ul id='new-list'><li>Exotic</li></ul>'

outerHTML은 해당 요소를 포함한 전체 HTML 코드를 문자열로 리턴해줍니다. 실행해보면 list-1 태그가 그대로 출력됩니다. outerHTML도 innerHTML과 같이 줄바꿈이나 들여 쓰기, 띄어쓰기 같은 것들이 모두 포함되는데요.

HTML 코드에서 살펴보면 ul 태그가 시작되는 지점부터 ul 태그가 끝나는 지점까지 되기 때문에 여는 태그 앞쪽에는 들여쓰기가 없지만 닫는 태그 앞쪽에 들여 쓰기가 포함되는 모습을 확인할 수 있습니다.

그런데 outerHTML에서 좀 더 주의해야 되는 부분은 이 프로퍼티에 새로운 값을 할당했을 때입니다.

innerHTML과 마찬가지로 outerHTML에 새로운 HTML 코드를 할당할 수 있습니다.

그런데 outerHTML은 해당 요소 자체를 가리키는 특성 때문에 요소 자체가 새로운 요소로 교체되는 결과를 얻게 됩니다.

그래서 간혹 해당 요소를 수정하는 것처럼 오해하는 경우가 있는데 outerHTML에 값을 할당하게 되면 처음 선택한 요소는 사라진다는 점을 꼭 기억해두세요.

 

그리고 마지막으로 살펴볼 프로퍼티는 textContent입니다.

// 요소 노드 주요 프로퍼티
const myTag = document.querySelector('#list-1');

// textContent
console.log(myTag.textContent);
myTag.textContent = 'new text!';

코드를 실행해보면 이름에서도 유추할 수 있듯이 요소 안에 있는 내용들 중에서 HTML을 제외한 텍스트만 가져옵니다. HTML 코드로 돌아가서 보면 이렇게 innerHTML 때와 동일하게 list-1의 여는 태그 끝부분부터 닫는 태그 첫 부분까지 내용 중에서 HTML 태그 부분만 제외시킨 값을 가져오는 것입니다.

그리고 textContent도 새로운 값을 할당해서 요소 안의 값을 수정할 수가 있는데요. 이렇게 코드를 작성하고 실행해보면 textContent도 innerHTML과 마찬가지로 요소 안의 내용이 완전히 수정되어버린 것을 확인할 수 있습니다.

그런데 textContent는 말 그대로 텍스트만 다루기 때문에 특수문자도 텍스트로 처리해버립니다. 그래서 HTML 코드처럼 작성하더라도 저장하고 실행해보면 특수 문자도 그냥 텍스트로 출력하는 모습을 확인할 수 있습니다. 

만약 사용자의 입력값을 웹 페이지에 반영해야 할 때 innerHTML 보다는 textContent를 활용하면 원하지 않는 HTML 코드가 웹 페이지에 추가되는 걸 방지할 수 있습니다. 

'프론트엔드 > JavaScript' 카테고리의 다른 글

[브라우저와 자바스크립트] 12. 노드 삭제와 이동하기  (0) 2022.11.13
[브라우저와 자바스크립트] 11. 요소 노드 추가하기  (0) 2022.11.13
[브라우저와 자바스크립트] 06. DOM 트리 여행하기: 부록  (0) 2022.11.13
[브라우저와 자바스크립트] 04.DOM 트리  (0) 2022.11.10
[브라우저와 자바스크립트] 03. console.dir?  (1) 2022.11.10
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
글 보관함