📅 TIL #24

👉 What is the DOM?

DOM은 Document Object Model의 약자로, HTML(Document)에 접근하여 Object(JavaScript Object)처럼 HTML을 조작할 수 있는 Model이라는 의미를 가지고 있다.

즉, 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다.

Document 객체

document 객체는 우리가 웹사이트에 접근하고 수정할 수 있는 많은 프로퍼티(properties) 와 메소드(methods)를 가진 오브젝트이다.

즉, document 는 페이지의 URL을 얻거나 문서에 새로운 요소를 생성하는 등의 기능을 전역적으로 제공한다.

DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다.

페이지 콘텐츠 (the page content)는 DOM에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.

API (web or XML page) = DOM + JS

DOM을 어떻게 작업해야 하는지 이해하기 위해, 자바스크립트에서 오브젝트가 어떻게 동작하는지에 대해 이해하는 것은 필수적이다.

DOM이 아닌 것

1. DOM은 HTML이 아니다.

DOM은 HTML 문서로부터 생성되지만 항상 동일하지 않다.

2. DOM은 브라우저에서 보이는 것이 아니다.

브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합이다. 렌더 트리는 오직 스크린에

그려지는 것으로 구성되어 있어 DOM과 다르다.

즉, 렌더링 되는 요소만이 관련 있기 때문에 시각적으로 보이지 않는 요소는 제외된다.

예를 들어, display: none 스타일 속성을 가지고 있는 요소이다.

• DOM 은 자바스크립트에 수정될 수 있는 동적 모델이어야 한다.

👉 DOM과 자바스크립트의 차이

DOM 은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

그렇다면 자바스크립트는 ??

자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다.

• 자바스크립트는 새로운 HTML 요소나 속성을 추가할 수 있다.

• 자바스크립트는 존재하는 HTML 요소나 속성을 제거할 수 있다.

• 자바스크립트는 HTML 문서의 모든 HTML 요소를 변경할 수 있다.

• 자바스크립트는 HTML 문서의 모든 HTML 속성을 변경할 수 있다.

• 자바스크립트는 HTML 문서의 모든 CSS 스타일을 변경할 수 있다.

• 자바스크립트는 HTML 문서에 새로운 HTML 이벤트를 추가할 수 있다.

• 자바스크립트는 HTML 문서의 모든 HTML 이벤트에 반응할 수 있다.

👉 자식태그 찾기

• .getElementBy ~(복합구조) : 복합구조에 해당하는 것만 찾는다.
• .childNode : text도 같이 찾는다.
• .children : 종류 상관 없이 모든 태그를 찾는다.

👉 부모태그 찾기

• .parentElement : 태그만 찾는다.
• .parentNode : 빈공간 … 등 포함

👉 DocumentFragment

//Syntax
document.createDocumentFragment();

DocumentFragment 는 빈 DocumentFragment 객체를 나타낸다.

DocumentFragment 타입은 마크업에 표현되지 않는 유일한 노드 타입이다. DocumentFragment 노드를 생성해서 사용하면

라이브 DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있다. 메모리상에서만 존재하는 빈 문서 템플릿같은

DocumentFragment의 자식노드를 메모리상에서 손쉽게 조작한 후, 라이브 DOM에 추가하는 것도 가능하다.

특징

• nodeType은 11이다.
• nodeName은 ‘#document-fragment’
• nodeValue는 null이다.
• parentNode는 null이다.
• 자식 노드로 Element, Comment, Text등등을 가질 수 있다.

const div = document.createElement("div");
const text = document.createTextNode("텍스트");
const fragment = document.creatDocumentFragment();

div.appendChild(text);
fragment.appendChild(div);
document.body.appendChild(fragment);

div에 text를 담고, 그것을 fragment에 담은 후 최종적으로 body에는 fragment를 담았다. 직접적으로 body에 영향을 주는 것은 fragment를 추가할 때, 단 한 번 있었다.

만약 appendChild 를 많이 조작해야할 경우, fragment에 담고 마지막에 fragment를 body에 append 해준다.

👉 insertBefore()

자바스크립트에 부모의 마지막 자식으로 추가하기 위해 appendChild()를 사용하는 것을 배웠다.

그렇다면 부모의 첫번째 자식으로 추가는 어떻게 해야할까??

insertBefore() 와 firstChild를 사용하면 된다.

• Syntax 부모노드.insertBefore(삽입 할 노드, 기준 점 노드)

//html
<ul class="parent">
  <li class="newEl">요소</li>
  <li class="El">button</li>
  <li class="El">button</li>
  <li class="El">button</li>
</ul>;

//js
let El = document.querySelector(".newEl");
let parent = document.querySelector(".parent");

parent.insertBefore(El, null); //맨 끝에 삽입
parent.insertBefore(El, parent.firstChild); //맨 앞에 삽입

👉 template 요소

HTML template 요소는 페이지를 불러온 순간 즉시 화면에 나오지는 않지만, 이후 Javascript를 사용해 인스턴스를 생성할 수 있는 HTML 코드이다.

즉, template 요소 내의 콘텐츠는 페이지가 로드될 때 즉시 렌더링되지 않으며, 따라서 사용자에게는 보이지 않는다.

하지만 나중에 자바스크립트를 사용하여, 해당 콘텐츠를 복제한 후 보이도록 렌더링할 수 있습니다.

• 예제

//html
<template>
    <h3>코드스테이츠</h3>
    <img src="/examples/images/img_codestates.png" alt="코드스테이츠">
</template>

//js
const t = document.querySelector("template");

👉 element 와 node의 차이

nodes: DOM API상에 존재하는 모든 것들. 그것들을 모두 포괄하는 이름이 node이다.

Node의 밑에 Element가 있고

element: one specific type of node. 예를 들어 div, body, window 같은 특정한 타입.

모든 element는 HTMLElement의 자식이다. 따라서, HTMLElement의 property를 똑같이 가지고 있다. 동시에, element의 성격에 따라서 자신만의 property를 가지고 있다.

👉 remove() 와 removeChild()의 차이

• remove()

따로 부모 요소가 필요없음. remove()는 노드를 메모리에서 삭제하고 종료한다.

• removeChild ()

노드를 삭제하는 것이 아니다.

메모리에 해당 노드는 그대로 존재하며, 부모 노드와의 부모-자식관계를 끊어 DOM 트리에서 해제하는 것이다.

최종적으로는 관계를 끊은 해당 노드의 참조를 반환한다.

반환값을 변수에 저장하지 않으면 삭제하는 노드의 참조가 더이상 없기 때문에, 자바스크립트 엔진의 GC(Garbage Collection)에 의해 잠시 후 메모리에서 삭제된다.

반환된 노드 참조를 변수에 담아 다른 DOM 위치에 붙일 수 있다.

• 예시

let id = document.querySelector("#id");
let rm = id.parentNode.removeChild(id);
document.body.prepend(rm);

이런식으로 삭제한 노드의 반환값을 다른 노드에 붙여서 노드의 위치를 이동하는 작업에도 사용할 수 있다.

노드를 삭제하면 삭제하는 노드 하위에 있는 자식 노드들도 모두 삭제된다.

노드들은 부모/자식 관계로 트리 구조로 연결되어 있기 때문에 부모 노드가 삭제되면, 자식 노드도 자동으로 삭제된다.

👉 prepend()

.prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가한다.

• Syntax $(target).prepend(source)

• 예시

<ol id="list">
  <li>첫 번째 아이템</li>
  <li>두 번째 아이템</li>
</ol>

$(#"list").prepend("<li>새로 추가 된 아이템</li>")

//after

<ol id="list">
  <li>새로 추가 된 아이템</li>
  <li>첫 번째 아이템</li>
  <li>두 번째 아이템</li>
</ol>

NodeList 와 유사배열

NodeList란?

element.childNodes 프로퍼티나 document.querySelectorAll 메서드로 반환되는 노드의 모음이다.

NodeList도 유사 배열인데, forEach 메서드는 가지고 있다.

하지만 map, filter,reduce 등의 메서드를 사용하려면 배열로 바꿔줘야 한다.

NodeList 를 배열로 변환

그렇다면 어떻게 배열로 바꾸어줄 수 있을까?? 다음 코드를 보면서 이해를 해보자.

const div = document.querySelectorAll("div");
const array = Array.prototype.slice.call(div);

//또는
const nodelist = document.querySelectorAll(".divy");
const divyArray = Array.from(nodelist);

//또는
const divyArray = [...document.querySelectorAll(".divy")];

이런식으로 nodelist들을 배열로 변환시키면 forEach() 뿐만 아니라 다른 배열 메소드를 사용할 수 있다!!

👊 내일의 TIW(today I Will)

유효성 검사, 트위틀러 함수