======JavaScript HTML DOM Elements====== * description : JavaScript HTML DOM Elements * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-22 \\ =====Source of the article==== [[https://www.w3schools.com/js/js_htmldom_elements.asp|JavaScript HTML DOM Elements]]\\ \\ %%여기에서는 HTML 페이지에서 HTML 요소를 찾고, 접근하는 방법을 확인합니다.%%\\ \\ =====Finding HTML Elements===== %%종종 JavaScript로 HTML 요소를 조작하기를 원하는 경우가 있습니다.%%\\ \\ 그러기 위해, 요소를 먼저 찾아야 합니다. 이것을 하는 여러 가지 방법을 아래와 같습니다.\\ * id로 HTML 요소를 찾기 * 태그 명으로 HTML 요소를 찾기 * 클래스 명으로 HTML 요소를 찾기 * CSS 선택자(Selectors)로 HTML 요소를 찾기 * HTML 오브젝트 컬렉션으로 HTML 요소를 찾기 * =====Finding HTML Element by Id===== DOM에서 HTML 요소를 찾는 가장 쉬운 방법은 요소 id를 사용하는 것입니다.\\ \\ 하기 예제에서는 ''id="intro"''로 요소를 찾고 있습니다.\\ ====예제====

Finding HTML Elements by Id

Hello World!

This example demonstrates the getElementByIdmethod.

\\ 요소가 발견될 경우, 메서드는 myElement에 오브젝트로 해당 요소를 반환합니다.\\ \\ 오소가 발견되지 않는 경우, myElement는 ''null''을 반환합니다.\\ \\ =====Finding HTML Elements by Tag Name===== %%하기 예제에서 모든 ''

'' 요소들을 찾습니다.%%\\ ====예제====

Finding HTML Elements by Tag Name

Hello Sherlock Homes

This example demonstrates the getElementByTagName method.

\\ 하기 예제에서 ''id="main"''을 가진 요소를 찾은 후에 ''main'' 내부에 있는 모든 ''

'' 요소들을 찾습니다.\\ ====예제====

Finding HTML Elements by Tag Name

The DOM is very useful.

This exmaple demonstrates the getElementsByTagName method.

\\ =====Finding HTML Elements by Class 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과 이전 버전에서는 작동하지 않습니다.** =====finding HTML Elements by CSS Selectors===== 지정 CSS 선택자 (id, class, names, types, attributes, values of attributes 등등)에 일치하는 모든 HTML 요소들을 찾을 경우, ''querySelectorAll()'' 메서드를 사용합니다.\\ \\ 하기 예제는 ''class="intro"''를 가진 모든 ''

''요소 목록을 반환합니다.\\ ====예제====

Finding HTML Elements by Query Selector

Hello World!

The DOM is very useful.

This example demonstrates the getElementsByClassName method.

\\ **클래스 명으로 요소를 찾는 것은 인터넷 익스플로러 8과 이전 버전에서는 작동하지 않습니다.** =====Finding HTML Elements by HTML Object Collections===== 하기 예제는 형식 컬렉션(form collection)에서 ''id="frm1''을 가진 형식 요소(form element)를 찾고 모든 요소의 값을 표시합니다.\\ ====예제==== Finding HTML Elements Using document.forms

Finding HTML Elements Using document.forms

First name:
Last name:

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

{{tag>오션, JavaScript HTML DOM Elements,}}