Dom 정리

Dom : Document Object Model
1. HTML 문서의 구조와 관계를 객체로 표현한 모델
2. 트리구조
3. HTML 문서도 자바스크립트 객체도 둘 다 트리 구조
4. document 라는 전역변수로 접근

cosole.dir : 엘리먼트를 객체의 형태로 볼 수 있는 방법

유용하게 쓰이는 속성
태그 이름 : tagName
id : id
class 목록 : classList
class 문자열 : className
속성객체 : attributes
스타일 객체 : style
엘리먼트에 담긴 내용 : innerHTML, innerText, textContent
form 입력 값 : value
자식 엘리먼트 : children
부모 엘리먼트 : parentElement
자식 노드 : childNodes
data-속성에 담긴 값 : dataset
이벤트 : onclick, onmouseover, onkeyup 등
좌표정보(기준점에 따라 다름) :
offsetTop,offsetLeft, scrollTop,scrollLeft, clientTop,clientLeft
크기정보(기준점에 따라 다름) :
offsetWidth,offsetHeight, scrollWidth,scrollHeight, clientWidth,clientHeight

엘리먼트 선택
$0으로만 Dom을 다룰 수는 없습니다
자바스트립트를 이용해서 특정 엘리먼트를 선택하고 가져올 수 있습니다
1. 태그를 이용:getElementsByTagName //복수
2. id를 이용: getElementById // 단수 그래서 Element 뒤에 s 가 안 붙음
3. class를 이용: getElementsByClassName //복수
4. selector를 이용: querySelector / querySelectorAll(사실상 얘만 알아도 상관없음)

Dom 조작 (innerHTML)
innerHTML속성은 읽기 뿐만 아니라 쓰기도 가능한 속성입니다
HTML 태그를 입력할 수도 있습니다
가장 쓰기 쉬운 속성이지만 느리고 보안 위협이 있습니다(textContent가 안전함)

HTML

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

JavaScript

let target = document.querySelector('#target') // 아이디를 조회후
target.innerHTML = `
	<span>변경 후</span?
   `

HTML 출력결과

<div id='target'>
  변경 전
  <span>변경 후</span> // target 안으로 들어감
</div>

Dom 조작 (메소드)
innerHTML 보다 생성이 다소 복잡 하지만 메소드를 이용한 엘리먼트 생성은 생성과 동시에 이벤트 핸들러 등록이 가능합니다

HTML

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

JavaScript

let target = document.querySelector('#target') // 아이디를 조회후
let newSpan = document.createElement('SPAN') // span 엘리먼트를 만든다
newSpan.innerHTML = '변경 후'
target.appenChild(newSpan); // target 아랫쪽에 newSpan 엘리먼트를 추가합니다

HTML 출력결과

<div id='target'>
  변경 전
  <span>변경 후</span> //target 안으로 들어감
</div>

Dom 조작 ( 태그)
HTML 조각을 HTML 내에 정의할 수도 있습니다 태그는 실제로 스크립트를 이용해
어딘가 붙여넣기 전까지는 화면에 보이지 않는 HTML 조각입니다
마크업(HTML)과 구현(javaScript)의 구분이 보다 더 철저 합니다

HTML

<template id ='will-be-rendered'>
  <span>변경 후</span>
<template>
  
<div id='target'>변경 전</div>

javaScript

let target = document.querySelector('#target')
let template = document.querySelector('#will-be-rendered')

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

// target 내용을 비웁니다
target.innerHTML = ''
target.appendChild(newContent)