JavaScript HTML DOM Elements

여기에서는 HTML 페이지에서 HTML 요소를 찾고, 접근하는 방법을 확인합니다.

종종 JavaScript로 HTML 요소를 조작하기를 원하는 경우가 있습니다.

그러기 위해, 요소를 먼저 찾아야 합니다. 이것을 하는 여러 가지 방법을 아래와 같습니다.

• id로 HTML 요소를 찾기
• 태그 명으로 HTML 요소를 찾기
• 클래스 명으로 HTML 요소를 찾기
• CSS 선택자(Selectors)로 HTML 요소를 찾기
• HTML 오브젝트 컬렉션으로 HTML 요소를 찾기

DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 id를 사용하는 것입니다.

하기 예제에서는 id=“intro”로 요소를 찾고 있습니다.

Finding HTML Elements by Id

Hello World!

This example demonstrates the getElementByIdmethod.

요소가 발견될 경우, 메서드는 myElement에 오브젝트로 해당 요소를 반환합니다.

오소가 발견되지 않는 경우, myElement는 null을 반환합니다.

하기 예제에서 모든 ''<p>'' 요소들을 찾습니다.

Finding HTML Elements by Tag Name

Hello Sherlock Homes

This example demonstrates the getElementByTagName method.

하기 예제에서 id=“main”을 가진 요소를 찾은 후에 main 내부에 있는 모든 <p> 요소들을 찾습니다.

Finding HTML Elements by Tag Name

동일한 클래스 명으로 모든 HTML 요소를 찾을 경우, getElementsByClassName()를 사용합니다.

하기 예제는 class=“intro”를 가진 모든 요소들의 목록을 반환합니다.

Finding HTML Elements by Class Name

Hello World!

The DOM is very useful.

This example demonstrates the getElementsByClassName method.

클래스 명으로 요소를 찾는 것은 인터넷 익스플로러 8과 이전 버전에서는 작동하지 않습니다.

지정 CSS 선택자 (id, class, names, types, attributes, values of attributes 등등)에 일치하는 모든 HTML 요소들을 찾을 경우, querySelectorAll() 메서드를 사용합니다.

하기 예제는 class=“intro”를 가진 모든 <p>요소 목록을 반환합니다.

Finding HTML Elements by Query Selector

Hello World!

The DOM is very useful.

This example demonstrates the getElementsByClassName method.

클래스 명으로 요소를 찾는 것은 인터넷 익스플로러 8과 이전 버전에서는 작동하지 않습니다.

하기 예제는 형식 컬렉션(form collection)에서 id=“frm1을 가진 형식 요소(form element)를 찾고 모든 요소의 값을 표시합니다.

Finding HTML Elements Using document.forms

Click "Try it!!!" to display the value of each element in the form.