[자바스크립트] 문서 객체 조작하기

문서 객체 모델 DOM

문서 객체 (document object)

HTML 에서는 요소라고 부르지만 javascript 에서는 이를 문서 객체라고 부른다
문서 객체를 조작한다 in 자바스크립트 = HTML 요소들을 조작한다

Document Object Model

문서 전체를 조합해서 만든 전체적인 형태

DOMContentLoaded 이벤트

사용하는 이유

문서 객체를 조작할 때 사용한다

document.addEventListener('DOMContentLoaded', () => { })

기본적으로 HTML이나 자바스크립트는 위에서부터 아래의 순서로 파일을 읽기 때문에
만약 body 태그가 생성되기 이전에 head 태그에서 body 태그에 무언가를 출력하려고 하면 문제가 발생한다
따라서 head 태그 내부에 script 태그를 배치하면 body 태그에 있는 문서 객체 (요소)에 접근할 수 없다

head 태그 내부의 script 태그에서 body 태그에 있는 문서에 접근하기 위해서는
화면에 문서 객체 (요소)를 모두 읽을 때까지 기다려야 한다

DOMContentLoaded 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트이다

<script>
 document.addEventListener('DOMContentLoaded', () => {
  // 콜백함수 h1
  const h1 = text => `<h1>${text}</h1>`
  codument.body.innerHTML += h1('DOMContentLoaded 이벤트 발생')
  })
</script>

addEventListener() 메서드

document.addEventListener('DOMContentLoaded', () => {})
document 라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백함수를 실행하라는 의미이다

문서 객체 가져오기

document.body

문서의 body 요소를 읽어들일 수 있다

document.head
document.body
document.title

웹브라우저의 자바스크립트가 당연히 있다고 전제하고 만든 속성이다

document.querySelector()

그 밖의 head 요소나 body 요소 내부에 만든 다른 요소들은 별도의 메소드를 사용해 접근한다

document.querySelector(선택자)
document.querySelectorAll(선택자)

여기서의 선택자는 CSS 선택자를 말한다

document.addEventListener('DOMContentLoaded', () => {
  const header = document.querySelector('h1')
  
  header.textContent = 'HEADERS'
  header.style.color = 'white'
  header.style.backgroundColor = 'black'
  header.style.padding: '10px'
})

실제 h1태그에는 내용을 입력하지 않았지만 자바스크립트쪽에서 문서 객체를 조작했기 때문에 화면에 출력되는 것을 확인할 수 있다

document.querySelectorAll() 메서드

문서 객체 여러 개를 배열로 읽어들인다
내부의 요소에 접근하고 활용하기 위해서는 반복을 돌려야 한다
forEach() 메서드를 사용해서 반복을 돌린다

document.addEventListener('DOMContentLoaded', () => {
  const headers = document.querySelectorAll('h1')
  
  headers.forEach(headers => {
    headers.textContent = 'HEADERS'
    headers.style.color = 'white'
    headers.style.backgroundColor = 'black'
    headers.style.padding = '10px'
  })

글자 조작

문서 객체.textContent

입력된 문자열을 그대로 넣는다

문서 객체.innerHTML

입력된 문자열을 HTML 형식으로 넣는다

document.addEventListener('DOMContentLoaded', () => {
 const a = document.querySelector('#a')
 const b = document.querySelector('#b')
 
 a.tentContent = '<h1>textContent 속성</h1>'
 b.innerHTML = '<h1>textContent 속성</h1>'

textContent 속성의 경우 글자가 그대로 들어갔지만, innerHTML 속성은 h1 요소로 변환해서 들어갔다

innerText 속성

textContent 속성은 최신 웹 브라우저 또는 인터넷 익스플로러 9 이후의 웹 브라우저에서 사용할 수 있고, 그 이전의 IE에서는 innerText 속성을 사용했다

따라서 textContent 속성을 사용하는 것이 좋다

속성 조작

문서객체.setAttribute(속성이름, 값)

특성 속성에 값을 지정한다

문서객체.getAttribute(속성이름)

특정 속성을 추출한다

document.addEventListener('DOMContentLoaded', () => {
  const rects = document.querySelector('.rect') // 특정 클래스로 요소 선택함
  
  rects.forEach((rect, index) => {
    // index [0,1,2,3] → [1,2,3,4] → width: 100,200,300,400
    const width = (index + 1) * 100
    const src = `http://placekitten.com/${width}/250`
    rect.setAttribute('src', src) // src 속성에 값을 지정한다
  })
})

<!-- html 태그 -->
<img class='rect'>
<img class='rect'>
<img class='rect'>
<img class='rect'>

스타일 조작

CSS 속성이름	자바스크립트 style 속성이름
background-color	backgroundColor
text-align	textAlign
font-size	fontSize

style 객체 스타일 조정방법

style 속성은 객체형태로 이루어져있기 때문에 객체의 요소에 접근하는 방식으로 스타일 조정할 수 있다

h1.style.backgroundColor // 가장 많이 쓰이는 방식
h1.style['background-color']
h1.style['background-color']

문서 객체 생성

document.createElement(문서 객체 이름)

문서를 어떤 문서 아래에 추가할지를 지정해야 하는데
트리형태로 부모와 자식 관계를 기준으로 지정하면 된다

appendChild() 메서드

어떤 부모 객체 아래에 자식 객체를 추가할지 지정할 수 있다

부모객체.appendChild(자식객체)

활용예시

document.addEventListener('DOMContentLoaded', () => {
  const header = document.createElement('h1')
  
  header.textContent = '문서 객체 동적으로 생성하기'
  header.setAttribute('data-custom', '사용자 정의 속성')
  header.style.color = 'white'
  header.style.backgroundColor = 'black'
  
  // h1 태그를 body 태그 아래에 추가한다
  document.body.appendChild(header)
})

문서 객체 이동

appendChild() 메서드

문서 객체를 이동할 때에도 사용이 가능하다
문서 객체의 부모는 언제나 하나이어야 하기 때문에 문서객체를 다른 문서 객체에 추가하면 문서 객체가 이동한다 무슨 말이지⁉️

문서 객체 제거

removeChild() 메서드

부모객체.removeChild(자식객체)

appendChild() 메서드 등으로 부모 객체와 이미 연결이 완료된 문서객체의 경우
parentNode 속성으로 부모 객체에 접근할 수 있기 때문에 이러한 방식으로 문서객체를 제거한다

문서객체.parentNode.removeChild(문서객체)
// 문서객체.parentNode 의 형태로 부모 객체를 선택할 수 있다

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(()=>{
    const h1 = document.querySelector('h1')
    h1.parentNode.removeChild(h1) // h1 태그의 부모 객체 body태그에 접근해서 제거
    // document.body.removeChild(h1) 형태로 제거할 수도 있다
    // h1.parentNode = document.body 이기 때문
  }, 3000)
})

<!-- html 태그 -->
<hr>
<h1>제거 대상 문서 객체</h1>

이벤트 설정

document.addEventListener('DOMContentLoaded', () => {})

document 라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때 매개변수로 지정한 콜백함수를 실행하라는 뜻

.addEventListener()

모든 문서 객체는 이벤트가 발생하는데 이러한 이벤트가 발생할 때 실행할 함수는 addEventListener() 메서드를 통해 지정한다

• 생성
• 클릭
• 마우스 호버

문서객체.addEventListener(이벤트이름, 콜백함수)

여기서의 콜백함수는 이벤트가 발생할 때 실행할 함수로
이벤트 리스너 또는 이벤트 핸들러 라고 부른다

document.addEventListener('DOMContentLoaded', () => {
  let counter = 0
  const h1 = document.querySelector('h1')
  
  h1.addEventListener('click', event => {
    counter++
    h1.textContent = `클릭 횟수: ${counter}` 
  })
})

/* css */
h1 {
/* 클릭을 여러번 햇을 때 글자가 선택되는 것을 막기 위한 스타일 */
user-select: none;
}

<!-- html 태그-->
<h1>클릭 횟수: 0</h1>

이벤트 제거

removeEventListener() 메서드

문서객체.removeEventListener(이벤트이름, 이벤트리스너)