[Javascript] 주요 노드 프로퍼티

'nodeType' 프로퍼티

✔️ nodeType 프로퍼티는 DOM 노드의 '타입’을 알아내고자 할 때 쓰이는 구식 프로퍼티.

 

nodeName과 tagName으로 태그 이름 확인하기

✔️ DOM 노드의 태그 이름 확인 가능.

 

 

innerHTML로 내용 조작하기

✔️ 요소 안의 HTML을 문자열 형태로 받아올 수 있다.

✔️ 수정도 가능.

<div>안녕하세요</div>

<script>
    let chatDiv = document.querySelector('div');

    chatDiv.innerHTML += " 잘지내죠?";
    chatDiv.innerHTML += " 보고싶네요";
    
</script>

//추가된 html
<div>안녕하세요 잘지내죠? 보고싶네요</div>

 

outerHTML로 요소의 전체 HTML 보기

✔️ 요소 전체 HTML이 담긴다.

✔️  문서상에서는 수정되나 div 요소 자체가 수정되지 않는것을 조심해야 한다.

<div>Hello, world!</div>

<script>

let div = document.querySelector('div'); 

div.outerHTML = '<p>새로운 요소</p>';

console.log(div.outerHTML); //<div>Hello, world!</div>
</script>

 

textContent로 순수한 텍스트만

✔️ <태그>는 제외하고 오로지 텍스트만 추출!

✔️ 텍스트를 안전한 방법으로 쓸 수 있기 때문에 쓰기 용으로 유용!

<div id="elem1"></div>
<div id="elem2"></div>

<script>
  let name = prompt("이름을 알려주세요.", "<b>이보라</b>");

  elem1.innerHTML = name; 
  elem2.textContent = name;
</script>

이보라

<b>이보라</b>

 

innerHTML은 HTML 형태로 저장되기 때문에 굵은 글씨가 출력되고

textContent로 넣으면 입력한 값이 모두 텍스트 형태로 출력되기 때문에

사용자가 입력한 값이 HTML 사이트에 침투하는 것을 막으려면 textContent를 사용해야한다.

 

 

hidden 프로퍼티

✔️ 기술적으로 style="display:none"과 동일하다.

 

<div id="elem">깜빡이는 요소</div>
<script>

setInterval(() => elem.hidden = !elem.hidden, 1000);
</script>

 

요약

 

Reference

• https://ko.javascript.info/basic-dom-node-properties