자바 스크립트에서의 DOM이란?
body안에 있는 요소들을 말한다.
DOM을 쉽게 설명하면 웹의 하얀 영역이다. (다크 버전은? ㅋ)
조금 더 자세히 말하자면, 자바스크립트에서 각각의 요소를 이용할 수 있게 html의 태그들을 객체로 만든 것이라 생각하면 된다.
DOM을 어떻게 활용할 것인지?
각각의 요소를 개체로 만든 후 그 개체들을 선택해서 이벤트를 줌으로써 자바스크립트가 완성된다.
<body>
<h1> h1 태그 </h1>
<script>
{...블라블라}
</script>h1을 제어하려고 한다. 그러면 h1 태그 바로 밑에, 스크립트로 제어하는 코드들을 넣어 주어야 한다.
html 요소들을 선택하는 코드의 형태는 아래와 같다.
document.querySelector('h1').addEventListener()
여기서 addEventListener는 어떤 행위(예를 들어 클릭을 한다거나)를 지켜보겠다는 의미와 같다.
위의 코드에서 공통된 부분은
document.querySelector('h1')이 부분이고, 계속 사용되므로 변수에 담아서 간편히 사용하는게 더 효율적이다.
const h = document.querySelector('h1');
h.addEventListener('click(이벤트명)', () => { 블라블라});이런식으로 활용 가능하다. 여기서 앞에서 설명한 CSS선택자를 활용하여 코드를 작성해 나가면 된다.
파랑입니다.