[Javascript] DOM 요소

chosh·2021년 8월 21일

JavaScript 를 사람들이 동적인 웹을 위한 언어라고 말했을 때,
그 말을 이해 하게 된 계기가 Dom 요소를 배우고 나서 였다고 생각한다.

DOM(Document Object Model)이란,
프로그래밍 언어가 html 요소에 접근 할 수 있도록 해주는 역할을 한다

예를 들면

HTML

<body>
  <h1 class="htmlHeader">html</h1>
  <div>
    <p class="htmlContent">
     우리가 보는 웹페이지가 어떻게 구조화되어 있는지
     브라우저로 하여금 알 수 있도록 하는 마크업 언어
    </p>
  </div>
  <button class="htmlButton">내용 바꾸기</button>
</body>

JavaScript

const htmlHeader = document.querySelector(".htmlHeader")
const htmlContent = document.querySelector(".htmlContent")
const htmlButton = document.querySelector(".htmlButton")

htmlButton.addEventListener("click", changeContent)

function changeContent() {
  htmlHeader.innerHTML = "Css"
  htmlContent.innerHTML = "HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어"
}

이렇게 코드를 짜면,

JavaScript에서

querySelector 를 이용해서 html 요소에 접근 할 수 있고,
innerHTMl 을 이용해서 html내부에 있는 컨텐츠를 변경 할 수 있고,
addEventListener 을 이용해서 사용자와 소통 할 수 있게 된다.

위의 코드를 보면 JavaScript 가 왜 동적인 웹을 위한 언어인지 알 수 있다.

const htmlHeader = document.querySelector(".htmlHeader")
const htmlContent = document.querySelector(".htmlContent")
const htmlButton = document.querySelector(".htmlButton")
이것은 class명이나, id를 통해서 원하는 요소에 접근 할 수 있다.

id를 통해 접근 할 때는, id는 하나의 요소만 가르키기 때문에 바로 접근 할 수 있으며,

class를 통해 접근 할 때는, class는 다수의 요소들이 있을 수 있으므로, 첫번째 탐지된 class명을 가져오게 된다.

같은 class 명의 모든 요소를 가져오고 싶다면 querySelectorAll을 사용하면 된다.

htmlButton.addEventListener("click", changeContent)
선택한 요소에 대해서 이벤트를 주어서 클릭을 할때에(사용자 조작) changeContent라는 함수를 실행 시켜 줌으로써 동적인 웹이 될 수 있도록 해준다.

function changeContent() {
  htmlHeader.innerHTML = "Css"
  htmlContent.innerHTML = "HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어"
}
이벤트를 받아 함수가 실행 되면, innerHTML이 컨텐츠를 변경 시켜주기 때문에, CSS에 대한 정보로 컨텐츠가 변경되는 원리이다.

이렇게 여러 가지 이벤트와 컨텐츠, class명 변경을 통해서 많은 동적인 요소들을 추가 시킬수 있다.

chosh

제가 참고하기 위해 만든 블로그라 글을 편하게 작성했습니다. 틀린거 있다면 댓글 부탁드립니다.

[Javascript] DOM 요소

[React]기본 개념

[React]props와 state

0개의 댓글