DOM (Document Object Model)

🔴 DOM API 이란?

DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 합니다. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 합니다.

아래 코드를 통해 트리를 탐험해 봅시다.

document.head
document.body
document.body.childNodes
document.body.childNodes[1]
document.body.childNodes[1].tagName
document.body.childNodes[1].innerText
document.body.childNodes[1]. //점만 찍어서 얼마나 많은 애트리뷰트가 있는지 확인해보세요.
document.body.childNodes[2]
document.body.childNodes[2].data

🧐 API는 **Application Programming Interface** 입니다. 쉽게 ‘설명서’라고 기억해주시면 됩니다.

🟠 DOM 트리에 접근하기

document 객체를 통해 HTML 문서에 접근이 가능합니다. document는 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할을 수행합니다.

// 해당하는 Id를 가진 요소에 접근하기
document.getElementById();

// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();

// 해당하는 클래스를 가진 모든 요소에 접근하기
document.getElementsByClassName();

// ⭐css 선택자로 단일 요소에 접근하기, 가장 먼저 나오는 요소 1개
document.querySelector("selector");

// ⭐css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");

🤔 **HTMLCollection과 NodeList**

getElementsBy… 메소드와 querySelectorAll 메소드는 모두 조건에 일치하는 모든 요소를 찾는다는 공통적인 기능을 수행합니다. 하지만 그 결과물을 콘솔창에서 확인하면 조금 다르다는것을 알게 됩니다.

<article id="container">
    <ul>
        <li>탕수육</li>
        <li class="item-second">유산슬</li>
        <li>짜장면</li>
    </ul>
</article>

<script>
	const cont = document.getElementById('container');
	const item1 = cont.getElementsByTagName('li');
	const item3 = cont.querySelectorAll('li');
</script>

위와 같은 코드를 작성하였을 때 item1과 item3을 콘솔에 찍어보면 결과는 아래와 같습니다.

HTMLCollection과 NodeList 는 모두 배열과 비슷한 객체(array-like object) 형태를 가집니다. 때문에 안에 있는 데이터에 접근하기 위해서 배열처럼 원소의 인덱스로 접근한다는 공통점이 있지만,

가장 큰 차이점은 해당 객체에 포함될 수 있는 DOM 요소의 유형입니다. HTMLCollection은 HTML만 포함하지만, NodeList는 모든 유형의 DOM 요소 즉, text, 주석 등을 모두 포함합니다.

또 다른 차이점은 객체를 구성하는 값이 변경 가능한지 여부입니다. HTMLCollection은 실시간으로 업데이트되며, 해당 객체의 각 속성에 대한 변경 사항이 즉시 반영됩니다. 반면에, NodeList는 정적이므로 해당 객체에 대한 변경 사항은 즉시 반영되지 않습니다.

마지막으로 사용할 수 있는 메소드가 다릅니다. NodeList는 forEach 같은 배열 메소드를 사용할 수 있지만 HTMLCollection은 또 다른 기능을 지원합니다.

🟡 DOM 제어 명령어

1. 이벤트 삽입

target.addEventListener( type, listener )의 문법 형태를 지닙니다.

<button>HELLO!</button>

// 이벤트의 타입에는 click, mouseover, mouseout, wheel 등 다양한 이벤트를 감지합니다.
// listener 함수의 인수에는 이벤트에 대한 정보가 담겨있습니다.

const myBtn = document.querySelector("button");

myBtn.addEventListener('click', function(){
	console.log("hello world");
})

1. 클래스 제어

classList 객체를 통해 요소의 class 속성을 제어할 수 있습니다.

<button>Make me BLUE!</button>

const myBtn = document.querySelector("button");

myBtn.addEventListener('click', function(){

// blue 라는 클래스의 속성 값을 지정 할 수 있습니다.
	myBtn.classList.add("blue");

	// myBtn.classList.remove("blue");     클래스를 제거합니다.
	// myBtn.classList.toggle("blue");     클래스를 토글합니다. 없으면 넣어주고, 있으면 제거합니다.
	// myBtn.classList.contains("blue");   해당하는 클래스가 있는지 확인합니다.
})

2. 요소 제어

DOM api를 이용하면 요소를 새롭게 생성하고, 위치하고, 제거할 수 있습니다.

1. document.createElement(target) : target 요소를 생성합니다.
2. document.createTextNode(target) : target 텍스트를 생성합니다.
3. element.appendChild(target) : target 요소를 element의 자식으로 위치합니다.
4. element.removeChild(target) : element의 target 자식 요소를 제거합니다.

<ul></ul>
<button>Make me MORE!</button>

const myBtn = document.querySelector("button");
const myUl = document.querySelector("ul");

myBtn.addEventListener('click', function(){
	for(let i=0; i < 5; i++){
		const myLi = document.createElement('li');
		myUl.appendChild(myLi);
	}
})

1. element.append(target) : target 요소를 element의 자식으로 위치합니다. appendChild 와 다른점은 노드 뿐만 아니라 여러개의 노드를 한번에, 그리고 텍스트도 자식 노드로 포함시킬 수 있다는것 입니다.
2. target.remove() : target 요소를 제거합니다.

const myBtn = document.querySelector("button");
const myUl = document.querySelector("ul");

myBtn.addEventListener('click', function(){
	for(let i=0; i < 5; i++){
		const myLi = document.createElement('li');
		const btnDel = document.createElement('button');
    const btnTxt = document.createTextNode('버튼');

    btnDel.append(btnTxt);
		btnDel.addEventListener('click', ()=>{
			myLi.remove();
		});
		myLi.append('삭제하기: ', btnDel);
		myUl.appendChild(myLi);
    }
});

<div id="parentElement">
    <span id="childElement">hello guys~</span>
</div>

// parentElement.insertBefore(target, location); target요소를 parentElement의 자식인 location 위치 앞으로 이동합니다.

var span = document.createElement("span");
var sibling = document.getElementById("childElement");
var parentDiv = document.getElementById("parentElement");
parentDiv.insertBefore(span, sibling);

3. JavaScript 문자열을 사용해 element, text 노드를 생성하거나 추가하기

DOM api를 이용하면 요소 안의 값에 접근하여 값을 가져오거나, 변경할 수 있습니다.

<p></p>
<input type="text">
<button>Write Something!</button>

const myBtn = document.querySelector("button");
const myP = document.querySelector("p");
const myInput = document.querySelector("input");

myBtn.addEventListener('click', function(){
	myP.textContent = myInput.value;
});

// input 요소에 'input' 이벤트를 연결하면 실시간으로 값이 반영되게 만들 수도 있습니다.
myInput.addEventListener('input', ()=>{
  myP.textContent = myInput.value;
});

⭐중요⭐ myP.innerHTML = "<strong>I'm Strong!!</strong>";

// innerHTML 은 요소(element) 내에 포함된 HTML 마크업을 가져오거나 설정합니다. 중요한 기능은 innerHTML로 값을 할당할 때, 마크업으로 변환할 수 있는 문자열이 있다면 마크업으로 만들어 보여준다는 것 입니다. 만약 그런 문자열이 없다면 그냥 문자열만 컨텐츠로 설정합니다.

// innerText 속성은 요소의 **렌더링된** 텍스트 콘텐츠를 나타냅니다. (**렌더링된**에 주목하세요. ****innerText는 텍스트 내에 문법적으로 처리가 가능한 텍스트가 있으면 처리가 끝난 결과물을 텍스트로 전달합니다.)

// textContent 속성은 노드의 텍스트 콘텐츠를 표현합니다. 컨텐츠를 단순히 텍스트로만 다룹니다.

⭐중요⭐ innerHTML 사용시 주의 사항https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML#security_considerations

⭐중요⭐ 🤔 innerHTML 더 생각해보기 위의 내용을 통해 innerHTML이 의도치 않게 자바스크립트 코드를 실행시킬 수 있다는 것을 알게 되었습니다. 그럼 innerHTML은 사용해서는 안되는 속성일까요? 그렇지 않습니다. innerHTML은 템플릿 리터럴과 조합해 복잡한 HTML 구조도 동적으로 손쉽게 생성할 수 있다는 장점이 있습니다. 단, 자바스크립트를 작동시킬 수 있는 가능성이 있으니 나쁜 의도를 가진 사용자가 코드를 입력 할 수 없도록 사용자의 입력 값을 innerHTML을 통해 할당 받는 일만 없도록 하면 안전하게 사용할 수 있습니다. 대신 innerText 혹은 textContent 속성을 이용합시다.

** innerText 와 textContent의 차이 : https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText#예제

🤔 innerText 더 생각해보기 innerText 속성은 요소의 **렌더링된** 텍스트 콘텐츠를 나타낸다고 합니다. 표현이 애매한데요, mdn 에 따르면 innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공한다고 합니다. 이 말은 즉, 예를 들어서 네이버 메인페이지의 특정 텍스트를 복사에서 메모장에 붙여넣기한다고 가정했을때, 텍스트의 줄 바꿈같은 것은 가져오지만 폰트의 굶기나 색상까지 가져오지 않는 것과 같다고 할 수 있겠습니다.

따라서 innerText는 display:none으로 인해 제거되는 텍스트, br 태그를 통해 줄 바꿈되는 텍스트의 '형태' 는 인식하지만 color 나 굵기, 사이즈 등 과 같은 정보는 인식하지 못한다고 볼 수 있습니다.

4. 속성 제어하기

자바스크립트를 사용하여 요소의 속성을 제어하는 방법은 다양합니다. 몇 가지 방법을 알아보겠습니다.

5. 요소의 스타일을 제어하는 style 객체

요소는 그 안에 CSSStyleDeclaration 객체라 불리는 style 객체가 존재합니다. 이 객체는 요소의 스타일 정보를 가지고 있으며, 스타일과 관련한 프로퍼티와 메소드를 지원합니다.

const target = document.querySelector("p");
const txtColor = target.style.color; // 현재 스타일 정보를 가져옵니다.
target.style.color = "red"; // 현재 스타일 정보를 변경합니다.
target.style.fontWeight = "bold"; // 현재 스타일 정보에 font-weight 속성이 없다면 추가합니다.
target.style.color = null; // 현재 스타일 정보를 제거(초기화)합니다.

🤔 **style 객체의 속성 식별자 규칙**

• 속성 이름이 한 글자라면 그대로 사용합니다. (height, color …)
• 속성 이름이 대쉬(-) 를 통해 여러 단어로 나눠져있는 경우는 카멜케이스로 사용합니다. (background-image ⇒  backgroundImage)
• float 속성의 경우 이미 자바스크립트의 예약어로 존재하기 때문에 cssFloat으로 사용됩니다.

style 객체를 통해 설정된 스타일은 CSS inline 스타일과 동일한 가중치를 가집니다. 때문에 CSS를 통해 수정의 여지가 있는 스타일에는 많이 사용되지 않는 편입니다. 이럴경우 classList를 이용한 클래스 제어가 더 효과적입니다.

1. 속성에 접근하고 수정할 수 있는 Attribute 메소드

   1. getAttribute 메소드는 요소의 특정 속성 값에 접근할 수 있도록 합니다.
   2. setAttribute 메소드는 요소의 특정 속성 값에 접근하여 값을 수정합니다.

   
   <p id='myTxt'>hello lions</p>
   <img src='https://static.ebs.co.kr/images/public/lectures/2014/06/19/10/bhpImg/44deb98d-1c50-4073-9bd7-2c2c28d65f9e.jpg'>
   <script>
   	const target = document.querySelector('p');
   	const myimg = document.querySelector('img');
   	const idAttr = target.getAttribute('id');
   	console.log(idAttr);
   	myimg.setAttribute("src", "https://img.wendybook.com/image_detail/img159/159599_01.jpg");
   </script>

1. 요소에 데이터를 저장하도록 도와주는 data 속성

   data-* 속성을 사용하면 HTML 요소에 추가적인 정보를 저장하여 마치 프로그램 가능한 객체처럼 사용할 수 있게 합니다. 단, data 속성의 이름에는 콜론(:) 이나 영문 대문자가 들어가서는 안됩니다.

   <img
       class="terran battle-cruiser"
       src="battle-cruiser.png"
       data-ship-id="324"
       data-weapons="laser"
       data-health="400"
       data-mana="250"
       data-skill="yamato-cannon"
   />
   <script>
       const img = document.querySelector('img')
       console.log(img.dataset);
       console.log(img.dataset.shipId);
   </script>

1. 더 인접한곳(Adjacent)으로 정밀하게 배치하기

insertAdjacentHTML : 요소 노드를 대상의 인접한 주변에 배치합니다.

<strong class="sayHi">
    반갑습니다.
</strong>

const sayHi = document.querySelector('.sayHi');
sayHi.insertAdjacentHTML('beforebegin', '<span>안녕하세요 저는</span>');
sayHi.insertAdjacentHTML('afterbegin', '<span>재현입니다</span>');
sayHi.insertAdjacentHTML('beforeend', '<span>면접오시면</span>');
sayHi.insertAdjacentHTML('afterend', '<span>치킨사드릴게요</span>');

여기서 begin 이란 여는 태그를, end 란 닫는 태그를 의미합니다.

1. DOM 안에서 노드 탐색하기

<!-- 주석입니다 주석. -->
<article class="cont">
    <h1>안녕하세요 저는 이런 사람입니다.</h1>
    <p>지금부터 자기소개 올리겠습니다</p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt incidunt voluptates laudantium fugit, omnis
    dolore itaque esse exercitationem quam culpa praesentium, quisquam repudiandae aut. Molestias qui quas ea iure
    officiis.
    <strong>감사합니다!</strong>
</article>

const cont = document.querySelector(".cont");
console.log(cont.firstElementChild);  // 첫번째 자식을 찾습니다.
console.log(cont.lastElementChild);   // 마지막 자식을 찾습니다.
console.log(cont.nextElementSibling); // 다음 형제요소를 찾습니다.
console.log(cont.previousSibling);    // 이전 형제노드를 찾습니다.
console.log(cont.children);           // 모든 자식요소를 찾습니다.
console.log(cont.childNodes);         // 모든 자식노드를 찾습니다.
console.log(cont.parentElement);      // 부모 요소를 찾습니다.
// 자기 자신부터 시작해 부모로 타고 올라가며 가장 가까운 cont 클래스 요소를 찾습니다. 단, 형제요소는 찾지 않습니다.
console.log(cont.querySelector('strong').closest('.cont').innerHTML);  

이벤트 객체

이벤트에서 호출되는 핸들러에는 이벤트와 관련된 모든 정보를 가지고 있는 매개변수가 전송됩니다. 이것이 바로 이벤트 객체입니다!

<article class="parent">
    <ol>
        <li><button class="btn-first" type="button">버튼1</button></li>
        <li><button type="button">버튼2</button></li>
        <li><button type="button">버튼3</button></li>
    </ol>
</article>

const btnFirst = document.querySelector('.btn-first');
btnFirst.addEventListener('click', (***event***) => {
    console.log(event);
});

이벤트 흐름

브라우저 화면에서 이벤트가 발생하면 브라우저는 가장 먼저 이벤트 대상을 찾기 시작합니다.

브라우저가 이벤트 대상을 찾아갈 때는 가장 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려갑니다. 이를 캡처링 단계라고 합니다.

이때 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 만나는 모든 캡처링 이벤트 리스너를 실행시킵니다. 그리고 이벤트 대상을 찾고 캡처링이 끝나면 이제 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행합니다. 이를 이벤트 버블링 단계라고 합니다.

그리고 이러한 과정에서 이벤트 리스너가 차례로 실행되는것을 이벤트 전파(event propagation)라고 합니다.

<!DOCTYPE html>
<html lang="ko">

<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>
    <link rel="stylesheet" href="../reset.css">
    <style>
    </style>
</head>

<body>
    <article class="parent">
        <button class="btn" type="button">버튼</button>
    </article>

    <script>
        const parent = document.querySelector('.parent');
        const btnFirst = document.querySelector('.btn');
        btnFirst.addEventListener('click', (event) => {
            console.log("btn capture!");
        })

        window.addEventListener('click', () => {
            console.log("window capture!");
        }, true); // true : 캡처링 단계의 이벤트가 발생하도록 합니다.

        document.addEventListener('click', () => {
            console.log("document capture!");
        }, true);

        parent.addEventListener('click', () => {
            console.log("parent capture!");
        }, true);

        btnFirst.addEventListener('click', (event) => {
            console.log("btn bubble!");
        })

        parent.addEventListener('click', () => {
            console.log("parent bubble!");
        });

        document.addEventListener('click', () => {
            console.log("document bubble!");
        });

        window.addEventListener('click', () => {
            console.log("window bubble!");
        });
    </script>
</body>

</html>

이벤트 target, currentTarget

부모부터 자식까지 일련의 요소를 모두 타고가며 진행되는 이러한 이벤트의 특징 덕분에 이벤트 객체에는 target, currentTarget 이라는 속성이 존재합니다.

target 속성에는 이벤트가 발생한 진원지의 정보가 담겨 있습니다. target 속성을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있습니다.

currentTarget 속성에는 이벤트 리스너가 연결된 요소가 참조되어 있습니다.

<article class="parent">
    <ol>
        <li><button class="btn-first" type="button">버튼1</button></li>
        <li><button type="button">버튼2</button></li>
        <li><button type="button">버튼3</button></li>
    </ol>
</article>

<script>
    const parent = document.querySelector('.parent');
    parent.addEventListener('click', function (event) {
        console.log(event.target);
        console.log(event.currentTarget);
    })
</script>

이벤트 위임

앞에서 우리는 이벤트의 흐름을 통해 이벤트 리스너가 없는 요소의 이벤트가 발생했을 때도 해당 요소에 접근 할 수 있다는 것을 알게 되었습니다.

이를 이용해 이벤트 리스너가 없어도 마치 리스너가 있는 것 처럼 사용 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<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>
    <link rel="stylesheet" href="../reset.css">
    <style>
    </style>
</head>

<body>
    <article class="parent">
        <ol>
            <li><button class="btn-first" type="button">버튼1</button></li>
            <li><button type="button">버튼2</button></li>
            <li><button type="button">버튼3</button></li>
        </ol>
    </article>

    <script>
        const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event) {
            console.log(event.target);
            if (event.target.nodeName === "BUTTON") {
                event.target.textContent = "버튼4";
            }
        })
    </script>
</body>

</html>

이러한 테크닉을 이벤트 위임이라고 합니다.

이벤트의 this

이벤트 리스너 함수 내부에서의 this 값은 이벤트가 연결된 노드를 참조합니다.

<article class="parent">
    <ol>
        <li><button class="btn-first" type="button">버튼1</button></li>
        <li><button type="button">버튼2</button></li>
        <li><button type="button">버튼3</button></li>
    </ol>
</article>

<script>
    const parent = document.querySelector('.parent');
    parent.addEventListener('click', function (event) {
        console.log(this);
    });

		const myObj = {
        name: 'jaehyun',
        walk() {
            parent.addEventListener('click', () => {
                console.log(this.name + ' is walking');
            })
        }
    }
</script>

이는 event.currentTarget 속성의 참조값과 유사합니다.

만약 이벤트 리스너 함수를 화살표 함수로 쓴다면 this 가 가리키는 대상이 달라진다는 점에 유의하세요.

preventDefault()

브라우저의 기본 이벤트 동작을 취소합니다.

브라우저는 HTML 태그를 통해 여러가지 기능들을 제공합니다. 하지만 때때로 그러한 기능이 방해가 되는 경우가 있습니다.

<!-- 앵커의 기본 동작을 중지 -->
<a href="https://www.naver.com" class="link">네이버 링크입니다만..</a>
<script>
    const link = document.querySelector('.link');
    link.addEventListener('click', (event) => {
        console.log('clicked');
        event.preventDefault();
    })
</script>

<!-- submit 의 기본 동작을 중지 -->
<form action="">
    <button type="submit" class="submit">제출</button>
</form>
<script>
    const submit = document.querySelector('.submit');
    submit.addEventListener('click', (event) => {
        console.log('clicked');
        event.preventDefault();
    })
</script>

이렇듯 종종 브라우저의 기본 동작을 중지하고 자바스크립트를 통해 기능을 처리하고자 할때 사용합니다.

preventDefault 실습

이벤트 타입 contextmenu를 이용해 브라우저 오른쪽 버튼 이벤트 막고 '해당 페이지에서는 오른쪽 클릭을 제한합니다.’ 경고 띄우기

stopPropagation()

앞에서 우리는 preventDefault를 통해 브라우저의 기본 이벤트 동작을 취소해봤습니다. 하지만 이때 우리가 앞에서 배웠던 이벤트 흐름, 즉 이벤트 전파(이벤트 프로파게이션)를 막지는 못합니다.

<form action="">
	<button type="submit" class="submit">제출</button>
</form>

<script>
	const submit = document.querySelector('.submit');
	submit.addEventListener('click', (event) => {
	    console.log('clicked');
	    event.preventDefault();
			// event.stopPropagation();
	});
	
	document.body.addEventListener('click', () => {
	    console.log('event still alive!');
	});
</script>

이때 만약 이벤트 전파를 막고 싶다면 event.stopPropagation() 코드를 추가합니다.

stopPropagation() 실습

<h1>나의 todo list</h1>
<p>1. 오늘 저녁에는 부대찌게를 끓여 먹겠다.<button type="button">삭제</button></p>
<p>2. 후식으로 슈팅스타를 먹겠다.<button type="button">삭제</button></p>
<p>3. 자기 전에 반드시 내일 아침 메뉴를 생각해두겠다.<button type="button">삭제</button></p>

위와 같은 HTML코드 구조가 있을 때

1. P 태그를 클릭하면 p 태그의 컨텐츠를 출력하는 alert 창을 띄워주고
2. 삭제 버튼을 클릭하면 삭제할 것인지를 물어보는 confirm 창을 띄워주고, 확인을 누르면 P태그를 삭제합니다.