자바스크립트 HTML DOM 요소 (Elements)

이 페이지는 HTML 페이지에서 HTML 요소를 찾아 액세스하는 방법을 알려줍니다.


HTML 요소 찾기

자바스크립트로 HTML 요소를 조작하려고 합니다.

먼저 요소를 찾아야 합니다. 여러가지 방법이 있습니다:

  • id로 HTML 요소 찾기
  • tag name으로 HTML 요소 찾기
  • class name으로 HTML 요소 찾기
  • CSS selectors로 HTML 요소 찾기
  • HTML object collections으로 HTML 요소 찾기

id로 HTML 요소 찾기

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

이 예제에서는 id = “intro”인 요소를 찾습니다:

Example

이 예제는 getElementById 메소드를 보여줍니다!

Hello World!

The text from the intro paragraph is Hello World!

요소를 찾으면, 메소드는 요소를 객체(myElement)로 반환합니다.

요소를 찾지 못하면, myElement는 null을 포함합니다.


tag name으로 HTML 요소 찾기

이 예제는 모든 <p> 요소를 찾습니다:

Example

The first paragraph (index 0) is: Hello World!

이 예제에서는 id = “main”인 요소를 찾고, “main” 안의 모든 <p> 요소를 찾습니다:

Example

The first paragraph (index 0) inside “main” is: The DOM is very useful.


class name으로 HTML 요소 찾기

같은 클래스 이름을 가진 모든 HTML 요소를 찾으려면, getElementsByClassName()을 사용합니다.

이 예제는 class = “intro”인 모든 요소의 목록을 반환합니다.

Example

The first paragraph (index 0) with class=”intro”: The DOM is very useful.


CSS 선택자(selectors)로 HTML 요소 찾기

지정된 CSS 선택자 (ID, 클래스 이름, types, attributes, values of attributes 등)와 일치하는 모든 HTML 요소를 찾으려면, querySelectorAll() 메소드를 사용합니다.

이 예제는 class = “intro”인 모든 <p> 요소의 목록을 반환합니다.

Example

The first paragraph (index 0) with class=”intro”: The DOM is very useful.


HTML object collections으로 HTML 요소 찾기

이 예제는 forms 컬렉션에서 id = “frm1″인 양식 요소를 찾고, 모든 요소 값(element values)을 표시합니다:

Example

First name:
Last name:


Click “Try it” to display the value of each element in the form.

다음 HTML 객체 (그리고 객체 모음(object collections))에도 액세스할 수 있습니다:

  • document.anchors
  • Example

    Number of anchors are: 3

  • document.body
  • Example

  • document.documentElement
  • Example

  • document.embeds
  • Example

    Number of embeds: 0

  • document.forms
  • Example

    Number of forms: 1

  • document.head
  • Example

    [object HTMLHeadElement]

  • document.images
  • Example

    Number of images: 2

  • document.links
  • Example

    Number of links: 2

  • document.scripts
  • Example

    Number of scripts: 1

  • document.title
  • Example

    The title of this document is: W3Schools Demo

출처: JavaScript HTML DOM Elements

답글 남기기