JavaScript(Vanilla) DOM

HTML에서의 DOM

window.document 객체 안에는 HTML 태그에 관련된 모든 정보를 담고 있어, 이러한 태그(DOM 요소)를 선택하고 정보를 가져오거나 변경하는 작업을 수행할 수 있다.

선택하기

원하는 HTML 요소를 다루기 위해 그 전에 지정을 하는 작업이 필요한데, document의 메서드를 활용하여 여러 방법으로 DOM 요소를 지정할 수 있다.

1. HTML 태그 이름(tag name)을 이용한 선택
2. 아이디(id)를 이용한 선택
3. 클래스(class)를 이용한 선택
4. name 속성(attribute)을 이용한 선택
5. CSS 선택자(selector)를 이용한 선택
6. HTML 객체 집합(object collection)을 이용한 선택

HTML 태그 이름(tag name)을 이용한 선택

<aside> 💡 let selectedItem = document.getElementsByTagName("div")

</aside>

태그 이름이 li인 요소를 모두 선택하여 selectedItem변수에 객체 형태로 저장한다.

요소의 개수는 selectedItem.length를 통해 확인할 수 있고, 특정 번째수의 요소를 고르기 위해 selectedItem.item(i) 또는 selectedItem[i]을 사용할 수 있다.