jQuery를 이용한 HTML DOM 접근 방법 - 기본 셀렉터

오랜만에 jQeury관련 글을 올려봅니다. 한동아 블로그에 관심을 끄고 있다가 요 근래 들어 다시 블로그에 관심을 기울이고 있습니다. 앞으로는 꾸준히 블로그를 관리할 계획입니다.

오늘은 jQuery를 이용한 HTML DOM에 접근하는 방법에 대하여 정리해보겠습니다.

 

jQuery의 강력한 기능인 HTML DOM을 탐색하는 기능에 대해 알아보겠습니다. jQuery의 DOM 탐색은 CSS Selecter를 사용하고 있어, CSS의 표현식을 알고 있다면 보다 쉽게 셀렉터를 이해 할 수 있습니다.

jQuery에서는 원하는 HTML의 DOM 요소를 찾기 위해 $(Selector), jQuery(Selector)와 같은 표현식을 사용합니다.

 

$는 jQuery의 축약어로 같은 역할을 하며, 다음과 같은 형태로 사용하여 원하는 DOM 요소를 선택 할 수 있습니다.

 

셀렉터 종류	셀렉터 표현방법
All Selector	$("*")
ID Selector	$("#id")
Element Selector	$("elementName")
Class Selector	$(".className")
Multiple Selector	$("selector1, selector2, selectorN")

 

$(Selector), jQuery(Selector)를 사용하여 선택한 DOM의 요소는 "document.getElementByID"를 이용한 것과는 다르게 해당 객체를 jQuery 객체로 랩핑해서 반환해주기 때문에 jQuery에서 지원하는 기능을 쉽게 적용할 수 있는 장점이 있습니다.

 

All Selector : $("*")

HTML DOM을 탐색하여 모든 요소를 배열형식의 Jquery 객체로 반환합니다.

 

 

 

 

 

jQuery를 페이지에 로딩 시키고 $(document).ready() 함수를 통해 모든 객체를 선택한 후 선택된 jQuery 객체를 눈에 잘 보이게 붉은색의 1pixel 테두리를 설정 하도록 해 보겠습니다.

 

$(document).ready() 또는 $(function() {})는 페이지의 HTML DOM이 모두 로드가 되면 실행이 되는 함수로 자바스크립트의 onload 메서드의 확장된 역할을 하고 있습니다. jQuery를 사용하실 경우 onload 이벤트의 사용보다 $(document).ready() 또는 $(function() {})를 사용하시길 적극 추천 드리면 관련 내용에 대해서는 마지막 부분에 다시 한번 정리를 하도록 하겠습니다.

 

 

 

위의 화면과 같이 jQuery를 통해 선택된 모든 요소에 붉은색 테두리가 설정된 것을 확인 할 수 있습니다. 이러한 기능이 가능한 것은 일반적인 DOM 객체가 아닌 jQuery 객체로 반환이 되었기 때문입니다.

 

ID Selector : $("#ID")

문서 안에 있는 여러 엘리먼트 중 ID 값이 동일한 엘리먼트를 찾아 반환합니다.

동일한 값(동일 ID)의 엘리먼트가 여러 개일 경우에는 최상위에 있는 엘리먼트를 선택 반환하여, 한 문서(HTML)에는 한 ID만 존재하는 것이 원칙으로 동일한 값을 통해 접근을 하고 싶을 경우에는 class 또는 attribute의 동일한 값을 설정하여 사용하길 권장합니다.

 

 

 

 

Element Selector ; $("element")

자바스크립트의 getElementByTagName("tagName")과 비슷한 역할을 하여 DOM 개체를 구성하는 태그와 동일한 객체를 찾아 다수의 jQuery 객체를 반환합니다.

아래의 소스는 jQuery를 통해 선택된 "h1" 개체의 테두리를 노란색으로 변경합니다.

 

 

 

 

 

class Selector : $(".class")

자바스크립트의 getElementByClassName()과 동일한 역할을 하고 있는 셀렉터입니다.

getElementByClassName() 메서드의 경우 몇몇 브라우저에서 지원을 하고 있지 않기 때문에 크로스브라우징을 지원해야 하는 개발이라면 올바르게 동작하지 않는 문제가 발생할 수 있습니다.

IE8이하 버전에서는 지원을 하고 있지 한다고하며, IE9와 HTML 차기버전이 HTML5에서는 기본적으로 지원 합니다.

 

프런트 부분을 개발하다 보면 위와 같은 문제로 인하여, 많은 개발자가 고민하고 해결책을 찾다가 많은 시간을 허비하는 경우가 상당합니다. 문제를 찾기 위해 자바스크립트 디버깅을 해 보지만 상당한 노가다를 필요로 하는 경우도 많을 뿐더러 브라우저마다 에러를 내는 행식이 다르기 때문에 상당한 골치 덩어리 입니다.

 

여기서 다시 하번 jQuery의 강점인 크로스브라우징에 대한 강조를 jQuery의 Class Selector의 경우 현존하는 대부분의 브라우저에서 사용이 가능하니, 위와 같은 문제를 미연에 방지 할 수 있으며 이러한 문제에 대해 고민을 할 필요가 없습니다.

 

다음은 문서(HTML)내의 클래스명이 article인 요소를 찾아 테두리의 색상과 배경을 변경하는 예저입니다.

 

 

 

Multiple, Complex Selector : $("selector1, selector2, selectorN"), $("#id div.class")

위에서 설명한 셀렉터의 나열이나 조합을 통하여 개발자가 원하는 객체를 보다 쉽고 정확하고 빠르게 탐색할 수 있습니다.

셀렉터를 ","를 통하여 나열할 경우 각각의 셀렉터를 통해 탐색된 객체의 집합을 반환하며, 셀렉터의 조합을 통하여 탐색을 했을 경우 각 셀렉터의 교집합 조건의 객체가 탐색되어 반환 됩니다.

 

$("#content","div","a",".article") 경우 ID의 값이 "content"인 객체, "div","a" 태그를 가지는 객체, 클래스 명이 article인 객체를 탐색하여 반환을 하게 되는 반면 $("div.article")의 경우 "div" 태그로 구성되었으며 동시에 클래스명이 "article"인 객체를 반환합니다.

 

다음 두가지 예제를 통해 두 가지 셀렉터의 동작과 차이점을 알아보겠습니다.

 

첫번째 예제 : ID 값이 content이며 ul요소를 찾아 테두리를 파랑색으로 변경합니다.

 

 

두번째 예제 : DIV 요소중에 클래스명이 searchbar-container인 요소를 찾아 테두리를 파랑색으로 변경합니다.

 

 

오늘은 jQuery의 셀렉터의 기본적인 내용을 정리했습니다.

셀렉터는 jQuery에서 가장 많이 사용하는 부분이며, 동적인 웹 개발에 필수적인 항목으로 반드시 알아두어야 하는 부분입니다.