텍스트노드의 값을 얻거나 변경할때는 nodeValue 또는 data 프로퍼티를 이용하면 된다.
<body>
안녕하세요.
<!-- 주석 -->
<script>
let text = document.body.firstChild;
alert(text.data); // 안녕하세요.
let comment = text.nextSibling;
alert(comment.data); // 주석
</script>
</body>
주석 텍스트노드의 활용
<!-- if isAdmin -->
<div>관라자로 로그인하였습니다!</div>
<!-- /if -->
개발자들은 종종 정보나 지시사항을 주석으로 HTML에 삽입한다.
이럴 때 data 프로퍼티 기능을 사용해 주석 노드의 내용을 읽고 삽입된 지시사항을 처리하면 유용하다.
textContent
<div id="news">
<h1>주요 뉴스!</h1>
<p>화성인이 지구를 침공하였습니다!</p>
</div>
<script>
// 주요 뉴스! 화성인이 지구를 침공하였습니다!
alert(news.textContent);
</script>
요소내의 순수한 텍스트만 얻어올 수 있다.
textContent를 사용하면 텍스트를 '안전한 방법’으로 쓸 수 있기 때문에 실무에선 textContent를 쓰기 용으로 유용하게 사용한다.
<div id="elem1"></div>
<div id="elem2"></div>
<script>
let name = prompt("이름을 알려주세요.", "<b>이보라</b>");
elem1.innerHTML = name;
elem2.textContent = name;
</script>
사용자의 입력값을 받아 처리해야 하는 경우가 많다. 이때 사용자가 입력한 값은 텍스트로 처리되어야 하기때문에 예상치 못한 HTML이 사이트에 침투하는 것을 막으려면 textContent를 사용하자.