HTML 요소 찾기

id, tag name, class name, CSS 선택자, HTML 객체 컬렉션

아이디로 찾기

const myElement = document.getElementById("img");

찾았으면 요소를 객체로 리턴해줍니다. 없으면 null을 리턴해줍니다.

태그네임으로 찾기

const x = document.getElementsByTagName("x");

결합

아이디와 태그네임을 둘다 활용해 범위를 좁혀보겠습니다.

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

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

var x = document.querySelectorAll("p.intro"); => 찾고자 하는 것 <p class="intro">

HTML 객체 컬렉션을 이용해서 HTML 요소 찾기

var x = document.forms["form1"]; 
// 이렇게 하면 form1에 대한 form 내용 전부가 객체로 전달 됩니다.
var text = "";
for(i=0; i<x.length; i++) text += x.elements[i].value + "<br>";
// 예를 들어 2개의 form이 있고, 안의 내용이 Donald, Trump 각각 이렇게 담겨있고,
// submit버튼이 있으면, x.elements[0] = 'Donald', x.elements[1] = 'Trump',
// x.elements[2] = 'submit'이 담기게 됩니다.

document.getElementById("caption").innerHTML = text;

결과값은

Donald
Trump
Submit

이 됩니다.

이 밖에 document와 함께 쓰일 수 있는 HTML 객체 컬렉션에는 anchors, body, documentElement, embeds, forms, head, images, links, scripts, title 등이 있습니다.