If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

검토하기: jQuery를 이용한 DOM 접근

jQuery를 이용하여 DOM 요소를 찾기 위해서, 유효한 CSS 선택자를 jQuery 함수로 전달해야 합니다:
$("h1"); // 모든 h1 선택
$("#heading"); // "heading" id를 갖는 요소 선택
$(".warning"); // "warning" 클래스 이름을 갖는 모든 요소 선택
jQuery 함수는 $ 또는 jQuery로 불릴 수 있으므로 위와 다음은 같습니다:
jQuery("h1");  
jQuery("#heading");  
jQuery(".warning");  
많은 사람들은 $이 짧기 때문에 이를 더 선호합니다.
jQuery 함수는 비록 조건을 만족하는 요소가 단 하나뿐이거나 심지어 없는 경우에도 항상 요소들로 이루어진 jQuery 컬렉션을 반환합니다. 더 자세한 내용은 jQuery 함수에서 볼 수 있습니다.
일단 DOM 요소들을 jQuery를 이용해서 찾았다면, 해당 요소들의 내부 컨텐츠를 text()를 이용해서 설정하는 등의 행동을 할 수 있습니다: $("#temperature").text("89° Fahrenheit"); (전체 예제 보기)
내부 컨텐츠를 얻기 위해서, 매개변수를 전달하지 않는 것으로 같은 메소드 text()를 사용할 수 있습니다:
var heading = $("#heading").text();
다음 수업에서는, DOM 요소들의 특성을 지정하고 가져오는 메소드들을 더 많이 배워볼 것입니다.
이러한 jQuery 함수들은 모두 HTML/JS course 에서 배웠던 DOM API를 사용합니다. 예를 들어, $ 함수는 getElementById()querySelectorAll()과 같은 메소드들을 사용하고, attr()getAttribute() 메소드를 사용합니다. 여러분이 $ 함수를 사용할 때, 함수를 더 짧은 코드에서 사용하게 되는데, 이 코드는 모든 jQuery가 지원되는 브라우저에서 동작하며 이는 더 최근의 DOM API 함수를 사용할 때 더 중요하다는 것을 기억하세요.