Document Object
노마드코더 ‘바닐라 JS로 크롬 앱 만들기’ 강의에서 얻은 정보이다. 브라우저에는 HTML 정보가 들어있는 document object를 전달해준다는 것을 구글 크롬 개발자 도구의 console을 통해서 알 수 있다.
처음에 html 파일을 생성하고, document라는 변수에 어떤 것도 해주지 않아도 자동으로 데이터가 설정되어 있다. 그리고 document에는 여러 가지의 다양한 property가 있는 것을 확인할 수 있다.
즉, JS에서는 이 property들을 이용하여 html을 보다 interactive 하게 만들 수 있는 것이다.
대표적인 예시로 document.title이라는 property를 사용하여 브라우저 탭의 제목을 변경할 수 있다.
document.getElementById
document.getElementById는 문자열을 전달받는 함수이다. 주로 html의 id를 읽어옴으로써, html에 접근 가능하게 한다.
document.getElementById로 받아온 변수를 console.dir로 찍어서 보면, 또 수많은 property가 있음을 확인할 수 있다.
대표적인 예시 중에서는 innerText를 이용하여 html을 직접 변경하지 않고, js를 통해서 html의 내용을 변경하는 것이 있다.
// html file
<body>
<h1 id="title">Grab me!</h1>
<script src="app.js"></script>
</body>
// js file
const title = document.getElementById("title");
title.innerText = "Hello World"위와 같이 변경한 경우에는 h1 태그 안의 있는 "Grab me!" 대신에 "Hello World"에 브라우저에 뜨게 된다. 이것은 html 태그에 id가 있고, js에서 id를 getElementById를 통해서 가져올 수 있기 때문에 변경이 가능한 것이다.
이 내용은 비단 바닐라 JS에만 국한되는 개념이 아니다. JS를 사용하는 개발자라면 누구나 해당 내용이 얼마나 중요한 것인지 프로젝트를 시작하자마자 체감하게 될 것이다.
js가 필요한 라이브러리, 프레임워크, 컴파일러라면 무조건 활용 방법에 대해서 익숙해져야 하는 것이다. 왜냐하면 항상 js는 객체를 통해서 property를 가져오고 그것을 통해서 태그와 기능에 접근하기 때문이다.
react, vue, angular 등 어떤 라이브러리를 사용하든 얼마나 객체를 잘 활용하는지에 따라서 개발자의 편의성이 달라지고 코드의 유연성과 접근성을 높인다고 생각한다. 그러므로 이 내용이 정말, 정말, 정말 너무나 중요하기 때문에 항상 명심하면서 JS 개발자가 되기를 바란다!!
'JS > 클론 코딩' 카테고리의 다른 글
| form의 장점과 단점, 그리고 주의할 점(preventDefault) (0) | 2023.06.07 |
|---|---|
| 바닐라 JS에서 dom 요소 불러오는 방법: #class, #id (0) | 2023.05.31 |
| dom 요소를 제어하는 메소드들 (0) | 2023.05.26 |
| Javascript: className 보다 classList를 사용해야 하는 이유(그리고 toggle) (0) | 2023.05.25 |
| Javascript: 이벤트 찾고 사용하기 (0) | 2023.05.23 |
