JavaScript - 요소 선택하기 (태그 선택하기)

서론

Javascript로 웹페이지를 다루기 위해서는 우선 원하는 요소(태그)를 정확하게 선택을 해야 됩니다.

그다음에 선택한 요소를 변경하거나 선택한 요소의 다음 부분에 새로운 요소를 생성하는 등의 일을 할 수 있습니다.

 

Javascript에서는 다양한 방법으로 요소를 선택하고 접근할 수 있게 해 줍니다. 

본문에서는 요소를 선택하는 다양한 방법에 대해서 알아보겠습니다.

 

본문에서는 순수 Javascript에 대해서만 설명하겠습니다.

 

Javascript로 요소(태그)를 선택하는 방법

웹브라우저에서 생성된 웹페이지를 Javascript로 가지고 오면 document라는 이름의 DOM객체를 가지고 오게 됩니다.

이 document객체에는 실질적인 웹페이지의 요소들을 담고 있는 객체입니다.

이 안에서 다양한 메서드를 이용해서 요소들을 선택할 수 있습니다.

 

사용 방법	설명
document.getElementByTagName('TagName')	태그명으로 요소를 선택
document.getElementByName('Name')	이름으로 요소를 선택
document.getElementByClassName('TagName')	클래스명으로 요소를 선택
document.getElementById('TagName')	ID명으로 요소를 선택
doucument.querySelector('CSS선택자')	CSS 선택자를 이용해서 요소를 선택
doucument.querySelectorAll('CSS선택자')

 

getElementByTagName

태그명으로 요소를 선택하는 방법입니다.

HTMLCollection의 형태로 받아옵니다.

const el = document.document.getElementsByTagName('h1');

getElementByName

이름 속성이 동일한 요소를 선택하는 방법입니다.

NodeList의 형태로 받아옵니다.

const el = document.getElementsByName('subject1');

getElementByClassName

클래스명이 동일한 요소를 선택하는 방법입니다.

HTMLCollection의 형태로 받아옵니다.

const el = document.getElementsByClassName('subject2');

getElementById

ID명이 동일한 요소를 선택하는 방법입니다.

ID는 객체에서 유일한 값이므로 하나만 선택이 됩니다. (Element로 받아 옵니다.)

const el = document.getElementsById('subject3');

querySelector

CSS선택자를 이용한 요소 선택 방법입니다.

선택되는 요소가 하나가 아니라면, 가장 첫 번째 요소를 선택합니다. (Element로 받아 옵니다.)

const el = document.querySelector('h1');

querySelectorAll

CSS선택자를 이용한 요소 선택 방법으로 여러 개의 요소를 찾기 위해 사용합니다.

NodeList의 형태로 받아옵니다.

const el = document.querySelectorAll('h1');

'복사'되는 것이 아닌 '선택' 

객체의 형태로 메모리 주소의 개념을 가지고오는 방법이기 때문에 전체적인 DOM객체에서 요소를 선택하는 것입니다.

복사하여 독립된 객체가 되는 것이 아닙니다.

 

가장 효율적인 요소 선택 방법?

사실 위의 방법 중 무조건 이걸 사용하라고 하지 않습니다.

상황에 따라, 필요에 따라 적절히 사용하라고 권하고 있습니다.

 

위의 방법들에는 여러가지 취약점이 존재합니다. HTML 문서를 변경하거나 태그명이 바뀌거나, 클래스명이 바뀌거나 등등 다양한 변화가 일어나면 원하지 않는 Javascript동작이 일어나거나, 요소를 선택하지 못하는 경우가 생길 수 있습니다.

 

따라서 어떤 요소를 선택하는 방법을 고르고, 이후 문제가 됐을 시 어떻게 해결을 할지 준비 또는 대비를 해두는 것이 가장 올바른 방법입니다.