JavaScript란?
자바스크립트는 HTML 문서를 제어/조작하기 위해 만들어진 언어이다.
브라우저로 HTML 파일을 열기 위해 각 브라우저의 렌더링 엔진이 문서를 한줄 한줄 해석하고, 이 문서를 객체화하여 자바스크립트로 접근할 수 있게 한다. 그래서 문서를 객체화했다고 하여 DOM 문서 객체 모델이라고 부른다.
브라우저가 자바스크립트로 HTML을 제어하는 것은 브라우저가 제공하는 API중 하나이다.
돔은 트리 구조를 가지고 있고, 각각의 요소를 노드라고 한다. DOM의 최상위 노드는 document 이고, <html> 하위에 <header>, <body> 그리고 그 하위에 <title>, <li> 등이 있는 형태이다.
참고로 브라우저 자체를 컨트롤할 수 있도록 모델링한 것을 Browser Object Model 이라 하고, CSS를 자바스크립트로 제어할 수 있도록 한 것을 CSS Object Model 이라고 한다.
노드에 접근하는 방법
document.getRootNode() //#document최상위 노드를 조회하면 document가 뜬다. 이 최상위 노드로 원하는 html 요소에 접근할수 있다.
document.childNodes[1].childNodes[2].~~.textContent = '제목'돔 트리의 최상위로부터 원하는 노드까지 연결해가면 해당 노드를 제어할 수 있는데, 하나의 html 안에는 수없이 많은 노드가 있기 때문에 이 방법을 실제로 사용하기엔 많이 불편하다.
let dom = document.querySelector('h1')
dom.textContent = '제목'css 선택자로 특정 노드를 지정하여 제어할 수 있다. Id나 Name 등을 사용하기도 한다.
이 포스팅은 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 강의를 수강하며 작성되었습니다.
[지금 무료] 프론트엔드 날개달기: Vue, React 배우기 전에 꼭 알아야하는 지식 | 짐코딩 - 인프런
짐코딩 | 이 강의를 통해 Webpack, NPM 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다., 백그라운드 지식을 확실히 알아야,진짜 프론트엔드 개발자가 될 수 있어요
www.inflearn.com
'JavaScript' 카테고리의 다른 글
| [JavaScript] 즉시 실행 함수 (IIFE) (0) | 2024.06.13 |
|---|---|
| [JavaScript] this 이해하기 (this, window, bind) (0) | 2024.06.10 |
| [JavaScript] JS파일 효과적으로 가져오는 방법 (load, defer, async) (0) | 2024.06.09 |
| [JavaScript] 브라우저 객체 모델 BOM (Browser Object Model) (1) | 2024.06.06 |
| 레이어 팝업 vs 모달 팝업 (0) | 2024.04.03 |
