cosmic developer

[Javascript] DOM의 기초 개념과 탐색 본문

Front-End

[Javascript] DOM의 기초 개념과 탐색

ti:bot 2021. 1. 4. 02:30

오늘 드디어 DOM의 기초 개념에 대해 공부를 하게 되었다!

프로그래머스에 자바스크립트 기초 강의가 있어서 수강중인데 정말 쉽지만 도움이 많이 된다.

강의 내용을 정리하기 위한 포스팅이니 긴말 없이 바로 시작!!



먼저, Javascript를 통해 HTML 문서에 접근이 가능한 이유는 

1. HTML 문서가 DOM(Document Object Model)에 따라 기술되고

2. 이 DOM 인터페이스를 통해 기술된 HTML element가 Object. 즉, 객체로서 자바스크립트와 연결되기 때문이다.


따라서 Javascript를 활용한 프론트엔드 개발 공부에 앞서 DOM의 개념에 대해 공부하는 것이 좋다.



DOM (Document Object Model)

컴퓨터가 문서를 잘 처리할 수 있도록 문서에 대한 구조를 약속한 것

Tree 형태를 이용하여 문서의 구조를 표현한다.



이러한 Tree 구조에서 우리는 DOM API를 통해 HTML 문서의 요소들을 탐색할 수 있다.


- 자식, 부모 엘리먼트에 접근하는 방법

  • .children : 해당 object의 자식 노드에 대한 배열
  • .parentNode : 부모 노드
  • .firstElementChild : 첫 자식 엘리먼트
  • .lastElementChild : 마지막 자식 엘리먼트

- 같은 레벨의 형제 엘리먼트에 접근하는 방법
  • .nextElementSibling
  • .previousElementSibling


ex1) 개발자 도구에서 테스트 가능

1
2
3
4
5
document.children        // <html> 태그에 접근
document.children[0]    // <html> 태그에 접근
document.children[0].children[0]    // <head> 태그에 접근
document.children[0].children[1]    // <body> 태그에 접근
document.children[0].children[1].parentNode        // <html> 태그에 접근
cs


ex2)

html 일부

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <!-- comment -->
        <meta charset="utf-8">
        <link rel="stylesheet" href="css.css">
        <style>
            #songwriter, #lyricist {
                text-align: right;
            }
        </style>
    </head>
    ...
cs


테스트

1
2
3
4
5
6
7
head = document.children[0].children[0]        // <head> 태그
head.firstElementChild        // <meta> 태그
head.lastElementChild        // <style> 태그
 
link = head.children[1]    // <link> 태그
link.nextElementSibling        // <style> 태그
link.previousElementSibling    // <meta> 태그
cs



저작자표시 비영리 변경금지

'Front-End' 카테고리의 다른 글

[Javascript] 자바스크립트 Visual Studio Code 로 작업하기  (1) 2021.01.04
'Front-End' Related Articles more