HTML DOM Elements

Table of contents

1. Finding HTML Elements
   1. by Id
   2. by Tag Name
   3. by Class Name
   4. by CSS Selectors
   5. by HTML Object Collections

Finding HTML Elements

요소를 조작하기 위해서는 먼저 찾아야함

요소를 찾는데에는 5가지 방법이 있음

by Id

id로 요소 찾기

가장 쉽고 많이 이용하는 방식, 한개의 요소만 가져올 수 있음

요소가 발견되면 메소드는 요소를 변수의 객체로 리턴

요소를 찾을 수 없으면 null

Syntax

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

by Tag Name

태그 이름으로 요소 찾기

여러가지 요소를 가지고 올 수 있음, 변수에는 요소(들)를 배열 형식으로 가져옴

Syntax

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

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
//요소 main id를 찾은 후 그 자식들 p태그 찾기

by Class Name

클래스 이름으로 요소 찾기

여러가지 요소를 가지고 올 수 있음, 변수에는 요소(들)를 배열 형식으로 가져옴

Syntax

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

Note!

by CSS Selectors

CSS 선택자를 이용해서 요소 찾기

querySelectorAll() 메소드 사용

Syntax

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

Note!

by HTML Object Collections

요소를 배열 형식으로 가져온 변수 출력

예제

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;

→ form안에 있는 요소들을 x 변수에 모두 담고 하나한 출력한 것

→ x.elements[i].value와 x[i]는 같음