[Javascript] getElement 메서드 비교

 

DOM API 에서 HTML 은 다음과 생성자를 call 한다.

 

각 생성자별로 사용할 수 있는 메서드가 다르다.

Node() 의 인스턴스는 메서드 중 .textContent 사용 가능하지만 .innerHTML 사용 불가하다.

Element() 의 인스턴스는 메서드 중 .innerHTML 사용 가능하지만 .style 사용 불가하다.

HTMLElement() 의 인스턴스는 메서드 중 .style 사용 가능하며 call 하는 상위 생성자의 메서드 모두 사용 가능하다.

 

javascript에서 querySelector, getElementById, getElementsByTagName 별로 데이터 타입이 달라 사용 가능한 메서드가 다르다.

이게 너무 헷갈려 정리한다.

 

 

Javascript에서 사용할 수 있는 getElement(s) 메서드

 

1. 다수의 태그 : getElements

document.메서드	반환	아이템	정적/동적
querySelectorAll	NodeList 객체	Element	정적(변경 없음)
getElementsByClassName	HTMLCollection 객체	Element	동적(실시간 변경)
getElementsByTagName	HTMLCollection 객체	HTMLElement	동적(실시간 변경)

위 메서드 모두 forEach 사용을 위해서는 Array.from() 을 사용해야 한다.

정적 인스턴스인 NodeList 객체는 HTML 태그가 변경되어도 내부 아이템 변경 없다. 자식 태그를 붙이거나 삭제해도 처음 변수에 저장한 상태 그대로이다.

동적 인스턴스인 HTMLCollection 객체는 실시간 변경이어서 자식 태그 붙이거나 삭제하면 해당 변수에 변화가 바로 반영된다.

 

반복문 사용

1. 객체[i] 사용

위 3가지 모두 반복문으로 객체[i] 할 경우 아이템은 HTMLElement 로 확인된다.

 

2. for(... of 객체) 사용

querySelectorAll, getElementsByClassName 의 아이템은 Element 로 확인된다. for(... of ) 는 사용하지 않는게 좋겠다.

getElementsByTagName 의 아이템은 HTMLElement 로 확인된다.

 

 

배열로 변환

배열로 바꾸는 방법은 아래와 같이 하면 된다.

// 방법 1
Array.prototype.slice.call(객체);
// slice : begin부터 end까지 얕은 복사로 배열 객체를 반환

// 방법 2
Array.from(객체);

배열 변환시 아이템은 HTML Element 로 확인된다. .classList 나 .style 등 사용할 수 있다.

 

 

2. 단일 태그 : getElement

document.메서드	반환	가능 메서드
querySelector	Element	classList, id, innerHTML
getElementsById	HTMLElement	innerText, style

DOM API 에서 체인은 Node <- Element <- HTMLElement 로 되어 있어 HTML Element 에서 더 많은 메서드, 프로퍼티 사용할 수 있다.

 

querySelector는 Element로 style 지정을 할 수 없다. HTMLElement 변환 가능하거나 prototype 추가하지 않으면 메서드 사용시 불편한 점이 있다.