jQuery 와 Element 객체와 Node 객체

그림 : http://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

Element객체와 jQuery

document.getElementById : return type은 HTMLLIELement
document.getElementsByTagName : return type은 HTMLCollection (유사배열)
-> 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection return
constructor 혹은 constructor.name 로 확인 가능

var li = document.getElementsByTagName('li');
var li2 = $(li);
위와같이 jQuery function 인 $(); 로 둘러싸면, return type이 jQuery 가 되지만,
복수일 경우 유사배열로 잡히며, li2[0], li2[1]... 각각은 HTMLLIELement 타입이 된다.
-> l1.constructor.name, li2.constructor.name, li2[0].constructor.name  로 확인 가능

document.getElementById('target').getAttribute(name);
==> ==> $('#target').attr(name);
document.getElementById('target').setAttribute(name, value) ;
==> $('#target').attr(name, value);

document.getElementById('target').hasAttribute(name);

document.getElementById('target').removeAttribute(name);
==> $('#target').removeattr(name);

Node 객체

Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.
Node.firstChild : 첫번째 자식노드
Node.lastChild : 마지막 자식노드
Node.nextSibling : 다음 형제 노드
Node.previousSibling : 이전 형제 노드

** Node 와 Node.nextSibling.previousSibling는 같다.  (이런 식으로 Chaining 식으로 사용 가능)

Node.nodeType node의 타입을 의미한다.
Node.nodeName node의 이름 (태그명을 의미한다.)

** 2015_08_28 추가!

querySelector() 이용 시, 태그의 class 속성 접근 시 매우 편리

this.calls.querySelector('.handled-call.incoming .additionalContactInfo');
위와 같은 방식으로 calls라는 변수(어느 태그값을 가져온 변수 document.getElementById 등 이용) 하위에
태그들 중 handled-call.incoming 클래스를 가진 녀석의 하위에 있는 녀석들 중 additionalContactInfo 클래스를 가진 녀석이 리턴된다.