20210318 오늘배운것들

archToDev()·2021년 4월 1일

TIL

목록 보기

1/2

DOM

DOM 이란 Document Object Model(문서 객체 모델)의 약자다. Document 인 HTML,XML에 접근해
Object (Js Object) 처럼 HTML을 조작할 수 있는 Model 이라는 의미다. 다시 말해 문서의 프로그래밍 인터페이스다. 문서의 구조화된 표현을 제공하며 자바스크립트나 파이썬 자바 같은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

DOM은 구조화된 노드(nodes), 속성(property), 메소드(method)를 갖고 있는 객체들로 문서를 표현한다. 웹페이지를 스크립트나 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.

DOM과 자바스크립트

자바스크립트언어가 문서와 문서의 엘리먼트에 접근하기 위해 DOM 이 필요하다. DOM이 없다면 자바스크립트 언어는 Web page, XML page 및 요소들과 관련된 모델이나 개념에 대한 정보를 갖지 못하게 된다.

페이지 콘텐츠는 DOM에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.
API(web or XML page) = DOM + JS (scripting language)

DOM 활용하기 (CREATE, READ, UPDATE, DELETE, APPEND)

DOM을 활용한다는 의미 = document 객체의 여러 속성과 메소드를 활용한다.
더 알아볼 것 : document객체 window객체 무엇인지 찾아보기

CREATE

.createElement

다큐멘트 객체의 createElement 메소드는 말그대로 element를 만드는 메소드다.

document.createElement('div')
// <div></div>
const newDiv = document.createElement('div')
// 나중에 사용하기 위해 변수에 저장

더 알아볼 것: createDocumentFragment를 활용하여, 더 효율적으로 DOM 제어하는 방법

APEND

.append, .appendChild

const newDiv = document.createElement('div')
document.body.append(newDiv)
// DOM구조에 바디 태그의 자식으로 newDiv를 붙인다.

const newDiv = document.createElement('div')
document.body.appendChild(newDiv)
// DOM구조에 바디 태그의 자식으로 newDiv를 붙인다.

.append 와 .appendChild는 DOM에 엘리먼트를 붙이는 (append의 -을 덧붙인다라는 의미처럼) 메소드이다. 위의 두 코드를 보면 둘을 다를게 없어보인다. 하지만 이 둘을 조금 다르다.

1.DOM string (text) 를 붙일 수 있냐 없냐.

const parent = document.createElement('div');
const child = document.createElement('div');
parent.append(child);
//<div><div></div></div>
// div 엘리먼트에 div 엘리먼트를 자식엘리먼트로 붙이기

const parent = document.createElement('div')
parent.append('이 글을 div 태그의 내용으로')
// <div>이 글을 div 태그의 내용으로</div>

.append 는 위처럼 자식엘리먼트를 붙이는데(Node objects를 붙이는데)도 사용되지만 텍스트를 붙이는데도 사용할 수 있다.

const parent = document.createElement('div');
const child = document.createElement('div');
parent.appendChild(child);
//<div><div></div></div>
// div 엘리먼트에 div 엘리먼트를 자식엘리먼트로 붙이기

const parent = document.createElement('div')
parent.appendChild('이 글을 div 태그의 내용으로')
// // Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'

반면.appendChild는 텍스트를 붙이는데는 사용할 수 없고 자식엘리먼트를 붙이는데(Node objects를 붙이는데)에만 사용할 수 있다.

append 는 -을 덧붙이다 .appendChild는 자식을 덧붙이다라는 뜻을 갖고있는 것처럼 .append는 덧붙이는데 다 사용되고, .appendChild는 자식을 덧붙일 때에만 사용한다라고 이해해야겠다.

2. return을 하느냐 안하느냐.

const parent = document.createElement('div');
const child = document.createElement('div');
const appended1 = parent.append(child);
console.log(appended1) // undefined

const parent = document.createElement('div');
const child = document.createElement('div');
const appended2 = parent.appendChild(child);
console.log(appended2) // <div></div>

위의 코드처럼 .append 는 리턴 값을 가지지 않지만 .appendChild는 append 한 Node Object를 리턴한다.
.append 는 덧붙이는 행위자체에 포커스가 맞춰져 있고 .appendChild는 자식을 덧붙이는데 그 자식에 포커스가 맞춰진다고 이해해야겠다.

3. 다수의 Node Object를 덧붙일 수 있냐 없냐.

const parent = document.createElement('div');
const brother = document.createElement('p');
const sister = document.createElement('p')
parent.append(brother, sister, '우리는 한 가족'); // 잘 작동한다.
parent.appendChild(brother, sister, '우리는 한 가족'); 
//잘 작동하지만 brother만 자식엘리먼트로 추가하고 그 뒤는 무시한다.

위의 코드처럼 .append는 한 번에 여러 Node Object 와 DOM string 을 덧붙일 수 있지만 .appendChild는 여러 Node Object중 처음 것만 덧붙이고 나머지는 무시한다.

출처 : append VS appendChild by Abdulqudus Abubakre