자바스크립트란 웹 페이지의 구성에 있어서 필요한 언어이다. HTML로 틀이 잡혀있는 웹 페이지를 변경하고 여러 이벤트를 주는 등의 동적인 요소들을 위해 만들어졌다. 여기서 자바스크립트를 이용해서 HTML파일을 제어하기 위해 필요한 것, 그것이 바로 DOM이다. - 해당 글은 짐코딩 님의 프론트엔드 날개달기 강의 중 DOM 이란? 강의를 정리한 내용입니다.
DOM의 의미는 무엇일까?
크롬, 사파리, 엣지 등의 다양한 브라우저가 존재한다. 그리고 각 브라우저들은 HTML로 작성된 웹 문서들을 렌더링이라는 작업을 할 수 있는 엔진을 가지고 있다. 여기서 렌더링이란 HTML 태그로 구성된 요소들을 화면에 나타내주는 것을 말한다. 렌더링 엔진들이 HTML코드를 한 줄 한 줄 읽어서 해석하고 해석이 끝나면 전체를 자바스크립트가 접근할 수 있는 상태로 만들어준다. 이를 문서를 객체화한다라고 하고 이렇게 객체화된 것을 문서 객체 모델(Document Object Model) 즉, DOM이다. DOM은 트리구조를 가지고 있다. 하나의 부모 태그 아래에 여러 개의 자식 태그를 가지는 형태로, <html> 태그 안에 <head>, <body> 태그가 있고, <head> 태그 안에 <meta> 태그나 <title> 태그와 같은 태그들이 들어가는 등의 형태이다. 따라서 이런 형태를 DOM 트리라고 부르고 여기서의 각 태그들을 노드라고 부른다. 이렇게 만들어진 노드에 접근해서 제어하는 방식이 자바스크립트와 DOM을 이용해서 웹 페이지를 제어하는 방법이다.
document 노드의 활용
<html>
<head>
<title>제목</title>
</head>
<body>
<h1>내용</h1>
<ul>
<li>내용1</li>
<li>내용2</li>
</ul>
</body>
</html>document 노드는 웹문서를 통해 나타난 웹 페이지 전체를 의미하는 것으로 최상위 노드를 뜻한다. 이를 활용하여 웹 페이지의 여러 요소들에 접근을 할 수 있는데, 이때에 자바스크립트를 이용한다. "document.getRootNode()"는 document라는 최상위 노드에 접근할 수 있는 함수이다. 여기서 더 나아가 "document.childNodes[index]"를 사용하게 되면 document 노드의 자식으로 있는 노드들을 호출할 수 있게 된다. 위의 코드 상황에서는 html 노드가 해당된다. "document.childNodes[1].childNodes[index]" 구문으로 html 태그의 자식 태그들인 <head>, <body>를 찾을 수 있다. "document.childNodes[1].childNodes[2]"를 사용하면 html의 자식 태그였던 head, body 태그 중 body를 뜻하는 것이 되고 "document.childNodes[1].childNodes[2].childNodes[1]"은 body 태그의 자식 중 h1 태그를 뜻하는 것이 된다. 해당 태그에는 원래 "내용"이라는 문구가 들어가 있는 상태이다. 이 문구를 "내용입니다"로 바꾸고 싶다면 "document.childNodes[1].childNodes[2].childNodes[1].textContent = '내용입니다'"를 사용하면 된다. 이는 document의 자식 태그 중 html 태그를 찾고, 그 자식 중 body 태그를 찾고 또 그 자식 중 h1 태그를 찾은 후 그 태그의 내용을 "내용입니다"로 변경하겠다.라는 뜻이다.
querySelector의 사용
h1 태그 하나를 찾는 데 document부터 시작해서 자식의 자식의 자식 태그를 찾아 내려가는 방식은 굉장히 비효율적이라고 생각될 수밖에 없다. 이를 해결하기 위해 이용하는 것이 바로 querySelector이다.
let domObject = document.querySelector('h1')위의 코드는 전체 문서에서 h1이라는 css 선택자를 가진 태그를 찾고 그 태그를 "domObject"라는 이름으로 명명하겠다.라는 뜻이다. 이렇게 해두고 나면 위에서 h1 태그의 내용을 바꿨던 것은 다음의 코드와 같이 표현할 수 있다.
domObject.textContent = "내용입니다"위의 코드는 이전 단락에서 여러 번에 걸쳐 자식 태그를 찾아 바꾸었던 부분을 쉽게 표현한 것이다. 똑같은 변경작업이지만 위와 같이 간단하게 표현할 수 있도록 DOM이 만들어지게 된 것이다. 즉 DOM이란 브라우저에서 제공되는 API로서, 자바스크립트를 이용해서 HTML 요소들을 제어할 수 있게 제공되는 것이다. 여기에는 다양한 프로퍼티와 메서드들이 존재해서 그를 통해 다양하게 웹 사이트를 제어하는 것이 좀 더 편리하게 가능해졌다. 여기에서 사용한 querySelector는 그중에 하나이다.
학습 페이지
www.inflearn.com
댓글