HTML 조작

우리가 HTML에 스타일을 적용 할 때 HTML 요소를 선택한 후에 적절한 CSS 속성을 사용하여 스타일 했듯이HTML 조작도 마찬가지 입니다. HTML 문서를 조작하기 위해서는 HTML 요소를 선택한 후에 함수나 속성을 사용하여 HTML 요소를 제어! 즉 조작할 수 있습니다.

<aside> 💡 함수나 모르는 용어가 나오더라도 당황 하지 마세요! 쉽게 "HTML 요소를 선택해서 조작할 수 있구나!"라는 정도로 이해하시고요. 모르는 용어에 대한 설명은 뒤에서 자세히 다루도록 하겠습니다.

</aside>

HTML 요소 선택하기

HTML 요소를 선택하는 방법에 대해 알아보도록 하겠습니다.

get 메서드

• document.getElementById - 모든 HTML 요소에는 고유한 ID를 할당받을 수 있습니다. getElementById를 이용해 요소를 찾을 수 있습니다.
• document.getElementsByClassName - HTML 클래스 명으로 요소를 찾을 수 있습니다.
• document.getElementsByTagName - HTML 태그명으로 요소를 찾을 수 있습니다.

예) HTML

<ul id="list">
	<li class="item">
	<li class="item">
	<li class="item">
</ul>

예) get 메서드

document.getElementById('list') <!-- ul 선택 -->
document.getElementsByClassName('item') <!-- li태그 3개 선택 -->
document.getElementsByTagName('li') <!-- li태그 3개 선택 -->

<aside> 💡 DOM 메서드가 반환하는 커렉션은 자바스크립트 배열이 아니라 HTMLCollection의 인스턴스로, 배열 비슷한 객체입니다.

</aside>

DOM 요소 쿼리

get 메서드와 같은 방법도 유용하지만, ID나 클래스, 태그 이름 같은 한 가지 조건이 아니라 다른 요소와의 관계를 사용해 원하는 요소를 찾는 훨씬 더 강력하고 범용적인 메서드도 있습니다.

querySelector와 querySelectorAll은 CSS 선택자를 사용해 요소를 찾는 메서드입니다.