Section 7: Interacting with the HTML Page

JavaScript - The Complete Guide 2022

Section 7: Interacting with the HTML Page - Exploring the DOM

olivia_yj 2022. 10. 17. 21:47

The goals

💪🏻HTML, DOM & JavaScript

✌🏻Nodes & Elements

👍🏻Querying DOM Nodes & Traversing the DOM

👏🏻Evaluating & Manipulating DOM Nodes

👊🏻Creating & Removing DOM Nodes

The Document Object Model (DOM)

Node Query Methods

다음은 DOM 요소에 접근하는 다양한 방법에 대한 요약입니다 (참고: 요소 노드에 대해서만 쿼리할 수 있음).

아래의 쿼리 메서드 외에도 문서 객체에 대한 아래의 특수 프로퍼티로 문서의 일부를 선택합니다.

document.body => <body> 요소 노드를 선택합니다.

document.head => <head> 요소 노드를 선택합니다.

document.documentElement => <html> 요소 노드를 선택합니다.

---

쿼리 메서드

---

document.querySelector(<CSS selector>);

모든 CSS 선택자(예: '#id이름', '.클래스명' 또는 'div p.클래스명')를 사용하여 DOM에서 처음(!) 일치하는 요소를 반환합니다. 일치하는 요소를 찾을 수 없는 경우에는 null 을 반환합니다.

추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

document.getElementById(<ID>);

ID(# 없이 ID 이름만)를 가져와 이 ID를 가진 요소를 반환합니다. 동일한 ID가 페이지에서 두 번 이상 발생하지 않으므로 항상 정확히 하나의 요소를 반환합니다. 지정된 ID를 가진 요소를 찾을 수 없는 경우 null 을 반환합니다.

추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

document.querySelectorAll(<CSS selector>);

모든 CSS 선택자(예: '#id이름', '.클래스명' 또는 'div p.클래스명')를 사용하여 DOM에서 일치하는 모든 요소를 정적(넌 라이브) NodeList로 반환합니다. 일치하는 요소를 찾을 수 없으면 빈 NodeList 를 반환합니다.

추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

document.getElementsByClassName(<CSS CLASS>);

CSS 클래스 g(예: '클래스명')를 가져와 DOM에서 일치하는 요소의 라이브 HTMLCollection 을 반환합니다. 일치하는 요소를 찾을 수 없으면 빈 HTMLCollection을 반환합니다.

추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

document.getElementsByTagName(<HTML TAG>);

HTML 태그(예: 'p')를 가져와 DOM에서 일치하는 요소의 라이브 HTMLCollection을 반환합니다. 일치하는 요소를 찾을 수 없으면 빈 HTMLCollection을 반환합니다.

추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

일반적으로는 사용되지 않는 getElementsByName() 메서드도 있습니다(https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName<2 }).

Quiz

질문 1:

DOM은 어디에서 “찾을” 수 있을까요?

답: 브라우저에 의해 JavaScript에 노출되는 API의 일부입니다.

JavaScript는 "호스팅된 언어"라는 점을 기억하세요. 호스트 환경으로서의 브라우저는 이 DOM API를 JS 코드에 자동으로 노출합니다.

질문 3:

document.querySelector('#Id 이름')와 document.getElementById('Id 이름')의 차이점은 무엇일까요?

답: querySelector는 CSS 선택자로 (제공된 선택자에 따라) 모든 요소와 일치할 수 있으며 getElementById는 ID로만 찾습니다.

질문 4:

querySelector()와 querySelectorAll()의 차이점은 무엇일까요?

답: querySelector는 처음 일치하는 요소를 찾고 querySelectorAll은 일치하는 모든 요소를 찾아 배열과 유사한 객체를 반환합니다.

요약: 삽입, 대체, 제거

DOM 요소를 생성, 삽입, 교체, 제거하는 방법에는 여러 가지가 있습니다. 다음은 사용 가능한 방법에 대한 요약입니다.

브라우저 지원에 대해서는 제공된 링크와 강의 후반부에 있는 "브라우저 지원" 모듈을 확인하십시오.

생성 & 삽입

크게 두 가지 방법이 있습니다. HTML 스니펫(예: innerHTML을 통해)을 유효한 HTML 스니펫에 제공하고 브라우저가 이를 렌더링하도록 하거나 JS 코드로 DOM 객체를 생성한 후 수동으로 추가/삽입합니다. 후자의 접근 방식은 DOM 객체에 직접 접근할 수 있다는 장점이 있습니다(프로퍼티를 설정하거나 이벤트 리스너를 추가하는 데 유용). 단점은 더 많은 코드를 작성해야 한다는 겁니다.

HTML 코드 추가하기.

const root = document.getElementById('root-el'); // selects something like <div id="root-el">
root.innerHTML = `
<div>
<h2>Welcome!</h2>
<p>This is all create & rendered automatically!</p>
</div>
`;

중요한 참고 사항: innerHTML을 사용하면 root에 있던 내용이 완전히 대체됩니다. HTML 코드를 추가/삽입하려면 insertAdjacentHTML을 대신 사용할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

const root = document.getElementById('root-el'); // selects something like <div id="root-el">
root.insertAdjacentHTML('afterbegin', `
<div>
<h2>Welcome!</h2>
<p>This is all create & rendered automatically!</p>
</div>
`);

DOM 객체를 수동으로 생성, 삽입하기.

const someParagraph = document.createElement('p'); // creates a "p" element (i.e. a <p> element)
const root = document.getElementById('root-el'); // selects something like <div id="root-el">
root.append(someParagraph);

이 예에서는 단락을 만들어 root에 추가합니다 - 이는 root의 끝에 삽입됨을 의미합니다(즉 root 내부에 있지만 다른 모든 하위 노드 이후에 추가됨).

삽입하는 메서드:

append() => https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

브라우저 지원은 괜찮게 되는 편이지만 IE에서는 appendChild()이 선호될 수 있습니다 => https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

prepend() => https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/prepend

브라우저 지원은 괜찮게 되는 편이지만 IE에서는 insertBefore()이 선호될 수 있습니다 => https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore

before(), after() => https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before & https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after

브라우저를 지원하지만 IE와 Safari는 지원하지 않습니다. insertBefore() (https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore) or insertAdjacentElement() (https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement) as substitutes.

중요한 참고 사항(요소를 삽입하는 방법에 관계없이). 요소를 삽입할 때 이전에 이미 삽입한 경우 새 위치로 요소를 이동하게 됩니다. 복사되는 것이아닙니다(someElement.cloneNode(true)로 요소를 복사할 수 있긴 합니다).

대체

DOM의 요소를 아래의 두 가지 방법으로 교체할 수 있습니다.

replaceWith() => https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith

replaceChild() => https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild

replaceWith()는 조금 더 쉽게 쓸 수 있고 브라우저 지원도 적절합니다. 단, IE는 예외입니다. IE를 사용하신다면 replaceChild()를 사용하는 것을 고려해 보세요.

제거

아래의 세 가지 방법으로 요소를 제거할 수 있습니다:

someElement.innerHTML = ''=> someElement의 모든 HTML 내용을 지워 렌더링된 모든 객체를 제거합니다.

someElement.remove()=> DOM에서 단일 요소(someElement)를 제거(https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove).

브라우저 지원은 훌륭하지만 IE는 아닙니다. 대신 removeChild(다음을 참고)를 사용하세요.

someElement.parentNode.removeChild(someElement) => (호출하는 요소가 아닌) 제공된 자식 요소를 제거합니다. 광범위한 브라우저 지원을 제공하지만 더 많은 코드가 작성되어야 합니다(https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild).

텍스트 노드는 어떨까요?

한 번에 텍스트 노드를 생성하고 삽입할 수 있습니다.

someElement.textContent = 'Hi there!';

위의 코드는 'Hi there!' 내용의 텍스트 노드를 생성하고 삽입합니다.

기존에 있는 텍스트를 추가하고 싶으신가요?

아래의 코드를 쓰면 됩니다.

someElement.textContent = someElement.textContent + 'More text!';

Sources

Element.insertAdjacentHTML() - Web APIs | MDN

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

developer.mozilla.org

Element.insertAdjacentHTML() - Web APIs | MDN

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

developer.mozilla.org

Element.insertAdjacentHTML() - Web APIs | MDN

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

developer.mozilla.org

Document.getElementById() - Web APIs | MDN

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quick

developer.mozilla.org

Document.getElementById() - Web APIs | MDN

developer.mozilla.org

Document.getElementById() - Web APIs | MDN

developer.mozilla.org

Document.querySelector() - Web APIs | MDN

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

developer.mozilla.org

'JavaScript - The Complete Guide 2022' 카테고리의 다른 글

Section 9: Objects - A Closer Look - Beyond the Basics (0)	2022.10.19
Section 8: Arrays & Iterables - Lists of Data (0)	2022.10.18
Section 6: More about Functions - Beyond function basic() {} (0)	2022.10.14
Section 5: Behind The Scenes of JavaScript - How It Works, The Weird Parts & ES5 vs ES6+ (0)	2022.10.14
Section 4: Control Structures - Conditional Code & Loops (0)	2022.10.13

현재글Section 7: Interacting with the HTML Page - Exploring the DOM

livlog

react, spa, express, cors, form, input, node.js, css tips, object, firebase, Component, Props, axios, jsx, class, useState, Database, API, ejs, Promise,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

livlog