[모던 자바스크립트 Deep Dive] - 39~40장

이 글은 책 모던 자바스크립트 39장 ~ 40장을 읽고 정리한 글입니다.

39장 - DOM

DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.

노드

HTML 요소와 노드 객체

HTML요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.

HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환되는데, HTML요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텍츠는 텍스트 노드로 변환된다.

HTML문서는 HTML 요소들의 집합으로 이루어지고 중첩관계를 갖는데, 이로 인해 계층적인 부자관계가 형성 된다. 이를 반영하여 HTML요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성한다.

트리 자료구조
노드들의 계층 구조로 이루어지며 하나의 최상위 노드(루트 노드)에서 시작한다. 자식 노드가 없는 노드를 리프 노드라고 한다.

노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. DOM을 DOM 트리라고 부르기도 함.

노드 객체의 타입

• 문서 노드: DOM 트리 최상위에 존재하는 루트 노드로서 document 객체를 가리킨다. window.document로도 참조할 수 있으며 HTML문서당 하나인 유일한 객체이다.

• 요소 노드: HTML 요소를 가리키는 객체이며 중첩에 의해 부자 관계를 가지고, 문서의 구조를 표현한다.

• 어트리뷰트 노드: HTML 요소의 어트리뷰트를 가리키는 객체로 어트리뷰트가 지정된 요소 노드와 연결되어 있다. (부모노드와 연결되어 있지 않고 요소 노드에만 연결이 되어 있으며, 어트리뷰트를 참조하거나 변경하려면 먼저 요소 노드에 접근해야 한다.)

• 텍스트 노드: HTML 요소의 텍스트를 가리키는 객체이다. 문서의 정보를 표현하며, 요소 노드의 자식 노드이면서 리프 노드이다.

노드 객체의 상속 구조

Object -> EventTarget -> Node 순서가 노드 객체의 상속 구조이며 노드에서 문서 노드(Document, HTML Document 인터페이스 상속), 요소 노드(Element, HTMLElement 인터페이스 상속), 어트리뷰트 노드(Attr 인터페이스 상속), 텍스트노드(CharacterData 인터페이스 상속)등으로 나뉜다.

예시를 들어 input과 같은 요소 노드는 다음과 같은 구조로 되어있다.

Object -> EventTarget -> Node -> Element -> HTMLElement -> HTMLInputElement

프로토타입 또한 마찬가지 위 순서대로 구성되어 있고, input 요소 노드 객체가 프로토타입 체인의 가장 아래에 존재.
따라서 프로토타입 체인안에 있는 모든 프로토타입의 프로퍼티나 메서드를 상속받아 사용할 수 있다.

input 요소 노드 객체의 특성	프로토타입을 제공하는 객체
객체	Object
이벤트를 발생시키는 객체	EventTarget
트리 자료구조의 노드 객체	Node
브라우저가 렌더링할 수 있는 웹 문서의 요소를 표현하는 객체	Element
웹 문서의 요소 중에 HTML 요소를 표현하는 객체	HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체	HTMLInputElement

각 객체마다 관련 기능을 제공하는 인터페이스가 존재하며 (Node, HTMLElement 등등...) 공통된 기능일 수록 프로토타입 체인의 상위에, 개별적인 고유 기능일수록 프로토타입 체인의 하위에 프로토타입 체인을 구추갛여 노드 객체에 필요한 기능, 프로퍼티와 메서드를 제공하는 상속 구조를 갖는다.

DOM은 HTML 문서의 계층적 구조와 정보를 표현하는 것은 물론 노드 객체의 종류, 즉 노드 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있다.

요소 노드 취득

HTML의 구조나 내용 또는 스타일을 동적으로 조작하려면 먼저 요소 노드를 취득해야한다. --> 요소 노드의 취득이 HTML 요소를 조작하는 시작점이다. 이를위해 DOM은 요소 노드를 취득할 수 있는 다양한 메서드를 제공한다.

id를 이용한 요소 노드 취득

Document.prototype.getElementById 메서드 사용

const $elem = document.getElementById('id');

id는 HTML 문서 내에서 유일한 값이어야 하지만 중복되는 id값이 있는 경우, getElementById 메서드는 인수로 전달된 id 값을 갖는 첫 번째 요소 노드만 반환한다.
존재하지 않는 경우 null 반환.

HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당되는 부수효과가 있다.

...
<div id = "foo"></div>
...

// id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 해당 노드 객체가 할당됨.
console.log(foo === document.getElementById('foo')); // true

// 암묵적 전역으로 생성된 전역 프로퍼티는 삭제되지만 전역 변수는 삭제 불가
delete foo;
console.log(foo); // <div id = "foo"></div>

단 id 값과 동일한 이름의 전역 변수가 이미 선언되어 있으면, 이 전역 변수에 노드 객체가 재할당되지 않는다.

태그 이름을 이용한 요소 노드 취득

Document.prototype/Element.prototype.getElementsByTagName 메서드를 사용

복수형이므로 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다. 이 객체는 유사 배열 객체이면서 이터러블이다.

모든 요소 노드 취득

const $all = document.getElementsByTagName('*');

위에서 말한 것처럼 getElementsByTagName 메서드는 2가지로 나뉜다.

• Document.prototype.getElementsByTagName
• Element.prototype.getElementsByTagName

이 둘의 차이는 DOM 전체에서 요소 노드를 탐색하여 반환하느냐,
특정 요소 노드의 자손 중에서 요소 노드를 탐색하여 반환하느냐의 차이이다.

// DOM 전체에서 탐색
const $lisFromDocument = documents.getElementsByTagName('li');

// 특정 요소 노드 자손 중에서 요소 노드 탐색
const $fruits = documnet.getElementById('fruits');
const $lisFromFruits = $fruits.getElementsByTagName('li');

인수로 전달된 태그 이름을 갖는 요소가 존재하지 않는 경우, 빈 HTMLCollection 객체를 반환

class를 이용한 요소 노드 취득

Document.prototype/Element.prototype.getElementsByClassName 메서드를 사용

--> getElementsByTagName 메서드와 마찬가지로 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection 객체를 반환한다.

만약 인수로 전달된 class 값을 갖는 요소가 존재하지 않는 경우 빈 HTMLCollection 객체를 반환한다.

CSS 선택자를 이용한 요소 노드 취득

Document.prototype/Element.prototype.querySelector 메서드

• 인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 여러 개인 경우 첫 번째 요소 노드만 반환
• 인수로 전달된 CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우 null을 반환
• 인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러가 발생

Document.prototype/Element.prototype.querySelectorAll 메서드 --> 여러 개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 NodeList 객체를 반환하는데 이는 유사 배열 객체이면서 이터러블이다.

• 인수로 전달된 CSS 선택자를 만족시키는 요소가 존재하지 않는 경우 빈 NodeList 객체를 반환한다.
• 인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러가 발생한다.

문서의 모든 요소 취득

const $all = document.querySelectorAll('*');

CSS 선택자 문법을 사용하는 querySelector, querySelectorAll 메서드는 getElementById, getElementBy*** 메서드 보다 다소 느리지만 좀 더 구체적인 조건과 일관된 방식으로 요소를 취득할 수 있다는 장점이 있다.
따라서 id의 경우 getElementById 메서드를 사용하고 그 외의 경우 querySelector, querySelectorAll 메서드 사용을 권장한다.

특정 요소 노드를 취득할 수 있는지 확인

Element.prototype.matches 메서드를 사용

// apple이 ul id='fruits' 안의 li class='apple'이라고 가정
const $apple = document.querySelector('.apple');

console.log($apple.matches('#fruits > li.apple')); //true
console.log($apple.matches('#fruits > li.banana')); // false

HTMLCollection과 NodeList

DOM API가 여러 개의 결과 값을 반환하기 위한 DOM 컬렉션 객체다.

둘다 유사 배열 객체이면서 이터러블이다. 중요한 특징은 노드 객체의 상태 변화를 실시간으로 반영하는 살아있는 객체다. NodeList의 대부분은 과거의 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작할 때가 있다.

HTMLCollection

getElementsByTagName/ByClassName 메서드가 반환하는 HTMLCollection 객체는 노드의 상태 변화를 실시간으로 반영하는 살아있는 DOM 컬렉션 객체다.

const $elem = document.getElementsByClassName('red');

console.log($elems); // HTMLCollection(3) [li.red, li.red, li.red]

// HTMLCollection 객체의 모든 요소의 class 값을 'blue'로 변경한다.
for(let i = 0; i<$elems.length; i++) {
  $elems[i].className = 'blue';
}

console.log($elmes); // HTMLCollection(1) [li.red]

모든 요소가 blue 클래스로 변경될 것이라고 예상했지만 2번째 li 요소는 그렇지 않았다. 그 이유는 첫 번째 반복 때, elems[0]이 blue로 변경되면서 HTMLCollection 객체에서 제외되고, i 가 1이되면서 그 다음 요소는 3번째 요소를 가리키기 때문이다.

이 문제 해결법

• for문 역방향
• 객체가 남아있지 않을 때까지 while사용하여 무한 반복
• HTMLCollection 객체를 사용하지 않고 [...$elems]와 같이 배열로 변환해서 사용

NodeList

HTMLCollection 객체의 부작용을 해결하기 위해 querySelectorAll 메서드를 사용하여 NodeList 객체를 반환하게 만듦 --> 실시간으로 노드 객체의 상태를 반영하지는 않는다.

이 NodeList 객체는 NodeList.prototype.forEach 메서드를 상속받아 사용할 수 있다. 대부분의 이 객체는 non-live이지만, childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작하므로 주의가 필요하다.

const $fruits = document.getElementById('fruits');

// fruits라는 id를 가진 ul요소 아래의 모든 li요소들은 childNodes 이다.
// 이 노드객체는 live 객체로 동작!
const {childNodes} = $fruits;

노드 객체의 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection이나 NodeList 객체를 배열로 변환하여 사용하는 것을 권장한다.

노드 탐색

Node.prototype은 parentNode, previousSibling, firstChild, childNodes 프로퍼티를 제공한다.

Element.rptotoype은 previousElementSibling, nextElementSibling, children 프로퍼티를 제공한다.

노드 탐색 프로퍼티의 경우 모두 접근자 프로퍼티 이며, setter없이 getter만 존재한다.

공백 텍스트 노드

html 요소 사이의 스페이스, 탭, 줄바꿈 등의 공백 문자는 텍스트 노드를 생성하는데 이를 공백 텍스트 노드라고 한다.

자식 노드 탐색

Node.prototype -> childNodes, firstChild, lastChild가 있으며 이 프로퍼티가 반환한 NodeList에는 요소노드뿐만 아니라 텍스트 노드도 포함되어 있을 수 있다. (공백 텍스트 노드 등등..)

Element.prototype -> children, firstElementChild, lastElementChild는 프로퍼티가 반환한 HTMLCollection에는 텍스트 노드가 포함되지 않는다.

자식 노드 존재확인

Node.prototype.hasChildNodes 메서드 이용.

존재하면 true, 아니면 false를 반환한다.

자식 노드 중에 텍스트 노드가 아닌 노드가 있는지 확인하기 위해서는
children.length or Element 인터페이스의 childElementCount 프로퍼티를 사용한다.

요소 노드의 텍스트 노드 탐색

요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근할 수 있다. (첫 번째 자식 노드 반환)

firstChild 프로퍼티가 반환한 노드는 텍스트 노드이거나 요소 노드이다.

부모 노드 탐색

Node.prototype.parentNode 프로퍼티를 사용한다.

텍스트 노드는 DOM 트리의 최종단노드인 리프 노드이므로 부모노드가 텍스트 노드인 경우 X

형제 노드 탐색

어트리뷰트 노드의 경우 요소 노드와 연결되어 있지만 부모 노드가 같지 않기 때문에 반환되지 않는다.

오로지 텍스트 노드와 요소 노드만 반환한다.

Node.prototype --> previousSibling, nextSibling (요소 or 텍스트 노드)

Element.prototype --> previousElementSibling, nextElementSibling (요소 노드만)

노드 정보 취득

Node.prototype.nodeType

노드 객체의 종류, 노드 타입을 나타내는 상수를 반환한다.

• Node.ElEMENT_NODE: 요소 노드 타입을 나타내는 상수 1 반환
• Node.TEXT_NODE: 텍스트 노드 타입을 나타내는 상수 3을 반환
• Node.DOCUMENT_NODE: 문서 노드 타입을 나타내는 상수 9를 반환

Node.prototype.nodename

노드의 이름을 문자열로 반환한다.

• 요소 노드: 대문자 문자열 태그 이름("UL", "LI"등)을 반환
• 텍스트 노드: 문자열 "#text"를 반환
• 문서 노드: 문자열 "#document"를 반환

요소 노드의 텍스트 조작

nodeValue

Node.prototype.nodeValue 프로퍼티는 setter와 getter 모두 존재하는 접근자 프로퍼티이다. --> 참조와 할당이 가능

nodeValue는 노드 객체의 값을 반환하는데 이 값이란 텍스트 노드의 텍스트를 의미하며, 문서 노드나 요소 노드의 nodeValue로 참조 시 null을 반환한다.

요소 노드의 텍스트를 변경하기 위해선 다음의 순서를 따른다.

1. 텍스트 변경할 요소 노드 취득 후 firstChild 프로퍼티를 사용하여 탐색

2. 탐색한 텍스트 노드의 nodeValue 프로퍼티를 사용하여 텍스트 노드의 값을 변경

textContent

Node.prototype.textContent 프로퍼티는 setter, getter 모두 존재하는 접근자 프로퍼티. -> 요소 노드의 텍스트와 모든 자손 노드의 텍스트를 모두 취득하거나 변경

요소 노드의 콘텐츠 영역(시작 태그와 종료 태그 사이)내의 텍스트를 모두 반환하며, HTML 마크업은 무시한다.

어떤 요소 안에 자식 요소 노드가 많다 --> textContent 사용이 더 좋음

텍스트만 존재한다면 firstChild.nodeValue와 textContent 프로퍼티는 같은 결과를 반환한다.

textContent를 사용하여 문자열을 할당한다면, 모든 자식 노드가 제거 되고 HTML 마크업이 포함되어 있더라도 문자열 그대로 인식하기 때문에 마크업이 파싱되지 않는다.

textContent와 비슷한 프로퍼티인 innerText가 존재하는 데 다음의 이유로 사용하지 않는 것이 좋다.

• CSS에 순종적이어서 CSS에 의해 비표시로 자정된 요소 노드의 텍스트를 반환하지 않는다.
• CSS를 고려해야 하므로 textContent 프로퍼티보다 느리다.

DOM 조작

DOM 조작은 리플로우와 리페인트를 발생하는 원인이 되므로 성능 최적화를 위해 주의해서 다루어야 한다.

innerHTML

Element.prototype.innerHTML 프로퍼티

innerHTML로 참조 시, 모든 HTML 마크업을 문자열로 반환하여 참조한다.

innerHTML로 문자열을 할당하면 모든 자식 노드가 제거 되고, 할당한 문자열에 포함되어 있는 HTML 마크업이 파싱되어 요소 노드의 자식 노드로 DOM에 반영된다.

이 innerHTML로 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하게 되면 크로스 사이트 스크립팅 공격에 취약

HTML5는 프로퍼티로 삽입된 script 요소 내의 JS 코드를 실행하지 않는다.

HTML 새니티제이션
사용자로 부터 입력 받은 데이터에 의해 발생할 수 있는 크로스 사이트 스크립팅 공격을 예방하기 위해 잠재적 위험을 제거하는 기능

innerHTML의 또 다른 단점으로 새로운 요소를 추가 시, 기존 노드까지 제거한 후 처음부터 새롭게 노드를 생성하여 DOM에 반영하여 효율적이지 않다는 점이다.

또한 삽입될 위치를 지정할 수 없다는 단점도 존재한다.

insertAdjacentHTML 메서드

Element.prototype.insertAdjacentHTML(position, DOMString) 메서드 기존 요소를 제거하지 않으면서 위치를 지정해 새로운 요소를 삽입한다.

두 번째 인수로 전달한 HTML 마크업 문자열을 파싱하여 그 결과를 위치를 고려해 DOM에 반영한다.

인수는 beforebegin, afterbegin, beforeend, afterend로 4가지가 있다.

innerHTML 프로퍼티보다 효율적이고 빠르지만 HTML 마크업 문자열을 파싱하므로 크로스 사이트 스크립팅 공격에 취약하다.

노드 생성과 추가

1. 요소 노드 생성
   Document.prototype.createElement(tagName) 메서드는 요소 노드를 생성하여 반환한다.

const $li = document.createElement('li');

console.log($li.childNodes); //  NodeList []

2. 텍스트 노드 생성

const textNode = document.createTextNode('Banana');

3. 텍스트 노드를 요소 노드의 자식 노드로 추가

li.appendChild(textNode);

// 텍스트 노드를 생성하여 요소 노드의 자식 노드로 추가
li.appendChild(document.createTextNode('Banana'));

// $li 요소 노드에 자식 노드가 하나도 없는 위 코드와 동일하게 동작한다.
li.textContent = 'Banana';

자식 노드가 하나도 없는 경우 윗 방법보다 textContent 프로퍼티 사용이 더 간편하게 만들 수 있다.

4. 요소 노드를 DOM에 추가

$fruits.appendChild($li);

DOM에 한번 추가하므로 DOM은 한 번 변경된다. --> 리플로우와 리페인트가 실행된다.

복수의 노드 생성과 추가

따로따로 노드를 생성해서 추가하는 경우 DOM이 그때마다 변경되어 리플로우와 리페인트가 실행된다. --> 비효율적

컨테이너를 사용하면 1번만 리플로우와 리페인트가 실행되지만 원치않는 요소가 들어가기 때문에 바람직하지 않다.

DocumentFragment 노드를 통해 해결!
--> 리플로우와 리페인트 한 번만 실행

const $fragmnet = document.createDocumentFragment();

...


$fragment.appendChild(만든요소);


$fruits.appendChild($fragment);

노드 삽입

마지막 노드로 추가

Node.prototype.appendChild 메서드를 사용

지정한 위치에 삽입

Node.prototype.insertBefore(newNode, childNode) 메서드를 이용하여 첫 번째 인수로 전달받은 노드를 두 번째 인수로 전달받은 노드 앞에 삽입한다.

두 번째 인수로 전달받은 노드는 insertBefore를 호출한 노드의 자식이어야 한다. 그렇지 않은경우 DOMException 에러가 발생한다.

두 번째 인수가 null 이면 appendChild 메서드처럼 동작하여 마지막에 추가된다.

노드 이동

이미 존재하는 노드를 appendChild 또는 insertBefore 메서드를 사용하여 DOM에 다시 추가 시, 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가한다. --> 노드 이동

노드 복사

Node.prototype.cloneNode([deep: true | false]) 메서드는 노드의 사본을 생성하여 반환한다.

true --> 모든 자손 노드가 포함된 사본 생성(깊은 복사)
false --> 노드 자신만의 사본 생성(얕은 복사)

얕은 복사로 생성된 요소 노드는 자손 노드를 복사하지 않으므로 텍스트 노드가 없다.

노드 교체

Node.prototype.replaceChild(newChild, oldChild) 메서드를 사용한다.

노드 삭제

Node.prototype.removeChild(Child) 메서드를 사용한다.

인수로 전달한 노드는 removeChild 메서드를 호출한 노드의 자식 노드이어야 한다.

어트리뷰트

어트리뷰트 노드와 attributes 프로퍼티

어트리뷰트 이름 = '어트리뷰트 값' 형식으로 정의한다.

input 요소에만 사용 가능한 어트리뷰트 --> type, value, checked

HTML 문서가 파싱될 때 HTML 요소의 어트리뷰트가 어트리뷰트 노드로 변환되어 요소 노드와 연결되며, 어트리뷰트당 하나의 어트리뷰트 노드가 생성된다.

모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap 객체에 담겨서 요소 노드의 attributes 프로퍼티에 저장된다.

따라서 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득할 수 있다.

attributes 프로퍼티는 getter만 존재하는 접근자 프로퍼티이며 요소 노드의 모든 어트리뷰트 노드의 참조가 담긴 NamedNodeMap 객체를 반환한다.

HTML 어트리뷰트 조작

Element.prototype.getAttribute/setAttribute 메서드를 사용하여 요소 노드에서 메서드를 통해 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있다.

어트리뷰트가 존재하는 지 확인 --> Element.prototype.hasAttribute(attributeName)

특정 HTML 어트리뷰트 삭제 --> Element.prototype.removeAttribute(attributeName)

HTML 어트리뷰트 vs. DOM 프로퍼티

DOM 프로퍼티들은 HTML 어트리뷰트 값을 초기값으로 가지고 있는데 DOM 프로퍼티는 setter와 getter 모두 존재하는 프로퍼티이기 때문에 참조와 변경이 가능하다.

HTML 어트리뷰트의 역할을 HTML 요소의 초기 상태를 지정하는 것이다. 즉, HTML 어트리뷰트 값은 HTML 요소의 초기 상태를 의미하며 이는 변하지 않는다.

요소 노드는 상태를 가지고 있고 예를들어 Input 요소에 사용자가 값을 입력하면 처음 지정한 초기 상태와 최신 상태로 나누어져서 관리 된다.

즉, 요소 노드는 2개의 상태, 초기 상태와 최신 상태를 관리하며, 초기 상태는 어트리뷰트 노드가, 요소 노드의 최신 상태는 DOM 프로퍼티가 관리한다.

어트리뷰트 노드

--> HTML 어트리뷰트로 지정한 HTML 요소의 초기 상태는 어트리뷰트 노드에서 관리한다.

getAttribute 메서드로 취득한 값은 어트리뷰트 노드에서 관리하는 HTML 요소에 지정한 어트리뷰트 값, 즉 초기 상태의 값이다!(사용자에 의해 값이 변하지 않으므로 결과는 언제나 동일!)

DOM 프로퍼티

사용자가 입력한 최신 상태는 HTML 어트리뷰트에 대응하는 요소 노드의 DOM 프로퍼티가 관리한다. --> 사용자 입력에 의한 상태 변화에 반응하여 언제나 최신상태 유지

HTML 어트리뷰트는 초기값, DOM 프로퍼티는 최신 상태를 관리하지만 사용자 입력에 의한 상태 변화와 관련이 없는 id 어트리뷰트와 id 프로퍼티는 항상 동일한 값을 유지한다. --> id 프로퍼티와 id 어트리뷰트는 항상 동일한 값으로 연동되기 때문에 어느 한쪽이 바귀면 그 바뀐 값으로 다른 한쪽도 바뀌게 된다.

• HTML 어트리뷰트 DOM 프로퍼티의 대응 관계: 대부분의 HTML 어트리뷰트는 이름이 동일한 DOM 프로퍼티와 1:1로 대응한다.

• DOM 프로퍼티 값의 타입: getAttribute 메서드로 취득한 값은 언제나 문자열이지만 DOM 프로퍼티로 취득한 값은 문자열이 아닐수도 있음(checkbox의 checked 어트리뷰트 값)

data 어트리뷰트와 dataset 프로퍼티

data 어트리뷰트와 dataset 프로퍼티를 사용하여 사용자 정의 어트리뷰트와 JS 간에 데이터 교환이 가능하다.

data- 접두사 다음에 임의이 이름을 붙여 사용하는데 그 값은 HTMLElement.dataset 프로퍼티로 취득이 가능하다.
--> DOMStringMap 객체 반환

이 객체는 data 어트리뷰트의 data- 뒤의 이름을 카멜 케이스로 변환한 프로퍼티를 가지고 있다.

data 접두사 다음에 존재하지 않는 이름을 키로 사용하여 dataset 프로퍼티에 값을 할당시, HTML 요소에 data 어트리뷰트가 추가된다. 카멜케이스 --> 케밥케이스로 자동 변경되어 추가!

스타일

인라인 스타일 조작

HTMLElement.prototype.style 프로퍼티로 인라인 스타일을 취득하거나 추가 또는 변경할 수 있다.

프로토타입 참조 document.querySelector('div').style

--> CSSStyleDeclaration 타입의 객체를 반환하는데 이 객체의 프로퍼티는 카멜케이스(backgroundColor, 원래 css는 케밥케이스)를 따르고 값 할당 시 css 프로퍼티가 인라인 스타일로 HTML 요소에 추가되거나 변경됨

단위 지정이 필요한 CSS 프로퍼티 값은 반드시 단위 지정이 필요하다.

클래스 조작

class 어트리뷰트에 대응하는 DOM 프로퍼티 --> className, classList

• className
  참조 시, 값을 문자열로 반환, 할당하면 class 어트리뷰트 값을 할당한 문자열로 변경 --> 문자열을 반환하여 공백으로 구분된 여러 개의 클래스 반환하는 경우 다루기가 불편하다.

• classList
  DOMTokenList 객체를 반환한다.(유사배열 객체이면서 이터러블)
  다양한 메서드를 제공 add, remove, item(index), contains, replace, toggle(className[,force]), forEach, entries, keys, values, supports 등등..

요소에 적용되어 있는 CSS 참조

style 프로퍼티는 인라인만, getComputedStyle(element[, pseudo]) 메서드는 첫 번째 인수로 전달한 요소 노드에 적용되어 있는 평가된 스타일을 CSSStyleDeclaration 객체에 담아 반환

평가된 스타일: 링크 스타일, 임베딩 스타일, 인라인 스타일, JS에서 적용한 스타일, 상속된 스타일, 기본 스타일 등 모든 스타일이 조합되어 최종적으로 적용된 스타일

2번째 인수로 :after, :before와 같은 의사 요소를 지정하는 문자열 전달 가능 --> 의사 요소인 경우에만 사용하며 일반 요소인 경우 2번째 인수는 생략한다.

DOM 표준

원래는 W3C, WHATWG 단체가 공통된 표준을 만들었지만 서로 다른 결과물을 내놓기 시작하여 2018년 4월 부터 구글, 애플, MS, 모질라로 구성된 4개의 주류 브라우저 벤더사가 주도하는 WHATWG이 단일 표준을 내놓기로 두 단체가 합의함

DOM --> 4개의 레벨(버전)이 있다.

40장 - 이벤트

이벤트 드리븐 프로그래밍

특정 사건을 발생하여 이벤트를 발생 시키는데 이 경우 호출될 함수를 이벤트 핸들러라고 한다.

이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 --> 이벤트 핸들러 등록

프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라고 한다.

이벤트 타입

이벤트 타입은 이벤트의 종류를 나타내는 문자열

마우스 이벤트

이벤트 타입	이벤트 발생 시점
click	마우스 버튼을 클릭했을 때
dblclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 눌렀을 때
mouseup	누르고 있던 마우스 버튼을 놓았을 때
mousemove	마우스 커서를 움직였을 때
mouseenter	마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링 되지 않는다)
mouseover	마우스 커서를 HTML 요소 안으로 이동했을 때(버블링된다)
mouseleave	마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링 되지 않는다)
mouseout	마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링된다)

키보드 이벤트

이벤트 타입	이벤트 발생 시점
keydown	모든 키를 눌렀을 때
keypress	문자 키를 눌렀을 때 연속적으로 발생
keyup	누르고 있던 키를 놓았을 때 한 번만

포커스 이벤트

이벤트 타입	이벤트 발생 시점
focus	HTML 요소가 포커스를 받았을 때
blur	HTML 요소가 포커스를 잃었을 때
focusin	HTML 요소가 포커스를 받았을 때(버블링된다)
focusout	HTML 요소가 포커스를 잃었을 때(버블링된다)

폼 이벤트

이벤트 타입	이벤트 발생 시점
submit	form 요소 내의 submit 버튼을 클릭 시
reset	form 요소 내의 reset 버튼 클릭 시(최근 사용 X)
input	input, select, textarea 요소의 값이 입력 시
change	input, select, textarea 요소의 값이 변경되었을 시 --> 입력이 종료되어 값이 변경되면 이벤트 발생
readystatechange	HTML 문서의 로드와 파싱 상태를 나타내는 document.readyState 프로퍼티 값('loading', 'interactive', 'complete')이 변경될 때

값 변경 이벤트

이벤트 타입	이벤트 발생 시점
input	input, select, textarea 요소의 값이 입력 시
change	input, select, textarea 요소의 값이 변경되었을 시 --> 입력이 종료되어 값이 변경되면 이벤트 발생
readystatechange	HTML 문서의 로드와 파싱 상태를 나타내는 document.readyState 프로퍼티 값('loading', 'interactive', 'complete')이 변경될 때

DOM 뮤테이션 이벤트

이벤트 타입	이벤트 발생 시점
DOMContentLoaded	HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료되었을 때

뷰 이벤트

이벤트 타입	이벤트 발생 시점
resize	브라우저 윈도우의 크기를 리사이즈할 때 연속적으로 발생한다.
scroll	웹페이지 또는 HTML 요소를 스크롤할 때 연속적으로 발생한다.

리소스 이벤트

이벤트 타입	이벤트 발생 시점
load	DOMContentLoaded 이벤트가 발생한 이후, 모든 리소스의 로딩이 완료되었을때(주로 window 객체에서 발생)
unload	리소스가 언로드될 때(주로 새로운 웹페이지를 요청한 경우)
abort	리소스 로딩이 중단되었을 때
error	리소스 로딩이 실패했을 때

이벤트 핸들러 등록

등록 방법이 3가지 존재

1. 이벤트 핸들러 어트리뷰트 방식

2. 이벤트 핸들러 프로퍼티 방식

3. addEventListener 메서드 방식

이벤트 핸들러 어트리뷰트 방식

<button onclick = "sayHi('Leel)">Click me!</button>
<script>
  function sayHi(name) {
    console.log(`Hi! ${name}.`);
  }
</script>

어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당!

이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.

function onclick(event) {
  sayHi('Lee');
}

이벤트 핸들러 어트리뷰트 값으로 함수 참조를 할당해야 한다면 이벤트 핸들러에 인수 전달하기 어려움
ex)

이벤트 핸들러 어트리뷰트 방식은 HTML과 JS를 묶으므로 분리하는 면에서 사용하지 않는 것이 좋지만 CBD 방식의 프레임워크들은 이 방식으로 처리한다. (뷰를 구성하기 위한 구성 요소로 보기 때문)

이벤트 핸들러 프로퍼티 방식

const $button = document.querySelector('button');

$button.onclick = function() { console.log('button click'); };

이벤트 핸들러 등록을 위해선 이벤트를 발생시킬 객체인 이벤트 타켓, 이벤트 종류를 나타내는 문자열인 이벤트 타입, 이벤트 핸들러가 필요하다

js와 html을 분리할 순 있지만 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점 존재

addEventListener 메서드 방식

EventTarget.prototype.addEventListener('eventType', functionName [, useCapture]) 메서드를 사용

EventTarget: 이벤트 타겟, eventType: 이벤트 타입, functionName: 함수 이름, useCapture true 인 경우 캡처링, false인 경우 버블링(기본값)

$button.addEventListener('click', function() { console.log('button click'); });

이 메서드 방식은 이벤트 핸들러 프로퍼티에 바인딩 된 이벤트 핸들러에 아무런 영향을 주지 않고, 여러 개의 이벤트 핸들러를 등록할 수 있다. 이 경우, 등록된 순서대로 호출한다.

같은 이벤트를 중복 등록 시, 하나의 이벤트 핸들러만 등록됨.

이벤트 핸들러 제거

EventTarget.prototype.removeEventListener 메서드를 사용한다.

처음 addEventListener의 3번째 인수는 false가 기본값이기 때문에 removeEventListener의 3번째 인수를 true로 주게 되면 모두 다 일치하지 않기 때문에 제거가 안됨. --> 모두 일치해야 이벤트 핸들러가 제거된다.

무명함수 또한 참조할 수 없기 때문에 제거 불가능

addEventListener 함수 내에서 제거하기 위해 arguments.callee를 사용할 수 있지만, 코드 최적화와 거리가 멀어서 변수나 자료구조에 저장하여 제거하는 편이 좋다.

이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 이 removeEventListener로 제거할 수 없으며, 이벤트 핸들러 프로퍼티에 null을 할당한다.

이벤트 객체

생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.

이벤트 핸들러 어트리뷰트 방식의 경우 첫 번째 매개변수 이름이 반드시 event 여야 한다.

이벤트 객체의 상속 구조

이벤트 객체는 Object, Event 뿐만아니라 다양한 이벤트 관련 생성자 함수와 더불어 생성되는 프로토타입으로 구성된 프로토타입 체인의 일원이 된다.

이벤트 객체의 프로퍼티는 발생한 이벤트의 타입에 따라 달라진다.

이벤트 객체의 공통 프로퍼티

type, target(이벤트를 발생시킨 DOM요소), currentTarget(이벤트 핸들러가 바인딩된 DOM요소), eventPhase, bubbles, cancelable, defaultPrevented, isTrusted, timeStamp가 존재한다.

마우스 정보 취득

• 마우스 포인터의 좌표 정보를 나타내는 프로퍼티: screenX/screenY, clientX/clientY, pageX/pageY, offsetX/offsetY

• 버튼 정보를 나타내는 프로퍼티: altKey, ctrlKey, shiftyKey, button

clientX/Y 는 뷰포트, 웹페이지의 가시 영역을 기준으로 마우스 포인터 좌표를 나타낸다.

키보드 정보 취득

altKey, ctrlKey, shiftKey, metaKEy, key, keyCode 같은 고유의 프로퍼티를 갖는다.

이벤트 전파

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것.

생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다.

• 캡처링 단계: 이벤트가 상위요소에서 하위 요소 방향으로 전파
• 타깃 단계: 이벤트가 이벤트 타깃에 도달
• 버블링 단계: 이벤트가 하위 요소에서 상위 요소 방향으로 전파

이벤트 핸들러 어트리뷰트/프로퍼티는 타깃 단계와 버블링 단계의 이벤트만 캐치 가능. 그러나 addEventListener 메서드 방식은 캡처링 단계의 이벤트도 선별적으로 캐치 가능(인수를 사용하여)

이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다.

이벤트 패스(composedPath 메서드로 확인 가능하며 이벤트가 통과하는 DOM 트리 상의 경로를 의미한다.)

버블링을 통해 전파되지 않는 것

• 포커스 이벤트: focus/blur
• 리소스 이벤트: laod/unload/abort/error
• 마우스 이벤트: mouseenter/mouseleave

--> 상위 요소에서 위 이벤트 캐치하려면 캡처링 단계의 이벤트를 캐치해야한다.

이벤트 위임

ul안의 모든 li 요소들이 클릭 이벤트에 반응하도록 이벤트 핸들러인 activate 함수를 등록해야 하는데 li의 개수가 많으면 모두 다 일일히 등록하기 힘드므로 상위 DOM 요소에 이벤트 핸들러를 등록해야 한다.

--> ul 요소 노드에 onclick 프로퍼티에 이벤트 핸들러 등록으로 해결!

이러한 경우 이벤트 타깃 검사가 필요하다.

function activate({target}) {
  if(!target.matches('#fruits > li')) return;
}

DOM 요소의 기본 동작 조작

DOM 요소의 기본 동작 중단

preventDefault 메서드를 사용한다.

--> a나 checkbox, form 요소와 같이 이 요소들의 기본 동작을 중단하기 위해 사용한다.

이벤트 전파 방지

stopPropagation 메서드를 사용한다.

--> 하위 DOM 요소의 이벤트를 개별적으로 처리하기 위해 이벤트의 전파를 중단시킨다.

이벤트 핸들러 내부의 this

이벤트 핸들러 어트리뷰트 방식

이벤트 핸들러 어트리뷰트 값으로 지정한 문자열은 이벤트 핸들러에 의해 일반 함수로 호출되므로 함수 내부 this는 전역 객체를 가리킨다.

그러나 이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.

이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식

프로퍼티 방식과 addEventListener 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다.

화살표 함수는 this 바인딩을 갖지 않아서 상위 스코프의 this를 가리킴

클래스의 경우 this는 인스턴스 바인딩이 아닌 이벤트 핸들러로 바인딩한 DOM 요소를 가리키기 때문에 bind 메서드를 사용하거나 클래스 필드에 할당한 화살표 함수를 이벤트 핸들러로 등록하여 이벤트 핸들러 내부의 this가 인스턴스를 가리키도록 한다.

이벤트 핸들러에 인수 전달

이벤트 핸들러 내부에서 함수를 호출하면서 인수를 전달할 수 있다.

const checkUserNameLength = min => {...}

$input.onblur = () => { checkUserNameLength(인수); }

또는 이벤트 핸들러를 반환하는 함수를 만들어 호출 하여 인수를 전달한다.

const checkUserNameLength = min => e => {...}

$input.onblur = checkUserNameLength(인수);

커스텀 이벤트

커스텀 이벤트 생성

개발자 의도로 생성된 이벤트를 커스텀 이벤트라고 한다.

기존 이벤트 타입이 아닌 새로운 이벤트 타입도 가능한데 이 경우, CustomEvent 이벤트 생성자 함수를 사용한다

이 생성된 커스텀 이벤트 객체는 버블링되지 않고 preventDefault 메서드로 취소할 수 없다. bubbles, cancelable 프로퍼티 값이 false로 기본 설정된다. 또한 istTrusted 프로퍼티 값도 언제나 false이다.

커스텀 이벤트 객체는 이벤트 타입에 따라 가지는 이벤트 고유의 프로퍼티 값을 지정할 수 있는데 두 번째 인수로 프로퍼티를 전달한다.

커스텀 이벤트 디스패치

dispatchEvent 메서드로 디스패치(이벤트를 발생시키는 행위) 할 수 있다.

dispatchEvent 메서드는 이벤트 핸들러를 동기 처리방식으로 호출하며, 기존 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하여 커스텀 이벤트 객체를 생성한 경우 addEventListener 메서드 방식으로 이벤트 핸들러를 등록 후 디스패치 사용 가능하다.

수업 시간 필기

39장

실무에서 DOM API 안씀

jQuery또한 html의 요소를 가져오는 방식이 같기 때문에 디자인이 조금만 바뀌어도 html, js가 바뀌어버림 --> 문제
js가 html을 의존하고 있음

React 같은 프레임워크는 jsx를 통해서 js가 html을 더 이상 의존하지 않음

html이 js를 의존하는 방법은 js가 html파일을 스트링 파일로 만들어서 하는경우

Vue, react, angular -> spa 방식(seo에 약함)

---

40장

onkeyup을 사용하였을 때 keyCode가 아닌 key를 사용하여 해야한다!

Form 요소에는 submit이라는 이벤트가 발생한다.

Remove 이벤트 작성 시에는 모든 요소는 click 이벤트를 갖고 있기 때문에 e.target.classList.contains('remove'))를 해주어야한다.

이벤트 위임을 하는 경우 무조건 한번 걸러주는 것이 필요함