[JS] DOM

1. DOM 개념

  - DOM(Document Object Model)
  - HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어

const element = document.querySelector('h1')

 

 

2. Node vs Element

  

// 예제2

class N {}
class E extends N {}

console.dir(E) // 출력결과의 prototype 속성에서 N을 상속했다는 것 확인 가능
console.dir(N)
console.dir(E.__proto__)

console.dir(Element)
console.dir(Node)
console.dir(Element.__proto__)

 

 

3. 검색과 탐색

 

// document.getElementById()
// HTML 'id' 속성 값으로 검색한 요소 반환
// 여러 요소가 반환되면 가장 먼저 찾은 요소만 반환
// 검색 결과가 없으면 null 반환
const el = document.getElementById('child2')
console.log(el)


// document.querySelector()
// 'css 선택자'로 검색한 요소를 하나! 반환
// 여러 요소가 반환되면 가장 먼저 찾은 요소만 반환
// 검색 결과가 없으면 null 반환
const el2 = document.querySelector('.child:first-child')
console.log(el2)


// document.querySelectorAll()
// 'css 선택자'로 검색한 모든 요소를 NodeList로 반환
// NodeList 객체는 .forEach()를 사용할 수 있음(배열)
const NodeList = document.querySelectorAll('.child')
console.log(NodeList) // 유사배열 확인(length 포함되고 객체 데이터임)
NodeList.forEach(el => console.log(el.textContent))

// foreach를 제외한 다른 베열의 메소드로 array 클래스의 from 정적 메소드 사용
// 유사배열을 실제 배열로 변환 후, 배열의 메소드로 사용
console.log(Array.from(NodeList).reverse())


// N.parentElement
// 노드의 부모 요소를 반환
const el3 = document.querySelector('.child')
console.log(el3.parentElement)


// E.closest()
// 자신을 포함한 조상 요소 중 css 선택자와 일치하는
// 가장 가까운 요소를 반환
// 요소를 찾지 못하면, null 반환
const el4 = document.querySelector('.child')

console.log(el4.closest('div')) // 본인 출력(자신이 div 사용 중)
console.log(el4.closest('body')) // body 태그 출력
console.log(el4.closest('.hello')) // null


// N.previousSibling / N.nextSibling
// 노드의 이전 형제 혹은 다음 형제 노드를 반환
const el5 = document.querySelector('.child')
console.log(el5.previousSibling) // 주석으로 줄바꿈
console.log(el5.nextSibling) // "텍스트1"
console.log(el5.previousSibling.parentElement) // 부모요소 출력


// E.previousElementSibling / E.nextElementSibling
// 요소의 이전 형제 혹은 다음 형제 요소를 반환
const el6 = document.querySelector('.child')
console.log(el5.previousElementSibling) // null
console.log(el5.nextElementSibling) // 그다음 child 요소

 

// E.previousElementSibling / E.nextElementSibling
// 요소의 이전 형제 혹은 다음 형제 요소를 반환
const el6 = document.querySelector('.child')
console.log(el5.previousElementSibling) // null
console.log(el5.nextElementSibling) // 그다음 child 요소


// E.children
// 요소의 모든 자식요소 반환
const el7 = document.querySelector('.parent')
console.log(el7.children) // length 까지 포함하여 유사배열

// 정적 메소드 from 사용 - 유사배열 객체를 배열로 변환
console.log(Array.from(el7.children))


// E.firstElementChild / E.lastElementChild
// 요소의 첫 번째 자식 혹은 마지막 자식 요소를 반환
const el8 = document.querySelector('.parent')
console.log(el8.firstElementChild)
console.log(el8.lastElementChild)

 

 

4. 생성, 조회, 수정 1

 

// document.createElement()
// 메모리에만 존재하는 새로운 html 요소를 생성해서 반환
const divEl = document.createElement('div')
console.log(divEl)

const inputEl = document.createElement('input')
console.log(inputEl)


// E.prepend() / E.append()
// 노드를 요소의 첫번째 혹은 마지막 자식으로 삽입
const parentEl = document.querySelector('.parent')
const el = document.createElement('div')
el.textContent = 'Hello~'

parentEl.prepend(new Comment('주석'))
parentEl.append(el, 'text')


// E.remove()
// 요소를 제거
const el2 = document.querySelector('.child')
el2.remove()

 

 

// E.insertAdjacentElement()
// 대상 요소의 지정한 위치에 새로운 요소 삽입
// 대상요소.indestAdjacentElement(위치, 새로운 요소)

/* html */ `
<!-- 'beforebegin' -->
<div class="target">
    <!-- afterbegin -->
    Content!
    <!-- beforeend -->
</div>
<!-- afterend -->`

const childEl = document.querySelector('.child')
const newEl = document.createElement('span')
newEl.textContent = 'hellooo~~~~~'

childEl.insertAdjacentElement('beforebegin', newEl)


// N.insertBefore()
// 부모노드의 자식인 참조노드의 이전 형제로 노드를 삽입
// 부모노드.insertBefore(노드, 참조노드)
const parentEl = document.querySelector('.parent')
const childEl2 = document.querySelector('.child')
const newEl2 = document.createElement('span')
newEl2.textContent = 'hellooo~!!!~~~~'

parentEl.insertBefore(newEl2, childEl2)


// N.contains()
// 주어진 노드가 노드의 자신을 포함한 후손인지 확인
// 노드.contains(주어진 노드)
const parentEl2 = document.querySelector('.parent')
const childEl3 = document.querySelector('.child')

console.log(parentEl2.contains(childEl3))
console.log(document.body.contains(parentEl2))
console.log(document.body.contains(childEl3))
console.log(document.body.contains(document.body))
console.log(parentEl2.contains(childEl3))
console.log(parentEl2.contains(document.body))
console.log(childEl3.contains(document.body))


// N.textContent
// 노드의 모든 텍스트를 얻거나 변경
const el = document.querySelector('.child')
console.log(el.textContent)


// E.innerHTML
// 요소의 모든 html 내용을 하나의 문자로 얻거나, 새로운 html을 지정
// createElement를 사용하지 않아도 생성 가능
const el2 = document.querySelector('.parent')
console.log(el2.innerHTML)
el2.innerHTML = `<span style="color:red">hello~!1</span>`

 

 

 

5. 생성, 조회, 수정 2

 

// E.dataset
// 요소의 각 'data-' 속성 값을 얻거나 지정
const el = document.querySelector('.child')
const str = 'hello world!'
const obj = {a:1, b:2}

// helloworld 속성에 문자데이터 할당
// 실제로 객체 데이터를 지정할 때는 json 문자로 변환하지 않으면
// js 객체 모양 그대로 저장되기에 값 얻을 때 문제생길 수 있음
el.dataset.helloworld = str
// 그래서 나중에 분석 가능한 하나의 json 문자로 변경해서 그 내용을 obj 데이터 속성에 저장
// 매개변수로 들어오는 값을 문자화
el.dataset.object = JSON.stringify(obj)

console.log(el.dataset.helloworld)
console.log(el.dataset.object)
console.log(JSON.parse(el.dataset.object))


// E.tagName
// 요소의 태그 이름 반환
const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const el2 = document.querySelector('span')

console.log(parentEl.tagName)
console.log(childEl.tagName)
console.log(el.tagName)
console.log(document.body.tagName)


// E.id
// 요소의 id 속성 값을 얻거나 지정
const el3 = document.querySelector('.child')
console.log(el3.id) // id 값이 없어서 빈 문자 출력

el3.id = 'child1'
console.log(el3.id)
console.log(el3)


// E.className
// 요소의 class 속성 값을 얻거나 지정
const el4 = document.querySelector('.child')
console.log(el4.className)

// class 명 추가 때문에 띄어쓰기
el4.className += ' child1 active'
console.log(el4.className)
console.log(el4)


// E.classList
// 요소의 class 속성 값 제어
// .add() 새로운 값 추가
// .remove() 기존 값 제거
// .toggle() 값을 토글
// .contains() 값을 확인
const el5 = document.querySelector('.child')

el5.classList.add('active')
console.log(el5.classList.contains('active'))

el5.classList.remove('active')
console.log(el5.classList.contains('active'))

el5.addEventListener('click', ()=>{
    // 있으면 제거, 없으면 추가
    el5.classList.toggle('active')
    console.log(el5.classList.contains('active'))
})

 

 

 

6. 브라우저 크기와 좌표

 

// E.style
// 요소의 style 속성(인라인 스타일)의 css 속성 값을 얻거나 지정
// 별도 css 파일을 제공하거나 style 태그를 이용해서 만들어냈을 경우 확인 불가능
const el6 = document.querySelector('.child')

// 개별 지정
// el6.style.width = '100px'
// el6.style.fontSize = '20px'
// el6.style.backgroundColor = 'green'
// el6.style.position = 'absolute'

// 한번에 지정
Object.assign(el6.style, {
    width:'100px',
    fontSize:'20px',
    backgroundColor:'green',
    position:'absolute'
})

console.log(el6.style)
console.log(el6.style.width)
console.log(el6.style.fontSize)
console.log(el6.style.backgroundColor)
console.log(el6.style.position)


// window.getComputedStyle()
// 요소에 적용된 스타일 객체를 반환
// style 속성으로 확인이 불가능한
// 개별 css 파일이나 style 태그로 적용된 모든 스타일을 객체 데이터로 확인 가능
const styles = window.getComputedStyle(el6)

console.log(styles.width)
console.log(styles)


// E.getAttribute() / E.setAttribute()
// 요소에서 특정 속성 값을 얻거나 지정
// html: attribute, css,js : property
el6.setAttribute('title', 'Hello world!')
console.log(el6.getAttribute('title'))


// E.hasAttribute() / E.removeAttribute()
// 요소에서 특정 속성을 확인하거나 제거
// html: attribute, css,js : property
console.log(el6.hasAttribute('class'))
el6.removeAttribute('class')
console.log(el6.hasAttribute('class'))
console.log(el6)

 

// window.innerWidth / window.innerHeight
// 현재 화면 viewport의 크기를 얻음
// 브라우저 크기, 좌표
console.log(window.innerWidth)
console.log(window.innerHeight)


// window.scrollX / window.scrollY
// 페이지의 좌상단 기준, 현재 화면의 수평/수직 스크롤 위치 얻음
console.log(window.scrollX, window.scrollY)


// window.scrollTo(), E.scrollTo()
// 지정된 좌표로 대상(화면, 스크롤 요소)을 스크롤 함
// 대상.scrollTo(X좌표, Y좌표)
// 대상.scrollTo({top:Y, left:X, behavior:'smooth'})

// window 객체
// setTimeout(() => {
//     window.scrollTo({
//         left:0,
//         top:500,
//         behavior:'smooth'
//     })
// }, 1000);

// 요소
// 현재 parent 클래스 요소에 overflow:auto로 설정해서 스크롤 가능
const parentEl = document.querySelector('.parent')
setTimeout(() => {
    parentEl.scrollTo({
        left:0,
        top:500,
        behavior:'smooth'
    })
}, 1000);


// E.clientWidth / E.clientHeight
// 테두리 선을 제외한 요소의 크기를 얻음
const childEl = document.querySelector('.child')

// 가로너비는 스크롤바 너비도 제외하고 출력
console.log(parentEl.clientWidth, parentEl.clientHeight)
console.log(childEl.clientWidth, childEl.clientHeight)


// E.offsetWidth / E.offsetHeight
// clientwidth, clientheight보다 권장!!!
// 테두리 선을 포함한 요소의 크기를 얻음
// 가로너비는 스크롤바 너비도 제외하고 출력
console.log(parentEl.offsetWidth, parentEl.offsetHeight)
console.log(childEl.offsetWidth, childEl.offsetHeight)


// E.scrollLeft / E.scrollTop
// 스크롤 요소의 최상단 기준,
// 현재 스크롤 요소의 수평 혹은 수직 스크롤 위치를 얻음
// 화면 기준은 scrollx, scrolly
window.parentEl2 = document.querySelector('.parent')
console.log(parentEl2.scrollLeft, parentEl2.scrollTop)


// E.offsetLeft / E.offsetTop
// 페이지의 최상단 기준, 요소의 위치를 얻음
console.log(parentEl.offsetLeft, parentEl.offsetTop)
console.log(childEl.offsetLeft, childEl.offsetTop)


// E.getBoundingClientRect()
// 테두리 선을 포함한 요소의 크기와
// 화면에서의 상대 위치 정보를 얻음
// 사용자가 보는 화면 위치에 따라서 매번 요소의 다른 위치 정보가 필요한 경우에 유용하게 사용
// 하지만 매번 새로 호출하는 건 비효율적이기에 필요한 경우에만 사용
console.log(parentEl.getBoundingClientRect())
console.log(childEl.getBoundingClientRect())