[JS] DOM 요소에 접근하기

DOM에 접근하기

웹 문서에서  원하는 요소를 찾아가는 것을 '접근한다'고 표현 DOM에 접근하는 몇 가지의 방법이다.

 

 

getElementById() 

id속성은 문서 안에서 중복되지 않도록 사용하는 선택자이다.

기본형 (document.getElementById("id명")}

 

<span id="span1">id선택자</span>
<script src="index.js"></script>

 

const span = document.getElementById("span1");

 

 

getElementByClassName()

class 선택자 이름이 들어 있는 DOM요소에 접근

기본형 (document.getElementClassName("class명")}

 

<span class="span1">class선택자</span>
<script src="index.js"></script>

 

const span = document.getElementsByClassName("span1");

 

 

getElementByTagName()

class나 id를 지정하지 않은 DOM 요소에 접근할 때 사용

기본형 (document.getElementByTagName("tag명")}

 

<span>tag선택자</span>
<script src="index.js"></script>

 

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

 

 

querySelector(), querySelectorAll()

DOM객체에 자유롭게 제어하기 위해 사용

접근명에 class면 앞에 .을, id면 앞에 #을 붙혀준다.

접근하려는 요소가 여러개 일 경우 querySelectorAll()을 사용

반환형은 노드값이거나 노드리스트형이다.

기본형 (document.querySelector(".class명 혹은 #id")}

 

<span>tag선택자</span>
<span>tag선택자</span>
<span>tag선택자</span>
<span>tag선택자</span>
<span>tag선택자</span>
<script src="index.js"></script>

 

 

const span = document.querySelector("span");
const span2 = document.querySelectorAll("span");