소년코딩

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등이 해당한다.



javascript

by 소년코딩

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

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

댓글 로드 중…

블로그 정보

소년코딩 - 소년코딩

소년코딩, 자바스크립트, C++, 물리, 게임 코딩 이야기

최근에 게시된 이야기