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