[DOM] 제어 대상을 찾기

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

 

---

jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다.

jQuery는 객체를 조회할 때 CSS 선택자를 이용한다.

---

 jQuery의 기본문법 

jQuery의 기본 문법은 단순하고 강력하다. 

 

간단한 예제를 통해서 알아보도록 하자.

$ ('li').css('color', 'red');

$()는 jQuery의 함수이다.

이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다.

이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다.

 

위 소스에서 css는 li태그에 대한 객체들의 style에 color:red로 변경한다.

---

 jQuery의 사용 예제 

 DOM을 이용한 코드 

var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++){
    lis[i].style.color='red';   
}

 jQuery를 이용한 코드 

$('li').css('color', 'red') </pre>

위 두개의 코드들은 li태그의 style을 color:red로 변경시켜주는 코드이다.

이와 같이, DOM을 사용하였을 때는 여러줄인 것을 jQuery로 했을 때는 한 줄로 줄일 수 있다.

---

또 다른 예제를 통해서, 알아보자.

 

 DOM을 이용한 코드 

var li = document.getElementById('active');
li.style.color='red';
li.style.textDecoration='underline';

 jQuery를 이용한 코드 

$('$active').css('color', 'red').css('textDecoration', 'underline');

위 코드는 id값이 active인 element들의 글자색을 빨간색으로 바꾸고, 밑줄이 그어지는 코드이다.

 

Dom에서는 li.style을 반복하여 코드가 두개를 작성해야 두 명령어가 실행된다.

이에 비해 jQuery는 선택한 element들에 대해서 연속적으로 메소드를 호출해서 두가지 작업을 수행하였다.

 

이처럼 연속적으로 메소드를 호출해서 여러개의 작업을 실행하는 것을 chaining이라고 한다.