자바스크립트 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!


Hello World!

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

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


tag name으로 HTML 요소 찾기

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

Example

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


Hello World!

The DOM is very useful.

This example demonstrates the getElementsByTagName method

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

Example

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


Hello World!

The DOM is very useful.

This example demonstrates the getElementsByTagName method


class name으로 HTML 요소 찾기

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

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

Example

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


Hello World!

The DOM is very useful.

This example demonstrates the getElementsByClassName method.


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.


Hello World!

The DOM is very useful.

This example demonstrates the querySelectorAll method.


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.


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

    
    HTML Tutorial
    CSS Tutorial
    XML Tutorial

  • document.body
  • Example

    
    

  • document.documentElement
  • Example

    
    

  • document.embeds
  • Example

    Number of embeds: 0

    
    

  • document.forms
  • Example

    Number of forms: 1

    
    
    First name:

  • document.head
  • Example

    [object HTMLHeadElement]

    
    

  • document.images
  • Example

    Number of images: 2

    
    
    
    
    

  • document.links
  • Example

    Number of links: 2

    
    

    HTML
    CSS

  • document.scripts
  • Example

    Number of scripts: 1

    
    

  • document.title
  • Example

    The title of this document is: W3Schools Demo

    
    
      
      W3Schools Demo
      
    
    
    

출처: JavaScript HTML DOM Elements

Leave a comment