제이스크립트 HTML DOM 요소

이 장에서는 HTML 페이지에서 HTML 요소를 찾고 접근하는 방법을 설명합니다。

HTML 요소 찾기

일반적으로, JavaScript를 사용하여 HTML 요소를操作해야 합니다。

이 목표를 달성하기 위해, 먼저 이 요소를 찾아야 합니다. 여러 가지 방법이 있습니다：

  • id로 HTML 요소 찾기
  • 태그 이름으로 HTML 요소 찾기
  • CSS 선택자로 HTML 요소 찾기
  • CSS 선택자로 HTML 요소 찾기
  • HTML 객체 집합으로 HTML 요소 찾기

id로 HTML 요소 찾기

DOM에서 HTML 요소를 찾는 가장 간단한 방법은 요소의 id를 사용하는 것입니다。

이 예제는 id="intro"을 가진 요소를 찾습니다：

예제

var myElement = document.getElementById("intro");

직접 시도해보세요

요소를 찾았다면, 이 메서드는 객체로 해당 요소를 반환합니다(또는 myElement에 포함됩니다)。

요소를 찾지 못한 경우, myElement에 포함됩니다： null。

태그 이름으로 HTML 요소 찾기

이 예제는 모든 <p> 요소：

예제

var x = document.getElementsByTagName("p");

직접 시도해보세요

이 예제는 id="main"을 가진 요소를 찾아 "main"에서 모든 <p> 요소：

예제

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

직접 시도해보세요

CSS 선택자로 HTML 요소 찾기

같은 클래스 이름을 가진 모든 HTML 요소를 찾으시려면 다음을 사용하세요： getElementsByClassName()。

이 예제는 class="intro"을 포함하는 모든 요소의 목록을 반환합니다：

예제

var x = document.getElementsByClassName("intro");

직접 시도해보세요

인터넷 익스플로어 8 및 이전 버전에 적용되지 않습니다。

CSS 선택자로 HTML 요소 찾기

지정된 CSS 선택자(id, 클래스 이름, 타입, 속성, 속성 값 등)에 맞는 모든 HTML 요소를 찾으시려면 다음을 사용하세요： querySelectorAll() 메서드。

이 예제는 class="intro"을 가진 모든 요소를 반환합니다： <p> 요소 목록：

예제

var x = document.querySelectorAll("p.intro");

직접 시도해보세요

querySelectorAll() 인터넷 익스플로어 8 및 이전 버전에 적용되지 않습니다。

HTML 객체 선택자를 통해 HTML 객체를 찾습니다.

이 예제는 id="frm1"의 form 요소를 forms 집합에서 찾아, 모든 요소 값을 표시합니다:

예제

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

직접 시도해보세요

다음 HTML 객체(그리고 객체 집합)도 접근 가능합니다: