JavaScript HTML DOM Elements

« Previous Next Chapter »

이 페이지는 HTML 페이지에서 HTML 요소(elements)들은 어떻게 찾아 접근하는지를 가르쳐줍니다.

HTML Elements 찾기

HTML 요소를 조작하는데 JavaScript 가 종종 사용됩니다.

이렇게 하려면, 먼저 요소를 찾아야 합니다. 이를 수행하는 몇 가지 방법이 있습니다.:

Finding HTML elements by id
Finding HTML elements by tag name
Finding HTML elements by class name
Finding HTML elements by HTML object collections

Id 로 HTML Elements 찾기

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

아래의 예는 id="intro" 인 요소를 찾습니다:

Example

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

Try it Yourself »

요소가 발견되면, 메서드는 요소를 객체(in x)로 반환합니다.

요소가 발견되지 않으면, x 는 null 을 가집니다.

Tag Name 으로 HTML Elements 찾기

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

Example

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

Try it Yourself »

이 예는 id="main" 인 요소를 찾은 후, "main" 안에 있는 모든 <p> 요소를 찾는다 :

Example

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

Try it Yourself »

Class Name 으로 HTML Elements 찾기

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

다음의 예는 class="intro" 인 모든 요소의 목록을 반환합니다.

Example

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

Try it Yourself »

	Finding elements by class name does not work in Internet Explorer 5,6,7, and 8.

HTML Object Collections 으로 HTML Elements 찾기

이 예는 id="frm1"을 갖는 form 요소를 forms collection 형태로 찾아 모든 요소 값을 표시합니 다.:

Example

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;

Try it Yourself »

다음의 HTML 객체 컬렉션(collection)들이 접근 가능합니다.:

Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »

« Previous Next Chapter »