[javascript] 56. DOM 요소(DOM elements) - 자바스크립트 강좌 JS / CSE

JavaScript HTML DOM Elements

1. Finding HTML Elements

 종종 자바스크립트에서, HTML 요소를 조작하기를 원합니다.

 이러한 일을 하기 위해, 요소를 찾는 일을 먼저 해야합니다. 이러한 일을 하는 여러 가지 방법이 있습니다:

  - id를 통하여 HTML 요소 찾기

  - tag 이름을 통하여 HTML 요소 찾기

  - class 이름을 통하여 HTML 요소 찾기

  - HTML 객체 집합을 통해서 HTML 요소 찾기 

2. Finding HTML Elements by Id

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

 

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

 

 요소를 찾았다면, 메소드는 요소를 객체로서 반환하게 됩니다.

 찾지 못하면, x는 null을 갖게 됩니다.

3. Finding HTML Elements by Tag Name

 아래 예제는 id 가 main인 요소를 찾아서 main안의 모든 <p> 요소를 찾는 예제입니다:

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

4. Finding HTML Elements by Class Name

 같은 class 이름으로 모든 HTMl 요소를 찾길 원한다면, 아래 메소드를 사용하면 됩니다.

 document.getElementsByClassName("intro");

 

5. Finding HTML Elements by HTML Object Collections

 아래 예제는 id가 frm1인 서식 요소를 찾아서, 서식안의 집합내에서 모든 요소의 값을 출력하는 예제입니다:

 

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