Amarans
0413 JavaScript | HTMLElement , HTMLCollection , jQuery 객체 | 본문
HTMLElement
getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다.
아래 코드는 getElement*의 리턴 값을 보여준다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
var li = document.getElementById('active');
console.log(li.constructor.name);
var lis = document.getElementsByTagName('li');
console.log(lis.constructor.name);
</script>실행결과 : HTMLLIElement
HTMLCollection
이것을 통해서 알 수 있는 것은 아래와 같다.
- document.getElementById : 리턴 데이터 타입은 HTMLLIELement
- document.getElementsByTagName : 리턴 데이터 타입은 HTMLCollection
즉 실행결과가 하나인 경우 HTMLLIELement, 복수인 경우 HTMLCollection을 리턴하고 있다.
실행결과가 하나인 엘리먼트들을 좀 더 살펴보자.
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="list">JavaScript</li>
</ul>
<input type="button" id="button" value="button" />
<script>
var target = document.getElementById('list');
console.log(target.constructor.name);
var target = document.getElementById('anchor');
console.log(target.constructor.name);
var target = document.getElementById('button');
console.log(target.constructor.name);
</script>실행결과 : HTMLLIElement
HTMLAnchorElement
HTMLInputElement
이를 통해서 알 수 있는 것은 엘리먼트의 종류에 따라서 리턴되는 객체가 조금씩 다르다는 것이다. 각각의 객체의 차이점을 알아보자. 링크는 DOM의 스팩이다.
- HTMLLIElement
- HTMLAnchorElement
- HTMLInputElement
https://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-74680021 '''
https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-48250443 '''
https://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6043025 '''
HTMLLIElement를 보자.
interface HTMLLIElement : HTMLElement {
attribute DOMString type;
attribute long value;
};HTMLAnchroElement이다
interface HTMLAnchorElement : HTMLElement {
attribute DOMString accessKey;
attribute DOMString charset;
attribute DOMString coords;
attribute DOMString href;
attribute DOMString hreflang;
attribute DOMString name;
attribute DOMString rel;
attribute DOMString rev;
attribute DOMString shape;
attribute long tabIndex;
attribute DOMString target;
attribute DOMString type;
void blur();
void focus();
};즉 엘리먼트 객체에 따라서 프로퍼티가 다르다는 것을 알 수 있다. 하지만 모든 엘리먼트들은 HTMLElement를 상속 받고 있다.
interface HTMLLIElement : HTMLElement {
interface HTMLAnchorElement : HTMLElement {
HTMLElement는 아래와 같다.
interface HTMLElement : Element {
attribute DOMString id;
attribute DOMString title;
attribute DOMString lang;
attribute DOMString dir;
attribute DOMString className;
};DOM Tree
모든 엘리먼트는 HTMLElement의 자식이다. 따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다. 동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고 있는데 이것은 엘리먼트의 성격에 따라서 달라진다. HTMLElement는 Element의 자식이고 Element는 Node의 자식이다. Node는 Object의 자식이다. 이러한 관계를 DOM Tree라고 한다.
jQuery와 같은 라이브러리를 이용한다면 이러한 관계를 몰라도 된다.
============================================================================
HTMLCollection
HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 유사배열로 배열과 비슷한 사용방법을 가지고 있지만 배열은 아니다.
HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
console.group('before');
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();
console.group('after');
lis[1].parentNode.removeChild(lis[1]);
for(var i = 0; i < lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();
</script>
</body>
</html>결과 : before
li
li
li#active
after
li
li#active
============================================================================
jQuery 객체
jQuery 함수의 리턴값으로 jQuery 함수를 이용해서 선택한 엘리먼트들에 대해서 처리할 작업을 프로퍼티로 가지고 있는 객체다.
암시적 반복
jQuery 객체의 가장 중요한 특성은 암시적인 반복을 수행한다는 것이다. DOM과 다르게 jQuery 객체의 메소드를 실행하면 선택된 엘리먼트 전체에 대해서 동시에 작업이 처리된다.
암시적 반복은 값을 설정할 때만 동작한다. 값을 가져올 때는 선택된 엘리먼트 중 첫번째에 대한 값만을 반환한다.
체이닝
chainig이란 선택된 엘리먼트에 대해서 연속적으로 작업을 처리할 수 있는 방법이다.
조회 결과
jQuery 객체에는 조회된 엘리먼트가 담겨 있다. jQuery 객체는 일종의 유사배열의 형태로 조회된 엘리먼트를 가지고 있기 때문에 배열처럼 사용해서 엘리먼트를 가져올 수 있다.
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
console.log($('li').length);
console.log($('li')[0]);
var li = $('li');
for(var i=0; i<li.length; i++){
console.log(li[i]);
}
</script>한가지 주의할 것은 li[i]의 값은 해당 엘리먼트에 대한 jQuery 객체가 아니라 DOM 객체라는 것이다. 따라서 jQuery의 기능을 이용해서 이 객체를 제어하려면 jQuery 함수를 이용해야 한다.
for(var i=0; i<li.length; i++){
$(li[i]).css('color', 'red');
}
아래와 같은 방법으로 조회된 결과를 열람할수도 있다.
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var li = $('li');
li.map(function(index, elem){
console.log(index, elem);
$(elem).css('color', 'red');
})
</script>map은 jQuery 객체의 엘리먼트를 하나씩 순회한다. 이 때 첫번째 인자로 전달된 함수가 호출되는데 첫번째 인자로 엘리먼트의 인덱스, 두번째 인자로 엘리먼트 객체(DOM)이 전달된다.
jQuery 객체 API
제어할 대상을 선택한 후에는 대상에 대한 연산을 해야한다. .css와 .attr은 jQuery 객체가 가지고 있는 메소드 중의 하나인데, jQuery는 그 외에도 많은 API를 제공하고 있다. 이에 대한 내용은 jQuery API를 참고하자.
jQuery API Documentation
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t
api.jquery.com
'JavaScript2' 카테고리의 다른 글
| 0415 JavaScript | jQuery 속성 제어 API / 조회 범위 제한 / Node객체| (1) | 2020.04.15 |
|---|---|
| 0414 JavaScript | Element객체 /식별자 / 조회 / 속성 API | (0) | 2020.04.14 |
| 0409 JavaScript | Dom , 제어대상찿기 , jQuery | (0) | 2020.04.09 |
| 0408_JavaScript | Navigator , 창 제어 | (0) | 2020.04.08 |
| 0407 JavaScript | BOM , Window , Location객체 | (0) | 2020.04.07 |
