JavaScript와 DOM

안녕하세요 컴커니어입니다.

 

DOM(Document Object Model)은 웹페이지가 일종의 문서인데 그 문서를 표현하고 조작하고  저장하는 방법을 제공합니다.

웹브라우저를 통해 화면에 나타낼 수 있으며,html소스  자체를 나타내기도합니다.

 

javaScript언어로 이 DOM객체를 사용해서 활용 할 수 있습니다.

 

DOM객체 불러들이는 방법)

첫째,아이디를 이용하여 DOM 불러오기

const value = document.getElementById('아이디 이름') 을이용해서 element를 가져 올 수 있습니다. 그 태그에 아이디를 넣어주고 그 태그가 포함된 element를 변수에 집어 넣을 수 있습니다.

둘째,클래스를 이용하여 DOM 불러오기

const 변수이름  = document.getElementsByClassName('클래스 이름')을 이용해서 element를 가져 올 수 있습니다.

 

세번째,태그 이름을 이용하여 DOM불러오기

const 변수이름  =document.getElementsByTagName('태그이름')을이용해서 element를 가져 올 수 있습니다.

 

하지만 이런 것들을 합쳐서 불러올 수 있는 기능을 가진 함수가 자바스크립트에 있습니다.

그것은 바로 querySelector입니다.

 

querySelector의 사용법은 간단합니다.

ex)

 

cosnt value = document.querySelector("클래스면(.을 붙여서 호출), 아이디면 (#을 붙여서 호출) 태그이름 이면 태그이름 그대로 ");

 

 

이런식으로 querySelector 함수를 사용하면 정말 간단하게 element를 변수에 저장할 수 있습니다.