jQuery 와 Element 객체와 Node 객체

Posted by ironmask84
2015. 7. 16. 10:09 나는 프로그래머다!/HTML5




그림 : 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 클래스를 가진 녀석이 리턴된다.

'나는 프로그래머다! > HTML5' 카테고리의 다른 글

JavaScript - 이벤트 응용1 (버블링과 캡쳐링)  (0) 2015.07.28
JavaScript - 이벤트  (0) 2015.07.28
JavaScript에서의 객체와 객체지향  (0) 2015.07.22
JavaScript의 함수!!  (0) 2015.07.21
JavaScript 재귀함수 예시  (0) 2015.07.20
jQuery 와 Element 객체와 Node 객체  (0) 2015.07.16
Attribute와 Property  (0) 2015.07.14
DOM Tree  (0) 2015.07.13
JQuery 초 간단 이해  (0) 2015.07.10
SublimeText2  (0) 2015.06.19
HTML 과 JavaScript 기본 참고 사이트  (0) 2015.06.19
 
이 댓글을 비밀 댓글로