[JS] DOM(Document Object Model)

개인적으로 헷갈리거나 잘 몰랐던 부분들을 정리하는것이라 글이 다소 두서없음

---

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

DOM 소개

---

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

※ DOM를 다룰수 있게 해주는것이 js 인것이지, dom이 js의 일부분인것이 아니다.

※ tag 와 element 의 차이

※ 태그와 태그 사이 공백도 text노드로 인식됨

※ console.dir($~)활용 - 객체 안 속성list 확인 가능

※ $~.attributes

※ on~event를 작성하면 하면 '이벤트 헨들러를 붙였다'고 표현

---

Dom조작 (innerHTML)

innerHTML 속성은 읽기, 쓰기가 모두 가능한 속성. HTML 태그를 입력할 수 도 있다.
가장 쓰기 쉬운 속성이지만, 느리고 보안 위협이 있음. - (textContent 추천)

---

예시1 - 이미 있는 태그에 내용을 추가함

<div id="target">변경 전</div>

let target = document.querySelect('#target');
let newSpan = document.cereateElement('SPAN'); // span 엘리먼트를 만들고
newSpan.innerHTML = '변경 후';
target.appendChile(newSpan);// target 아랫쪽에 newSpan 엘리먼트를 추가함

<div id="target">
	변경 전
    <span>변경 후</span>
</div>

---

예시2 - 태그 삭제

<div id="target">변경 전</div>

let target = document.querySelector('#target');
target.remove();

 

 

---

예시3 - template 태그

<template>태그는, 실제로 스크립트를 이용해 어딘가 붙여넣기 전 까지는 화면에 보이지않는 HTML조각이다.

<template id="will-be-rendered">
	<span>변경 후</span>
</template>

<div id="target">변경 전</div>

let target = document.querySelect('#target');
let template = document.querySelecotr('#will-be-rendered');

// #will-be-rendered 안쪽 내용을 자식 노드를 전부 포함하여 복사한다.
let newContent = document.importNode(temolate.content, true);

// target 내용을 비움
target.innerHTML = '';
target.appendChild(newContent);

<div id="target">
	<span>변경 후</span>
</div>