js

JS - DOM 노드 프로퍼티 다루기

3월 20, 2019
프로퍼티(property)란 어떤 값을 갖고 있는 것을 말합니다. 그러므로 객체의 상태나 속성을 가져오거나 설정할 수 있습니다.

프로퍼티를 제어하기 위해 다음 표를 사용할 수 있습니다.

속 성 설 명
innerHTML HTML을 가져오거나 설정
innerText 지정된 노드와 모든 자손의 텍스트 내용을 가져오거나 반환
(모든 자식 노드가 제거되고 단일 Text 노드로 대체)
tagName 선택한 요소 노드의 태그 이름을 반환
className class 속성의 값을 설정하거나 반환
classList class 속성 이름을 DOMTokenList 객체로 반환
  • add(): class 속성에 새로운 속성을 추가
  • remove(): 여러 속성 중 해당하는 속성을 제거
속성을 여러 개 추가, 제거하려면 콤마로 지정합니다.
nodeName 태그, 속성, 주석, 텍스트를 반환한다는 점을 제외하면 tagName 과 동일
  • 주석: #comment
  • 텍스트(또는 줄바꿈): #text
      태그로 감싸지 않은 텍스트
  • 속성: 속성의 이름
  • 요소: 대문자인 태그이름
nodeType 노드의 유형을 숫자로 반환
  • 요소 노드: 1
  • 속성 노드: 2
  • 텍스트 노드: 3
  • 주석 노드: 8
nodeValue 선택한 노드의 텍스트를 설정하거나 반환
선택한 노드가 요소이면 null 을 반환
textContent 선택한 노드와 모든 자손의 텍스트를 반환하거나 설정


tagName, nodeName

tagName 은 태그 이름만 반환하는 반면 nodeName 은 태그 이름과 줄바꿈, 텍스트, 주석을 노드로 판단하고, 결과를 반환합니다.

<ul id="list">
  <li>크롬</li>
  <li>사파리</li>
  <li>옛지</li>
</ul>

<script>
var list = document.getElementById("list");

/*
  tagName 예제
*/
// ul 의 첫 번째 노드의 태그 이름은...?
document.write( list.childNodes[0].tagName + "<br/>"); // undefined

// ul 의 두 번째 노드의 태그 이름은...?
document.write( list.childNodes[1].tagName + "<br/>"); // LI


/*
  nodeName 예제
*/
// ul 의 첫 번째 노드는 줄바꿈이므로...
document.write( list.childNodes[0].nodeName + "<br/>"); // #text

// ul 의 두 번째 노드는 li 요소
document.write( list.childNodes[1].nodeName + "<br/>"); // LI
</script>


nodeValue, textContent

다음은 nodeValue 와 textContent 의 예제입니다.

내용1

<ul id="list">
  <li>크롬</li>
  <li>사파리</li>
  <li>옛지</li>
</ul>

<script>
var list = document.getElementById("list");

/*
  nodeValue
*/
// ul 의 두 번째 노드는 요소이므로 null 반환
document.write( list.childNodes[1].nodeValue + "<br/>"); // null

// <body> 의 첫 번째 노드 "내용1" 의 nodeName 은...?
document.write(
 document.body.childNodes[0].nodeName + "<br/>"
); // #text

// <body> 의 첫 번째 노드 "내용1" 의 nodeValue 는...?
document.write(
 document.body.childNodes[0].nodeValue  + "<br/>"
); // 내용1 


/*
  textContent
*/
// <body> 의 첫 번째 노드 "내용1" 의 textContent 는...?
document.write(
 document.body.childNodes[0].textContent + "<br/>"
); // 내용1 

// ul 의 두 번째 노드의 텍스트는...?
document.write(
 list.childNodes[1].textContent + "<br/>"
); // 크롬
</script>


nodeType

nodeType 은 노드 타입을 숫자로 반환합니다.

<ul id="list">
  <li>크롬</li>
  <li>사파리</li>
  <li>옛지</li>
</ul>

<script>
var list = document.getElementById("list");

// ul 의 두 번째 노드는 요소이므로 type 은 1 
document.write( list.childNodes[1].nodeType + "<br/>"); // 1

// ul 의 첫 번째 노드는 줄바꿈이므로 type 은 3 
document.write( list.childNodes[0].nodeType + "<br/>"); // 3
</script>


classList 

classList 와 className 을 이용하면 class 속성에 새로운 속성을 추가하거나 제거할 수 있습니다.

<div class="a b c">하보니  PHP</div>

<script>
var ca = document.getElementsByTagName("div")[0];

// div 의 속성 값은...?
document.write( ca.className + "<br/>"); // a b c

// div 의 속성 값을 d 로 변경
ca.className = "d";
document.write( ca.className + "<br/>"); // d

// 클래스 속성에 a, b 속성을 추가합니다.
ca.classList.add("a", "b");
document.write( ca.className + "<br/>"); // d a b

// 클래스 속성에 d, b 속성을 제거합니다.
ca.classList.remove("d", "b");
document.write( ca.className + "<br/>"); // a
</script>

Tag:

0 Comments

0 댓글