소년코딩의 자바스크립트 강좌 41. DOM: Element 타입

Element 타입

웹 프로그래밍에서 Document 타입 다음으로 자주 쓰는 타입은 Element 타입이다.

Element 타입은 HTML 요소를 표현하며 이를 통해 태그 이름이나 자식, 속성 같은 정보에 접근이 가능하다.

특징

• nodeType은 1이다.
• nodeName은 요소의 태그 이름이다.
• nodeValue는 null이다.
• parentNode는 Document 또는 Element이다.
• 자식 노드로 Element나 Text등등을 가질 수 있다.

---

Element 타입의 주요 프로퍼티와 메서드

• tagName
• dataset
• attributes
• createElement()
• getAttribute()
• setAttribute()
• hasAttribute()
• removeAttribute()

---

Element 생성

createElement() 메서드를 사용하여 프로그래밍 적으로 Element 노드를 생성할 수 있다.

var elementNode = document.createElement('textarea');

document.appendChild(elementNode);

// 익스에서는 다음과 같이 완전한 형태도 가능하다.
var elementNode2 = document.createElement('<div id="myNewDiv" class="box"></div>');

---

Element의 태그 이름 얻기

Element의 태그 이름은 tagName 프로퍼티나 nodeName 프로퍼티로 얻을 수 있다.

// <div id="myDiv"></div>

var div = document.getElementById('myDiv');
console.log(div.tagName);                   // 'DIV' (항상 대문자)
console.log(div.tagName === div.nodeName);  // true

if(element.tagName.toLowerCase() == 'div')) { // 안전한 방법
    // more code
}

---

HTML 요소

HTML 요소는 모두 HTMLElement 타입을 통해 표현된다.

HTMLElement는 Element를 직접적으로 상속하며 몇가지 프로퍼티가 추가되어 있다.

// <div id='myDiv' title='this is Div' class='bd'></div>

var id = document.getElementById('myDiv'(;

console.log(div.id);        // 요소의 고유한 식별자        // 'myDiv'
console.log(div.title);     // 요소에 대한 추가 정보(툴팁)  // 'this is Div'
console.log(div.className); // 요소의 class 속성          // 'bd'

각 프로퍼티는 속성 값을 읽을 수 있으며, 수정 및 설정도 가능하다.

---

Element의 속성 값 획득, 설정, 제거

각 Element는 속성을 가질 수 잇으며 속성에는 일반적으로 해당 요소나 컨텐츠에 대한 정보가 들어있다.

메서드는 getAttribute(), seAttribute(), hasAttribute(), removeAttribute()등이 있다.

// <div id='myDiv' class='yes' title='hi' style='margin:0;' data-foo='hello'></div>
// <input type='checkbox' id='myCheck' checked></input>
 
var div = document.getElementById('myDiv');

var check = document.getElementById('myCheck');
 
// 속성 얻기
console.log(div.getAttribute('id'));   // 'myDiv'
console.log(div.id);                        // 'myDiv'
 
// 속성 설정
div.setAttribute('id', 'someOtherId');
div.id = 'someOtherId';
 
// 속성 제거
div.removeAttribute('id');
 
// 속성 유무검사
console.log(div.hasAttribute(''));   // false
console.log(div.hasAttribute('id')); // true

console.log(check.hasAttribute('checked'); // true

---

attributes 프로퍼티

Element 타입은 DOM 노드 타입 중에서 attributes 프로퍼티를 가지는 유일한 타입니다.

attributes 프로퍼티에는 살아있는 컬렉션인 NodeList와 비슷한 NameNodeMap이 저장된다.

요소의 속성은 모두 Attr 노드로 표현되며 NameNodeMap 객체에 저장된다.

// <div id='myDiv' class='yes' title='hi' style='margin:0;' data-foo='hello'></div>

var atts = document.getElementById('myDiv').attributes;

for(var i = 0; i < atts.length; ++i) {
     console.log(atts[i].nodeName, ' = ', atts[i].nodeValue);
} 
/*   id       = myDiv
     class    = yes
     title    = hi
     style    = margin:0;
     data-foo = hello */

---

Element의 커스텀 프로퍼티 data-*

element 노드의 dataset 속성은 element에서 커스텀 프로퍼티에 접근할 수 있다.

<div id='myDiv' data-name='boy' data-age='25'></div>
 
var div = document.getElementBy('myDiv');
 
// 가져오기
console.log(div.dataset.name);   // 'boy'
console.log(div.dataset.age);    // 24
 
// 설정하기
div.dataset.name = 'coding';

---

Element의 자식

Element(요소)는 자식 요소나 자손 요소를 가질 수 있으며 그 숫자에는 제한이 없다.

childNodes 프로퍼티에는 요소의 자식 요소가 모두 담기는데, 다른 Element Node, Text Nodesk Comment Node등이 해당한다.

---

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.