![[JavaScript] DOM이란?](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FclNoQN%2FbtrL34heWqE%2FOEPqjZd4Vs86ezV9k1esMk%2Fimg.png)
DOM이란?
Document Object Model 의 약자입니다.
컴퓨터가 문서를 잘 처리할 수 있도록, 문서의 구조를 약속한 것입니다.
DOM은 Tree 형태를 따르고 있습니다.
Document Object는 JavaScript에서 document로
접근이 가능하며, 부모, 자식 노드를 확인 할 수 있습니다.
위의 사진을 보시면, Tree 형태를 띄고있는 DOM을 보여 주는데,
html 코드와 tree 형태를 띄고 있는 사진과
상당히 유사한 구조를 가지고 있습니다.
위 사진은 html DOM Tree를 보여줍니다.
<head>태그 안의 element, attribute 등
나와있는데 이해 안가실수도 있으니,
코드로 직접 확인해 보겠습니다.
우선 저번에 작성했던 코드로 예를 들겠습니다.
우선 가장 상위 오브젝트인 document를 입력해 봅니다.
그럼 html 코드들이 나오겠죠??
그럼 여기서부터 하나씩 확인을 해 보겠습니다.
우선 document.children[0] 0번째 배열에는
<html> 태그가 들어가 있는걸 확인할 수 있습니다.
그럼 이 안의 document.children[0].children[0]을
검색해보겠습니다. 그럼 <head> 태그가 나오게 됩니다.
그럼 여기서 QUIZ
body 태그를 확인하고 싶을땐 어떻게 해야할까요?
document.children[0].children[1]을 검색하면 됩니다.
그럼 배열 안의 element들을 확인하기 위해
4가지 명령어가 있습니다.
firstElementChild(첫번째 element), lastElementChild(마지막 element),
nextElementSibling(다음 형제노드), previousElementSibling(이전 형제노드)
가 있습니다. 우선 사용을 직접해보겠습니다.
head로 정의했던 children[0].children[0]의 첫번째 element는
<meta> 태그가 나오는 것을 알 수 있습니다.
그리고, head.children[1]은 <title> 태그가 나오게 됩니다.
여기서 <title> 태그의 이전 형제 노드를 보려면,
뒤에 previousElementSibling을 적어주시면 되고,
다음 노드를 보려면 nextElementSibling을 적으시면 됩니다.
또한 <body> 태그의 부모 노드를 검색하기 위해선
<body> 태그뒤, parentNode를 적으시면
<html> 태그가 나오는걸 알 수 있습니다.
저도 DOM을 공부하며, 예전에 배웠던 데이터 구조가
많이 도움이 되었던 것 같습니다.
감사합니다.
'🔥 Web > JavaScript' 카테고리의 다른 글
| [JavaScript] Element의 추가와 삭제 (0) | 2022.09.13 |
|---|---|
| [JavaScript] Element의 선택과 변경 (1) | 2022.09.13 |
| [JavaScript] CSS 란? CSS 다루기 (1) | 2022.09.13 |
| [JavaScript] Console 창 사용법, window 객체 (0) | 2022.09.07 |
| [JavaScript] script 태그, event 주기 (0) | 2022.09.07 |