내가 몰라서 정리하는 HTML의 DOM구조

이 이미지보다 더 좋은 설명은 없는거 같다. 출처는 위키디피아

DOM은 웹 브라우저가 HTML 페이지를 인식하는 방식이고, document 객체와 관련된 집합들을 의미한다.

위의 이미지처럼 나무에서 가지가 뻗어나가는 형식으로 구성되어 있다고 해서 트리구조라고 하는데,

DOM은 tree형식의 자료구를 가지고 있다.

 

얘도 DOM을 검색하면 구글에 제일 잘 나와있는 이미지

 

위의 사진에 있는 코드는 실제 출력이 어떻게 될까?

다음과 같다.

 

위의 DOM tree 구조를 설명해 놓은 것을 살펴보면 

<p> p 태그 </p> 에 attributes로 title이 설정되어 있다. (attributes는 속성을 의미)

속성으로 title을 설정해주면 다음과 같이 나타난다.

커서를 해당 요소에 가져다 놓으면 title이 뜬다.

 

 

자 다시 대문짝만하게 나와있는 그림을 살펴보면..

속성 왼편에 있는 childNodes라는 것은 자식을 의미한다.

p태그는 현재 This is a sample of some 이라는 text, 그리고 <b>b태그</b> 마지막으로 in your document라는 text를 가지고 있다.

p태그의 자식들..

 

 

여기서 b태그는 또 자식노드(?)를 가지고 있다.

HTML you might라는 텍스트와

<br> br태그 그리고 have 이다. (you가 tou로 오타났지만 그냥.. 모른채 해주자..)

p태그의 자식인 b태그의 자식들.. 손주뻘이다..

 

 

이렇게 자식 노드들과 속성들이 마치 나무가지 형태로 자료 구조를 형성하고 있는 것을 확인할 수 있다.

이를 통해 우리는 DOM 객체에 먼저 접근하고 또 다양한 키워드를 이용하여 필요한 노드에 접근해서 원하는 작업을 수행할 수 있게된다.

 

---

자꼬 노드노드 하는데 노드가 무엇인가

트리 구조 안에 있는 모든 개체를 node라 표현한다. 

head, body, title, p, b 등의 태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 속한다고 할수 있다.

이중 HTML 태그를 요소 노드라고 부르고 요소 노드 안에 있는 글자를 text 노드라고 부르고 아까 설정했던 title같은 attribute는 attribute 노드라고 부르고.. 그런다. 

 

---

DOM을 이용하여 HTML을 조작하려고 하다보면 많이 헷갈리는 부분이 바로 이런 지점이다.

태그 노드만 보고싶은데 왜 너가 나와...?

여기서 잠깐 살펴보고 싶은 것이 있는데 바로 property와 attribute이다.

DOM의 속성은 property라고 하고, HTML 태그의 속성은 attribute라고 한다.

(아마도 DOM은 객체object라는 말이 들어가니.. 그런거 같다..고 이해하고 싶다..)

 

웹 브라우저가 HTML 페이지를 읽어가며 DOM을 생성할 때, HTML 태그의 attribute들도 분석하여 자기네들 언어로 불러온다.

그래서 HTML에서 클래스 정의를 class라고 하고 DOM에서는 className으로 부르지만 그들은 속성 값을 공유한다.

 

---

자바스크립트를 사용하면서 가장 좋은 점이라고 할 수 있는게, 이 DOM의 모든 노드들을 생성하고 수정하고 삭제하는 한마디로 CRUD가 가능하기 때문이라고 볼수 있다. (이 밖에도 다른 더 좋은 점은 많지만..?)

 

자바스크립트의 노드 제어를 위한 속성과 메소드는 많은데, 그중 기본 개념들 정도만 살펴보자면

속성중에 element가 붙은 것이 있다. 이것들은 HTML 태그 엘리먼트를 대상으로 동작하는 속성 혹은 메소드이다.

 

메소드에는 또 DOM 메소드와 자바스크립트 메소드가 있는데,

DOM 메소드는 파라메터로 노드 객체만 사용할 수 있다. 이 점은 기억해야한다.. (자바스크립트는 노드 객체와 태그 문자열을 모두 사용할 수 있다.)

---

function AllElement (element) {
// nav의 class 이름을 console.log 합니다.
let nav = document.querySelector('#nav');
nav.className; //""
// nav의 자식 엘리먼트가 있는지 검색합니다. (logo, menu-wrapper)
nav.children
  //logo의 class 이름을 console.log 합니다.
  console.log(nav.children[0].className);
  //logo의 자식 엘리먼트가 있는지 검색합니다. (없음)
  nav.children[0].children //빈 값 나옴
  //menu-wrapper의 class 이름을 console.log 합니다.
  console.log(nav.children[1].className);
  //menu-wrapper의 자식 엘리먼트가 있는지 검색합니다. (menu, menu, menu, profile-photo)
  nav.children[1].children
    //첫 번째 menu의 class 이름을 console.log 합니다.
    console.log(nav.children[1].children[0].className); //menu
    //첫 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
    nav.children[1].children[0].children
    //두 번째 menu의 class 이름을 console.log 합니다.
    console.log(nav.children[1].children[1].className); //menu
    //두 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
    nav.children[1].children[1].children
    //세 번째 menu의 class 이름을 console.log 합니다.
    console.log(nav.children[1].children[2].className); //menu
    //세 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)
    nav.children[1].children[2].children
    //profile-photo의 class 이름을 console.log 합니다.
    console.log(document.querySelector(".profile-photo").className);
    console.log(nav.children[1].children[3].className);
    //profile-photo의 자식 엘리먼트가 있는지 검색합니다 (없음)
    document.querySelector(".profile-photo").children
 //자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}

본격적으로 하고싶었던 것..

위의 수도코드를 작성해보았는데.. 어렵다고 생각하면서 슬슬 해보니까 하나도 안어렵다. 

함수로 작성하는 것이 원래 의도였겠지만 나는 이렇게까지만 쓰고 싶다(단호)

 

암튼 일단 이렇게 정리를 했으니 내일은 좀 더 나은 사고를 할수 있길!