웹 개발을 하려면 DOM : Document Object Model 에 대한 이해가 필요하다. 사실 예전에 리액트 강의를 들으면서 Virtual DOM 에 대해서도 배운 적이 있지만 열심히 공부를 하지 않아 머릿 속에서 깔끔하게 잊혀졌다. 미래의 나는 이런 일이 일어나지 않도록 작은 개념이라도 꼼꼼히 체크하며 필기를 해나가는 습관을 가져야 할 것 같다.
DOM : Document Object Model
맞게 정의하는건지는 모르겠지만, DOM은 계층적 구조를 가지고 있는 노드 트리 형태로써 존재한다고 보면 된다. 종종 상속을 하기도 하고, 수평적인 관계를 이루기도 하고 다양하다. 이렇게 말로만 하면 너무 뻔한지라 간단한 소스코드와 함께 설명하자면,
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
<title>Document</title>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>정말 흔하게 볼 수 있는 HTML 코드이다. HTML은 태그를 감싸는 형태로써 모든 코드가 존재하는데, 태그와 태그 사이에 또 다른 태그 쌍이 존재하면 그것은 하위 태그가 상단 태그의 하위 노드 형태로써 존재한다고 보면 된다. 예를 들어 제일 상, 하단에 존재하는 HTML은 최상단 노드라고 볼 수 있고, 그 아래의 <head /> 와 <body />는 바로 하단에 존재하는 형제 노드로 볼 수 있다. <head> 의 자식 노드는 <link /> 와 <title> 등이 될 수 있고, 그 아래는 뭐 설명 안해도 알 정도로 간단한 개념이다.
Nodes
var cdd_element = document.createElement("div"); // div라는 요소 생성
var cdd_node = document.createTextNode("I am CDD"); // I am CDD 라는 Text Node 생성
cdd_element.appendChild(cdd_node); // div라는 요소에 textnode를 자식으로 append주석으로 설명을 다 적어놓았지만 다시 설명하자면 <div> ... </div> 의 사이는 자식이 들어갈 공간이다. 그 곳에 textNode 를 만들어 자식으로 append 시켜주면 또다른 자식노드가 형성이 되는 것이다. 이는 DOM을 노드 트리 형태로 봤을 때 div 노드에 cdd_node라는 하단 노드가 붙게 되는 형식으로 볼 수 있다.
var html = document.childNodes[1];
var head = html.childNodes[1];
var body = html.childNodes[2];대충 이런식으로 보면 된다. element.childNodes 는 해당 노드가 갖고 있는 자식 노드를 볼 수 있는 기능이고, 뒤에 붙는 인덱스 값은 해당 노드가 몇 번째인지에 대한 값이다.
cdd_node.firstChild.nodeValue = 'cdd';
cdd_node.lastChild.nodeValue = 'is crazy';이외에도 이렇게 자식 노드의 첫 번째, 마지막에 바로 접근하는 키워드도 있고, nodeValue 를 통해 노드 내의 값을 수정할수도 있다. 이 이상의 키워드는 별로 쓰지 않을 것 같아 여기서 글을 마친다.
