[DOM] 문서 객체 모델

정지우·2021년 7월 15일
0

keyword.zip

목록 보기
32/40

DOM(Document Object Model)

정의

  1. html문서의 구조와 관계를 JavaScript 객체(Object)로 표현한 모델
  2. JavaScript를 이용해서 html 엘리먼트의 속성값을 얻어내거나, 변경하는 방법

트리구조

htmljavascript의 objectTree구조다.

document

document라는 전역변수로 접근이 가능하다.

DOM이 JavaScript는 아니다.

DOM 구조 접근을 그저 JavaScript를 이용해서 접근할 뿐이다.


DOM 해석

<body>
	<div id="practice" class="highlight red">
      여기 엘리먼트가 하나 있습니다
      <span>자식 엘리먼트도 있습니다</span>
      <span>하나 더 있습니다</span>
	</div>
</body>

div#practice 기준으로

태그 이름: div
ID: practice
CLASS: highlight red
안쪽에 담긴 내용: 여기 엘리먼트가 하나 있습니다 ~ 하나 더 있습니다.</span>
부모 엘리먼트: body
자식 엘리먼트: span, span


html 엘리먼트도 javascript로 표현이 가능하다.

{
  tagName: 'div',
  id: 'practice',
  classList: ['highlight', 'red']
  textContent: '여기 엘리먼트가 하나 있습니다 자식도 있습니다 자식도 여럿 있습니다',
  parentElement: 'body',
  children: [
    {
    	tagName: 'span'
      	textContent: '자식도 있습니다'
    },
    {
    	tagName: 'span',
      	textContent: '자식도 여럿 있습니다'
    }
  ]
}

console.dir(document)

document

DOM을 대표하는 객체

console.log(document)

document를 html element 형식으로 확인할 수 있다.

console.dir(document)

DOM을 대표하는 객체인 document의 다양한 속성들을 확인할 수 있다.

개발자 도구 안 'element'탭에서 'esc'를 누르면 'console'과 동시에 볼 수 있다.

$0

현재 선택한 엘리먼트는 $0라는 변수에 담긴다
엘리먼트를 console창에서 확인할 수 있다.

엘리먼트 객체에서 유용하고 쓸만한 속성들

tagName

태그이름

id

id

classList

class 목록
유사 배열 형태

className

class 문자열

attributes

속성 객체

style

스타일 객체

innerHTML, innerText, textContent

엘리먼트에 담긴 내용

value

form 입력값

children

자식 엘리먼트

parentElement

부모 엘리먼트

childNodes

자식 노드

dataset

data-* 속성에 담긴 값
데이터를 엘리먼트에 직접 집어넣고 싶을 때

onclick, onmouseover, onkeyup

이벤트

offsetTop, offsetLeft, scrollTop, scrollLeft, clientTop, clientLeft

좌표정보

offsetWidth, offsetHeight, scrollWidth, scrollHeight, clientWidth, clientHeight

크기 정보

innerHTML, innerText, textContent

innerHTML, textContent는 반드시 기억해두자.


$0<li>엘리멘트로 선택해보자.

innerText

실제로 화면에 렌더링되고 있는 텍스트만 출력해서 보여준다.

textContent

렌더링된 화면이 아니라, 공백까지 포함한다.

innerHTML

HTML 통째로 전체적으로 보여진다.

값을 할당할 수 있는 속성 두 가지

innerHTML, textContent는 실제로 내용을 바꿀 수 있다.

textContent로 텍스트 수정하기

innerHTML로 내용에 태그를 집어넣기

from 입력값

<input id="username" type="text" placeholder="아이디를 입력하세요" />$0으로 선택해준다.

$0.value

입력한 값을 의미한다.

input창에 값을 입력해주고 다시 $0.value를 해주면 입력한 값을 받아올 수 있다.

$0.value
"내용을 다르게 입력했어요

자식 엘리먼트 vs 자식 노드

엘리먼트(element) vs 노드(node)

<body>
	<div id="practice" class="highlight red">
      여기 엘리먼트가 하나 있습니다
      <span>자식 엘리먼트도 있습니다</span>
      <span>하나 더 있습니다</span>
	</div>
</body>

자식 엘리먼트

children : span, span

자식 노드

childNodes : "\n 여기 엘리먼트가 하나 있습니다", span, "\n ", span, "\n "

단순 string이 아닌 'Text 노드'입니다. '문자열을 담은 객채'입니다.

ElementNode에 속해있습니다.
TextElement는 아닙니다.

클릭 이벤트

버튼을 눌렀을 때 생기는 action

<button>Click Me</button>
$0.onclick= function() {
	console.log('thank you!')
}

// 참고: 위 내용을 아래와 같이 메소드를 이용해 구현할 수도 있습니다.

$0.addEventListener('click', function() {
	console.log('thank you!')
});

onclick 이벤트 실습

엘리먼트 선택

$0만 가지고 DOM을 다루기엔 한계가 있다.
JavaScript를 이용해, 특정 element를 선택하고 가져올 수 있다.

getElementsByTagName

Tag를 이용
elements

getElementById

id를 이용
element

getElementsByClassName

class를 이용
element

querySelector / querySelectorAll(중요)

Selector를 이용

'등록'버튼 눌렀을 때, username, new-tweet 받아오는 방법

selector(선택자)

<button id="register">등록</button>

button에 대해 Javascript에서 엘리먼트를 선택하는 방법

document.querySelector('#register')

여기에선, '#register'가 셀렉터(선택자)이다.

DOM 조작(innerHTML)

innerHTML 속성은 읽기 뿐만 아니라, 쓰기도 가능한 속성
가장 쓰기 쉬운 속성이지만, 보안 위협이 있기 때문에 textContent가 제일 안전하다.

HTML

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

JavaScript

let target = document.querySelector('#target');
target.innerHTML = `
	<span>변경 후</span>
`

HTML 출력 결과

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

DOM 조작(메소드)

엘리먼트를 만드는 메소드는 반드시 알아두시기 바랍니다.
innerHTML을 이용한 생성에 비해 다소 복잡하게 느껴질 수 있지만,
메소드를 이용한 엘리먼트 생성은 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점이 있습니다.

HTML

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

JavaScript

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

// span 엘리먼트를 만듭니다.
let newSpan = document.createElement('SPAN');

newSpan.innerHTML = '변경 후';

// target 아랫쪽에 newSpan 엘리먼트를 추가합니다.
target.appendChild(newSpan);

HTML 출력 결과

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

엘리먼트 삭제

HTML

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

JavaScript

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

// target 엘리먼트를 삭제합니다.
target.remove();

HTML 출력 결과

div#target은 사라지고 없습니다!

레퍼런스 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="new-comment">
        <div>댓글 9</div>
        <input id="username" type="text" placeholder="아이디를 입력하세요" />
        <input id="new-tweet" type="text" placeholder="댓글를 입력하세요" />
        <button>등록</button>
    </div>
    <ul id="viwe-comments">
        <li class="comment">
            <div class="username">hoyoung</div>
            <div class="contents">시각장애인들 짱</div>
            <div>2019-10-11</div>
            <div class="buttons"></div>
        </li>
        <li class="comment">
            <div class="username">johnny</div>
            <div class="contents">좋네요</div>
            <div>2019-10-11</div>
            <div class="buttons"></div>
        </li>
        <li class="comment">
            <div class="username">steve</div>
            <div class="contents">스티브가 쓴 글</div>
            <div>2019-10-11</div>
            <div class="buttons"></div>
        </li>
    </ul>
</body>
</html>

이벤트 객체

사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체

event

클릭이나 드래그하는 일

event.target

이벤트 발생 트리거가 된 엘리먼트

function handleClick() {
// 아래의 빈 칸(____)을 채우세요.
	let currentMenu = event.target.textContent; // TODO
	console.log(currentMenu + "를 클릭하셨습니다.");
      }
profile
재미를 쫓는 개발자

0개의 댓글