[JS] 5. DOM

Shy·2023년 9월 15일
0

NodeJS(Express&Next.js)

목록 보기
31/39

DOM

DOM (Document Object Model)은 웹 문서의 구조화된 표현을 제공하며, 프로그래밍 언어를 통해 문서 구조, 스타일 및 내용을 조작할 수 있는 방법을 제공한다. DOM은 웹 문서를 트리 구조로 나타내며, 각 노드는 문서의 일부분, 예를 들면 요소, 속성, 텍스트 등을 나타낸다.

DOM의 특징

  1. 트리 구조: 웹 문서는 노드들의 트리로 표현되며, 각 노드는 요소, 속성, 텍스트 등을 나타낸다.
  2. 언어 중립: DOM은 여러 프로그래밍 언어에서 사용될 수 있도록 설계되었다. 그러나 웹 브라우저에서 가장 흔히 사용되는 언어는 JavaScript이다.
  3. 동적: DOM은 동적으로 변경될 수 있다. 즉, 원본 HTML이나 XML 문서가 웹 페이지에 로드된 후에도 JavaScript를 사용하여 DOM을 변경할 수 있다. 이로 인해 동적인 인터랙션 및 콘텐츠 업데이트가 가능해진다.

DOM조작 예시

HTML

<!DOCTYPE html>
<html>
<body>

<h2 id="myHeading">Hello World!</h2>
<p>Click the button to change the text of the heading:</p>

<button onclick="changeText()">Click me</button>

<script>
function changeText() {
  document.getElementById("myHeading").innerHTML = "Hello DOM!";
}
</script>

</body>
</html>

위의 예제에서 JavaScript 함수 changeText는 DOM을 조작하여 <h2> 요소의 텍스트를 변경한다.

DOM은 웹 개발에서 핵심적인 개념 중 하나이며, 웹 페이지의 동적인 동작을 가능하게 한다. 현대의 프런트엔드 프레임워크나 라이브러리 (예: React, Vue, Angular)는 DOM을 효율적으로 조작하기 위한 더 추상화된 방식을 제공하곤 한다.

Node, Element

DOM (Document Object Model) 내에서 Node와 Element는 중요한 개념이다. 두 개념을 이해하기 위해 트리 구조를 생각하면 도움이 된다. DOM 트리의 각 부분은 "노드(Node)"로 나타나며, 그 중 일부는 "요소(Element)"이다.

Node

  • Node는 DOM의 기본 구성 단위이다.
  • DOM 내의 모든 객체는 Node입니다. 이는 Element, Text, Comment, Document 등 다양한 타입의 노드를 포함한다.
  • DOM 트리 구조 내의 모든 항목 (예: 요소, 속성, 텍스트 등)을 나타내는 객체로 생각할 수 있다.
  • Node는 일반적인 속성과 메서드 (예: parentNode, nextSibling, appendChild())를 가지며, 모든 노드 타입에서 사용할 수 있다.

Element

  • Element는 Node의 특별한 하위 유형이다.
  • Element는 DOM 트리에서 태그 (예: <div>, <span>, <a>)를 나타내는 객체이다.
  • 요소는 속성 (예: id, class), 텍스트 내용 및 다른 요소를 포함할 수 있다.
  • Element는 특정한 속성과 메서드 (예: getAttribute(), setAttribute(), querySelector())를 가지며, 요소 노드에서만 사용할 수 있다.

비교

모든 Element는 Node이지만, 모든 Node는 Element가 아니다.
Node는 일반적인 DOM 객체를 나타내며, Element는 특정 태그와 관련된 DOM 객체를 나타낸다.

검색과 탐색

document.getElementById

document.getElementById()는 DOM (Document Object Model) 조작에서 가장 기본적이고 일반적으로 사용되는 메서드 중 하나이다. 이 메서드는 주어진 문자열과 일치하는 ID 속성을 가진 요소를 찾아 반환한다.

let element = document.getElementById(elementId);
  • elementId: 문자열. 찾고자 하는 요소의 ID.
  • 반환 값: 주어진 ID를 가진 요소. 만약 해당 ID를 가진 요소가 없다면 null을 반환.

사용 예제

예를 들어, 웹 페이지에 다음과 같은 HTML 요소가 있다고 가정해보자.

<div id="myDiv">Hello, World!</div>

이 요소를 JavaScript로 선택하려면 다음과 같이 할 수 있다.

let divElement = document.getElementById("myDiv");
console.log(divElement.innerHTML); // "Hello, World!"

document.querySelector

document.querySelector() 메서드는 CSS 선택자를 사용하여 문서에서 일치하는 첫 번째 요소를 반환한다. 만약 일치하는 요소가 없다면 null을 반환한다. 이 메서드는 DOM에 대한 질의를 수행하는 현대적이고 다양한 방법을 제공한다.

let element = document.querySelector(selectors);
  • selectors: 문자열. 문서에서 요소를 찾기 위한 하나 이상의 CSS 선택자.
  • 반환 값: 주어진 선택자와 일치하는 첫 번째 요소. 일치하는 요소가 없다면 null을 반환.

사용 예제

  1. ID 선택자를 사용하여 요소 선택
<div id="myDiv">Hello, World!</div>
let divElement = document.querySelector("#myDiv");
console.log(divElement.innerHTML); // "Hello, World!"
  1. 클래스 선택자를 사용하여 요소 선택
<div class="myClass">Hello, World!</div>
let divElement = document.querySelector(".myClass");
console.log(divElement.innerHTML); // "Hello, World!"
  1. 태그 선택자를 사용하여 요소 선택
<p>Paragraph 1</p>
<p>Paragraph 2</p>
let pElement = document.querySelector("p");
console.log(pElement.innerHTML); // "Paragraph 1" (첫 번째로 일치하는 p 요소)
  1. 복합 선택자를 사용하여 요소 선택
<div class="container">
  <p class="highlight">Highlighted text</p>
</div>
let pElement = document.querySelector(".container .highlight");
console.log(pElement.innerHTML); // "Highlighted text"

유의점

  1. document.querySelector()는 첫 번째로 일치하는 요소만 반환한다. 선택자와 일치하는 모든 요소를 가져오고 싶다면 document.querySelectorAll()을 사용할 수 있다.

  2. 만약 일치하는 요소가 없다면, document.querySelector()는 null을 반환한다. 따라서 요소에 접근하기 전에 반환값이 null이 아닌지 확인하는 것이 좋다.

  3. querySelector와 querySelectorAll은 비교적 최근에 도입된 메서드이므로, 오래된 브라우저에서는 지원되지 않을 수 있다. 하지만 대부분의 최신 브라우저에서는 지원된다.

document.querySelector()는 CSS 선택자를 활용하여 DOM 요소에 빠르게 접근하는 데 매우 유용하다.

document.querySelectorAll

document.querySelectorAll() 메서드는 CSS 선택자를 사용하여 문서에서 일치하는 모든 요소를 NodeList 객체로 반환한다. 만약 일치하는 요소가 없다면, 빈 NodeList를 반환한다.

let nodeList = document.querySelectorAll(selectors);
  • selectors: 문자열. 문서에서 요소를 찾기 위한 하나 이상의 CSS 선택자.
  • 반환 값: 주어진 선택자와 일치하는 모든 요소의 NodeList.

사용 예제

  1. 클래스 선택자를 사용하여 요소 선택
<div class="example">Example 1</div>
<div class="example">Example 2</div>
let divElements = document.querySelectorAll(".example");
divElements.forEach(div => console.log(div.innerHTML)); 
// 출력: 
// "Example 1"
// "Example 2"
  1. 태그 선택자를 사용하여 요소 선택
<p>Paragraph 1</p>
<p>Paragraph 2</p>
let pElements = document.querySelectorAll("p");
pElements.forEach(p => console.log(p.innerHTML));
// 출력:
// "Paragraph 1"
// "Paragraph 2"
  1. 복합 선택자를 사용하여 요소 선택
<div class="container">
  <p class="highlight">Highlighted text 1</p>
  <p class="highlight">Highlighted text 2</p>
</div>
let pElements = document.querySelectorAll(".container .highlight");
pElements.forEach(p => console.log(p.innerHTML));
// 출력:
// "Highlighted text 1"
// "Highlighted text 2"

주의점

  1. document.querySelectorAll()가 반환하는 NodeList 객체는 유사 배열이다. 이는 배열과 유사하게 인덱스로 요소에 접근할 수 있지만, 배열의 모든 메서드 (예: push나 pop)를 가지고 있지는 않습니다. 그러나 forEach와 같은 몇몇 메서드는 사용할 수 있다.

  2. 반환된 NodeList는 정적(static)이다. 이는 DOM의 변경 사항을 실시간으로 반영하지 않는다는 것을 의미한다. 이와는 대조적으로 document.getElementsByTagName과 같은 다른 메서드들은 실시간으로 반영하는 라이브 NodeList를 반환하기도 한다.

  3. 만약 일치하는 요소가 없다면, document.querySelectorAll()는 빈 NodeList를 반환한다.

document.querySelectorAll()는 CSS 선택자를 활용하여 여러 DOM 요소에 빠르게 접근하는 데 유용하게 사용된다.

N.parentElement

parentElement 속성은 주어진 요소의 부모 요소를 반환한다. 만약 부모 요소가 없거나 (예: 주어진 요소가 문서의 최상위 요소인 경우) 부모가 DOM 요소가 아닌 경우 (예: Document나 DocumentFragment)에는 null을 반환한다.

let parent = element.parentElement;
  • element: 부모 요소를 찾고자 하는 대상 요소.
  • 반환 값: 대상 요소의 부모 요소. 부모 요소가 없거나 DOM 요소가 아니면 null을 반환.

예제

<div id="container">
  <p id="paragraph">Hello, World!</p>
</div>
let paraElement = document.getElementById("paragraph");
let parentOfPara = paraElement.parentElement;

console.log(parentOfPara.id);  // "container"

위의 예제에서, p 요소의 parentElement 속성을 사용하여 그 부모인 div 요소를 얻는다.

유의점

  1. parentElement와 매우 유사한 속성인 parentNode가 있다. 둘 다 요소의 부모를 반환하지만, parentNode는 요소의 부모가 꼭 DOM 요소일 필요가 없다. 즉, 부모가 Document나 DocumentFragment와 같은 다른 노드 타입일 수 있다. 반면, parentElement는 부모가 DOM 요소일 때만 해당 요소를 반환하고, 그렇지 않은 경우 null을 반환한다.

  2. 일반적인 사용에서, 대부분의 경우 parentElement와 parentNode는 동일한 값을 반환하겠지만, 반환되는 노드 타입이 중요한 경우에는 차이점을 고려해야 한다.

E.closest

Element.closest() 메서드는 현재 요소부터 시작하여 DOM 트리를 위로 탐색하며 주어진 선택자와 일치하는 가장 가까운 조상 요소를 찾는다. 만약 일치하는 요소를 찾지 못한다면 null을 반환한다.

이 메서드는 주어진 요소 자체부터 시작하여 선택자와 일치하는지 확인하고, 그렇지 않다면 부모 요소로 이동하여 확인하는 방식으로 DOM 트리를 계속해서 위로 탐색한다.

let closestElement = element.closest(selectors);
  • element: 시작 요소.
  • selectors: 찾고자 하는 조상 요소의 CSS 선택자.
  • 반환 값: 주어진 선택자와 일치하는 가장 가까운 조상 요소 또는 null.

예제

<div id="parent">
  <div class="child">
    <div class="grandchild">Content</div>
  </div>
</div>
let grandchild = document.querySelector(".grandchild");
let closestDiv = grandchild.closest("div");

console.log(closestDiv.className);  // "grandchild"

또 다른 예제

let closestChild = grandchild.closest(".child");

console.log(closestChild.className);  // "child"

주의점

  • closest() 메서드는 현재 요소부터 시작한다. 따라서 현재 요소 자체가 선택자와 일치하면 그 요소가 반환된다.
  • 일치하는 요소를 찾지 못할 경우, null을 반환한다. 따라서 반환 값을 사용하기 전에 이를 확인하는 것이 좋다.
  • closest() 메서드는 IE (Internet Explorer)에서는 지원되지 않는다. 따라서 IE를 지원해야 하는 웹 페이지에서는 폴리필을 사용하거나 이 메서드에 의존하지 않는 방법을 찾아야 한다.

Element.closest() 메서드는 현재 요소로부터 시작하여 주어진 선택자와 일치하는 가장 가까운 조상 요소를 찾는 데 유용하다.

previousSibling, nextSibling

previousSibling과 nextSibling은 DOM에서 노드를 탐색하는 데 사용되는 속성이다. 이 두 속성은 현재 노드와 같은 부모를 가지는 이전 및 다음 노드에 대한 참조를 제공한다.

previousSibling

  • 현재 노드의 바로 이전 형제 노드를 참조한다.
  • 만약 현재 노드가 첫 번째 노드라면 null을 반환한다.

nextSibling

  • 현재 노드의 바로 다음 형제 노드를 참조한다.
  • 만약 현재 노드가 마지막 노드라면 null을 반환합니다.

주의점

  • previousSibling과 nextSibling 속성은 모든 노드 타입에 대해 작동합니다. 이는 요소 노드뿐만 아니라 텍스트 노드나 주석 노드도 포함된다.
  • 자주 발생하는 오류는 요소 노드만을 기대하고 이 속성을 사용하는 것이다. HTML에서 공백, 줄 바꿈, 주석 등이 텍스트 노드나 주석 노드로 해석되어 이러한 노드들도 형제 노드로 계산된다.

예제

div id="container">
  <!-- Some comment -->
  <p>First paragraph</p>
  <p id="middle">Second paragraph</p>
  <p>Third paragraph</p>
</div>
let middlePara = document.getElementById("middle");

console.log(middlePara.previousSibling); // 이것은 텍스트 노드 (줄 바꿈 또는 공백)를 참조한다.
console.log(middlePara.nextSibling); // 이것은 텍스트 노드 (줄 바꿈 또는 공백)를 참조한다.

만약 요소 노드만을 대상으로 하고 싶다면 previousElementSibling과 nextElementSibling 속성을 사용하면 된다. 이러한 속성들은 텍스트나 주석 노드를 무시하고 요소 노드만을 참조한다.

E.children

Element.children은 DOM 요소의 속성으로, 해당 요소의 모든 자식 요소를 나타내는 'HTMLCollection'을 반환한다. 중요한 점은 children 속성이 요소 노드들만 포함하며 텍스트 노드나 주석 노드는 포함하지 않는다는 것이다.

let childElements = element.children;
  • element: 자식 요소들을 얻고자 하는 대상 요소.
  • 반환 값: 해당 요소의 모든 자식 요소를 포함하는 HTMLCollection.

예제

<div id="container">
  <p>First paragraph</p>
  <!-- Some comment -->
  <p>Second paragraph</p>
  <span>Some span</span>
</div>
let container = document.getElementById("container");
let childrenOfContainer = container.children;

console.log(childrenOfContainer.length);  // 3
console.log(childrenOfContainer[0].textContent);  // "First paragraph"
console.log(childrenOfContainer[1].textContent);  // "Second paragraph"

주의점 및 추가 정보

  1. Element.children은 HTMLCollection을 반환한다. 이는 유사 배열 객체이므로 배열의 메서드 (예: map나 filter)를 바로 사용할 수 없다. 필요하다면 Array.from()을 사용하여 배열로 변환할 수 있다.
  2. 요소의 자식 노드 전체를 얻고자 하는 경우, 즉 텍스트 노드나 주석 노드도 포함하여 얻고 싶은 경우에는 Node.childNodes 속성을 사용할 수 있다.
  3. 요소의 첫 번째 자식 요소나 마지막 자식 요소에 접근하고 싶다면 Element.firstElementChild 및 Element.lastElementChild 속성을 사용할 수 있다.

Element.children 속성은 주어진 요소의 자식 요소들만을 대상으로 할 때 매우 유용하게 사용된다.

E.firstElementChild, E.lastElementChild

Element.firstElementChild와 Element.lastElementChild는 DOM 요소의 속성으로, 각각 요소의 첫 번째 자식 요소와 마지막 자식 요소를 참조한다. 이 속성들은 요소 노드만을 대상으로 하기 때문에 텍스트 노드나 주석 노드 등은 무시된다.

Element.firstElementChild

  • 대상 요소의 첫 번째 자식 요소를 반환한다.
  • 첫 번째 자식 요소가 없을 경우 null을 반환한다.

Element.lastElementChild

  • 대상 요소의 마지막 자식 요소를 반환한다.
  • 마지막 자식 요소가 없을 경우 null을 반환한다.

예제

<div id="container">
  <!-- Some comment -->
  <p>First paragraph</p>
  <span>Some span</span>
  <p>Second paragraph</p>
</div>
let container = document.getElementById("container");

let firstChild = container.firstElementChild;
console.log(firstChild.textContent);  // "First paragraph"

let lastChild = container.lastElementChild;
console.log(lastChild.textContent);  // "Second paragraph"

주의점 및 추가 정보

  • firstElementChild와 lastElementChild는 요소 노드만을 참조하므로, 텍스트 노드나 주석 노드를 참조하고 싶다면 이 속성들은 적합하지 않는다. 이런 경우, Node.firstChild와 Node.lastChild 속성을 사용하면 된다. 그러나 이 속성들은 모든 노드 타입을 참조할 수 있다.
  • 해당 요소에 자식 요소가 없는 경우, firstElementChild와 lastElementChild는 null을 반환한다. 따라서 반환된 값의 존재를 확인한 후 추가 작업을 수행하는 것이 좋다.

이 두 속성은 주어진 요소의 첫 번째 및 마지막 자식 요소를 쉽게 참조할 수 있게 해주어 DOM의 특정 부분에 접근하거나 조작할 때 매우 유용하게 사용된다.

생성, 조회, 수정

document.createElement

document.createElement()는 DOM에서 새로운 요소를 생성하는 메서드이다. 생성된 요소는 메모리상에 있으며, 실제 DOM에 추가되기 전까지는 웹 페이지에 표시되지 않는다. 이 메서드를 사용하여 생성된 요소를 웹 페이지에 표시하려면, 추가적으로 appendChild()나 insertBefore() 등의 메서드를 사용하여 해당 요소를 DOM에 삽입해야 한다.

let element = document.createElement(tagName);
  • tagName: 문자열. 생성하려는 HTML 요소의 이름 (예: 'div', 'a', 'span' 등).

예제

// 새로운 <div> 요소를 생성
let newDiv = document.createElement('div');

// 생성한 <div> 요소에 텍스트 컨텐츠를 추가
newDiv.textContent = 'Hello, World!';

// 생성한 <div> 요소에 클래스를 추가
newDiv.classList.add('myClass');

// 실제 DOM에 생성한 <div> 요소를 추가
document.body.appendChild(newDiv);

이 예제에서는 새로운 <div> 요소를 생성하고, 해당 요소에 텍스트와 클래스를 추가한 후, 실제 문서의 <body> 요소의 자식으로 삽입하였다.

주의점 및 팁

  • document.createElement()로 생성된 요소는 메모리상에만 존재한다. 실제 웹 페이지에 표시하려면 이 요소를 DOM의 다른 요소에 추가해야 한다.
  • 요소를 생성한 후에는 속성 설정, 이벤트 리스너 추가, 자식 요소 추가 등 다양한 작업을 수행할 수 있다.
  • 다른 요소 안에 삽입하기 전에 요소의 모든 속성과 내용을 설정하는 것이 좋다. 그렇게 함으로써 불필요한 리렌더링을 최소화할 수 있다.

document.createElement() 메서드는 DOM 조작에서 기본적이면서도 매우 중요한 메서드로, 동적으로 웹 페이지의 내용을 변경하거나 추가할 때 자주 사용된다.

E.prepend, E.append

Element.prepend()과 Element.append()는 자바스크립트의 DOM API에 속하는 메서드로, 새로운 노드나 문자열을 기존 요소의 자식으로 추가하는 데 사용된다. 각각의 메서드는 자식 요소들 사이의 위치에 따라 추가된다.

Element.prepend()

  • 주어진 요소나 문자열들을 대상 요소의 첫 번째 자식 앞에 추가한다.
  • 여러 개의 인수를 전달하여 한 번에 여러 요소나 문자열을 추가할 수 있다.

Element.append()

  • 주어진 요소나 문자열들을 대상 요소의 마지막 자식 뒤에 추가한다.
  • Element.appendChild()와 비슷하나, 여러 개의 인수를 전달하여 한 번에 여러 요소나 문자열을 추가할 수 있다는 차이점이 있다.

예제

let container = document.getElementById('container');

// 새로운 요소들 생성
let newDiv = document.createElement('div');
newDiv.textContent = 'I am a div!';
let newText = 'I am just text.';

// prepend 메서드를 사용하여 container의 첫 번째 자식 앞에 추가
container.prepend(newDiv, newText);

// append 메서드를 사용하여 container의 마지막 자식 뒤에 추가
let anotherDiv = document.createElement('div');
anotherDiv.textContent = 'I am another div!';
container.append(anotherDiv);

주의점 및 추가 정보

  1. Element.prepend()와 Element.append()는 문자열을 직접적으로 인수로 전달할 수 있다. 이렇게 전달된 문자열은 텍스트 노드로 변환되어 추가된다.

  2. 같은 요소를 다른 위치에 추가하려고 시도하면, 해당 요소는 원래 위치에서 제거되고 새로운 위치에 추가된다. 즉, DOM 요소는 한 번에 하나의 위치에만 존재할 수 있다.

  3. 이 두 메서드는 현대 브라우저에서 잘 지원되지만, 오래된 브라우저(예: Internet Explorer)에서는 지원되지 않을 수 있다. 호환성 문제를 피하기 위해 필요한 경우 폴리필을 사용하거나 다른 메서드(예: insertBefore 또는 appendChild)를 사용하는 것이 좋다.

Element.prepend()와 Element.append() 메서드는 DOM에 동적으로 콘텐츠를 추가할 때 매우 유용하게 사용된다.

E.remove

Element.remove() 메서드는 DOM의 특정 요소를 제거하는 데 사용된다. 이 메서드를 호출하면 해당 요소와 그 자식 요소들 모두 DOM에서 제거된다.

요소에 remove() 메서드를 호출하면 해당 요소는 DOM에서 즉시 제거된다.

element.remove();

예제

<div id="toBeRemoved">Hello, I will be removed soon!</div>
let element = document.getElementById('toBeRemoved');
element.remove();

// 이제 "toBeRemoved" div는 DOM에서 사라졌습니다.

주의점

  1. Element.remove()를 호출하면 요소는 완전히 DOM에서 제거된다. 만약 나중에 다시 사용하려는 요소를 제거하기 전에 참조를 유지해야 할 수도 있다.

  2. 요소가 DOM에서 제거되더라도, 해당 요소에 대한 참조 (예: 변수)를 통해 여전히 접근하고 조작할 수 있다. 다만, 웹 페이지에서는 보이지 않을 뿐이다.

  3. Element.remove() 메서드는 대부분의 현대 브라우저에서 지원된다. 그러나 오래된 브라우저 (예: Internet Explorer)에서는 지원되지 않을 수 있다. 호환성을 위해 필요한 경우 폴리필을 사용하거나 대체 방법을 고려해야 한다.

요약하면, Element.remove()는 특정 요소를 DOM에서 쉽게 제거하는 데 사용되는 간단하면서도 강력한 메서드이다.

E.insertAdjacentElement

Element.insertAdjacentElement() 메서드는 주어진 요소를 다른 요소의 지정된 위치에 삽입한다. 이 메서드는 특정 위치에 요소를 효과적으로 삽입할 수 있어 매우 유용하다.

targetElement.insertAdjacentElement(position, element);
  • targetElement: 요소를 삽입할 대상 요소다.
  • position: 문자열로 주어지며, 삽입될 위치를 지정합니다. 다음 네 가지 값 중 하나를 취할 수 있다.
    • 'beforebegin': 대상 요소의 바로 앞에 삽입한다.
    • 'afterbegin': 대상 요소의 첫 번째 자식 앞에 삽입한다.
    • 'beforeend': 대상 요소의 마지막 자식 뒤에 삽입한다.
    • 'afterend': 대상 요소의 바로 뒤에 삽입한다.
  • element: 삽입할 요소이다.

예제

<div id="target">Hello</div>
let target = document.getElementById('target');
let newElement = document.createElement('span');
newElement.textContent = ' World!';

// target 요소의 내부, 마지막 자식 뒤에 삽입
target.insertAdjacentElement('beforeend', newElement);

// 결과: <div id="target">Hello<span> World!</span></div>

주의점 및 추가 정보

  1. Element.insertAdjacentElement()는 원본 요소를 이동시키지 않는다. 즉, 삽입될 요소가 이미 DOM에 있으면 그 위치에서 이동되어 새로운 위치에 삽입된다.

  2. 비슷한 메서드로 Element.insertAdjacentHTML()와 Element.insertAdjacentText()가 있다. 각각 HTML 문자열과 텍스트 문자열을 지정된 위치에 삽입하는 데 사용된다.

  3. 대부분의 현대 브라우저에서 잘 지원되지만, 오래된 브라우저에서는 지원되지 않을 수 있다.

Element.insertAdjacentElement() 메서드는 특정 위치에 요소를 정확하게 삽입하고자 할 때 유용하다.

N.insertBefore

Node.insertBefore() 메서드는 DOM의 특정 노드에 다른 노드를 삽입하기 위해 사용된다. 주어진 노드의 참조를 사용하여 다른 노드 앞에 새로운 노드를 삽입한다.

parentNode.insertBefore(newNode, referenceNode);
  • parentNode: newNode가 삽입될 부모 노드이다.
  • newNode: referenceNode 앞에 삽입될 노드이다.
  • referenceNode: 참조 노드로, 이 노드 앞에 newNode가 삽입된다. 만약 null이면, newNode는 부모 노드의 마지막 자식으로 삽입된다.

예제

<ul id="list">
  <li>Item 1</li>
  <li id="referenceItem">Item 2</li>
  <li>Item 3</li>
</ul>
let list = document.getElementById('list');
let referenceItem = document.getElementById('referenceItem');

let newItem = document.createElement('li');
newItem.textContent = 'New Item';

// referenceItem 앞에 newItem을 삽입
list.insertBefore(newItem, referenceItem);

이 예제의 실행 결과, 'New Item'이 'Item 2' 앞에 추가된다.

주의점 및 추가 정보

  • 만약 referenceNode가 parentNode의 자식이 아니라면, DOMException이 발생한다.
  • 이미 DOM의 다른 부분에 newNode가 있으면, insertBefore()를 호출할 때 해당 노드는 원래 위치에서 제거되고 지정된 위치에 삽입된다.

Node.insertBefore()는 노드의 정확한 위치에 새로운 노드를 삽입할 필요가 있을 때 유용하게 사용된다.

N.contains

Node.contains() 메서드는 DOM에서 한 노드가 다른 노드를 포함하는지 여부를 판별하기 위해 사용된다. 특히, 주어진 노드가 다른 노드의 자손 노드인지, 또는 그 노드 자체인지를 확인하는 데 유용하다.

parentNode.contains(childNode);
  • parentNode: 검사할 부모 노드이다.
  • childNode: 포함되는지 확인할 자손 노드이다.

반환 값

  • true: childNode가 parentNode의 자손 노드이거나, childNode와 parentNode가 동일한 노드일 경우
  • false: 그렇지 않은 경우

예제

<div id="parent">
  <div id="child"></div>
</div>
let parent = document.getElementById('parent');
let child = document.getElementById('child');

console.log(parent.contains(child)); // true
console.log(child.contains(parent)); // false
console.log(parent.contains(parent)); // true

주의점 및 추가 정보

  • Node.contains()는 주어진 노드와 그 자손 노드 모두를 고려합니다. 따라서 parentNode.contains(parentNode)는 항상 true를 반환한다.

Node.contains() 메서드는 특정 노드가 다른 노드의 자손 노드인지를 빠르게 확인할 때 유용하다.
이것은 이벤트 위임, 드래그 앤 드롭 구현 등 여러 상황에서 특정 요소의 관계를 판별하는 데 도움이 된다.

N.textContent

Node.textContent 속성은 노드와 그 모든 자손의 텍스트 콘텐츠를 설정하거나 가져오기 위해 사용된다. 이 속성을 사용하면 요소의 모든 자손 중에서 텍스트만을 고려한다. 즉, HTML 마크업이나 다른 요소들은 무시하고 텍스트 콘텐츠만을 고려한다.

특징 및 사용법

  1. 가져오기: Node.textContent를 사용하여 텍스트를 가져올 수 있다.
let element = document.querySelector('#myElement');
console.log(element.textContent);
  1. 설정하기: Node.textContent에 값을 할당하여 텍스트를 설정할 수 있다. 기존의 모든 콘텐츠는 이 새로운 텍스트로 대체된다.
let element = document.querySelector('#myElement');
element.textContent = 'Hello, World!';
  1. HTML 태그는 문자열로 해석된다: textContent를 사용하여 설정된 값에 HTML 태그가 포함되어 있다면, 이 태그들은 문자열로 처리되며 렌더링되지 않는다. 즉, <와 > 문자들은 그대로 화면에 표시된다.
let element = document.querySelector('#myElement');
element.textContent = '<span>Hello, World!</span>';
// 화면에 "<span>Hello, World!</span>" 라는 문자열이 그대로 표시된다.
  1. 성능: textContent는 내부적으로 노드의 모든 자손의 텍스트 콘텐츠를 조작하므로, 큰 DOM 구조에서는 주의하여 사용해야 한다. 큰 DOM 트리에서 textContent를 사용할 때는 성능 저하가 발생할 수 있다.

참고

  • innerText와 비교할 때, textContent는 스타일링이나 숨겨진 텍스트를 고려하지 않는다. 따라서 textContent는 요소의 숨겨진 텍스트까지도 반환한다.
  • 텍스트를 설정할 때 HTML을 렌더링하려면 Element.innerHTML 속성을 사용해야 한다.

요약하면, Node.textContent는 노드의 텍스트 콘텐츠를 빠르게 읽고 쓰기 위한 간단하고 효율적인 방법을 제공한다.

E.innerHTML

Element.innerHTML 속성은 해당 요소의 내부 HTML 콘텐츠를 가져오거나 설정하는 데 사용된다. 이 속성을 사용하면 HTML 마크업을 직접 작성하거나 가져올 수 있다.

특징 및 사용법

  1. 가져오기: 해당 요소의 내부 HTML을 문자열로 반환한다.
let element = document.querySelector('#myElement');
console.log(element.innerHTML);
  1. 설정하기: 해당 요소의 내부 HTML 콘텐츠를 설정한다. 기존의 내용은 새로운 HTML 콘텐츠로 대체된다.
let element = document.querySelector('#myElement');
element.innerHTML = '<span>Hello, World!</span>';

  1. HTML 마크업을 포함한 문자열: innerHTML에 할당된 값이 HTML 태그를 포함하고 있다면, 해당 태그는 실제 HTML 요소로 파싱되고 DOM에 추가된다.

  2. 보안 주의: 외부에서 가져온 데이터를 innerHTML을 사용하여 직접 삽입하는 것은 위험한다. 악의적인 스크립트를 포함하고 있을 가능성이 있기 때문이다. 항상 외부에서 가져온 데이터를 삽입하기 전에 이를 적절히 검증하거나 삽입할 데이터에 대한 신뢰성을 확보해야 한다.

참고

  • Element.textContent와 비교할 때, innerHTML은 HTML 마크업을 포함하는 것을 고려하므로 렌더링된 결과를 보려면 innerHTML을 사용하는 것이 좋다. 반면, textContent는 HTML 마크업을 문자열로 해석하며, 태그 자체를 화면에 표시한다.
  • outerHTML 속성은 해당 요소와 그 내부 콘텐츠 모두를 포함하는 HTML을 가져오거나 설정한다.

요약하면, Element.innerHTML 속성은 요소의 내부 HTML 콘텐츠를 직접 가져오거나 설정하는 데 사용된다. 그러나 보안 상의 문제로 외부 데이터를 직접 삽입할 때는 주의해야 한다.

E.dataset

Element.dataset 속성은 HTML 요소에서 data-* 형식의 사용자 정의 데이터 속성을 읽거나 수정할 수 있도록 도와준다. 이 속성을 사용하여 HTML 요소에 추가 정보를 저장하거나 특정 작업을 수행하기 위한 데이터를 태그할 수 있다.

사용법

  1. HTML에서 data-* 형식의 속성을 사용하여 요소에 사용자 정의 데이터를 추가한다.
<div id="myElement" data-user-id="12345" data-user-name="JohnDoe">...</div>
  1. JavaScript에서 dataset 속성을 사용하여 해당 데이터에 액세스한다.
let element = document.querySelector('#myElement');
console.log(element.dataset.userId);  // "12345"
console.log(element.dataset.userName);  // "JohnDoe"
  1. dataset 속성을 사용하여 사용자 정의 데이터 속성 값을 수정하거나 새로운 데이터 속성을 추가할 수 있다.
element.dataset.userId = "67890";
element.dataset.userAge = "30";

주의점

  • 속성 이름은 camelCase로 변환되어야 한다. 예를 들어, data-user-id는 dataset.userId로, data-user-name은 dataset.userName으로 액세스된다.
  • Element.dataset은 문자열 값만을 반환하거나 허용한다. 복잡한 데이터 구조나 객체를 사용하려면 JSON 형식으로 문자열화하여 저장해야 하며, 이를 파싱하여 사용할 수 있다.
  • Element.dataset은 data-* 속성만을 고려합니다. 다른 속성에는 액세스할 수 없다.

요약하면, Element.dataset 속성은 HTML 요소에 저장된 사용자 정의 데이터 속성 (data-* 형식)에 쉽게 액세스하거나 이를 수정하는 데 유용하다. 이를 통해 웹 페이지의 동작이나 표시에 필요한 추가 정보를 요소에 연결할 수 있다.

E.tagName

Element.tagName 속성은 해당 요소의 태그 이름을 대문자로 반환한다. 이 속성을 사용하여 DOM 요소의 유형(태그 이름)을 식별할 수 있다.

사용법

  1. 기본적인 사용 예시
<div id="myDiv"></div>
let element = document.querySelector('#myDiv');
console.log(element.tagName);  // "DIV"

  1. tagName은 항상 대문자로 반환된다, 즉 HTML 문서에서는 DIV, SPAN 등으로 표시된다. 그러나 XML 또는 XHTML 문서에서는 원래 문서에 지정된 대로 반환될 수 있다.

  2. tagName을 사용하여 요소의 유형을 확인할 수 있다. 예를 들어, 어떤 요소가 div인지 확인하려면 다음과 같이 할 수 있다.

if (element.tagName === 'DIV') {
  console.log('This element is a div.');
}

주의사항

  • tagName은 읽기 전용 속성이므로 값을 설정할 수 없다.
  • tagName과 nodeName 속성은 요소 노드에 대해 동일한 값을 반환한다. 그러나, 두 속성은 다른 유형의 노드에 대해 다른 값을 반환할 수 있다. 요소 노드에서는 대체로 tagName 속성을 사용하는 것이 일반적이다.

요약하면, Element.tagName 속성은 해당 DOM 요소의 태그 이름을 대문자로 반환하는 속성으로, 주로 요소의 유형을 확인하는 데 사용된다.

E.id

Element.id 속성은 해당 HTML 요소의 id 속성 값을 가져오거나 설정한다. 각 HTML 요소의 id는 해당 페이지 내에서 유일해야 하며, 주로 스크립트나 스타일시트에서 특정 요소를 식별하거나 참조하는 데 사용된다.

사용법

  1. 가져오기: 요소의 id 값을 가져온다.
<div id="myDiv">Hello, World!</div>
let element = document.querySelector('#myDiv');
console.log(element.id);  // "myDiv"
  1. 설정하기: 요소의 id 값을 설정한다.
let element = document.createElement('div');
element.id = 'newDiv';
document.body.appendChild(element);

주의사항

  • id 값은 해당 페이지 내에서 유일해야 한다. 같은 id 값을 가진 여러 요소가 있다면, 이는 유효하지 않은 HTML이다. 이러한 경우 document.getElementById()와 같은 메서드는 첫 번째로 일치하는 요소만 반환한다.
  • id 값은 공백을 포함해서는 안 된다.
  • id 값은 문자나 숫자, 그리고 일부 특수문자를 포함할 수 있으나 숫자로 시작해서는 안 된다.

요약하면, Element.id 속성은 해당 요소의 id 속성 값을 가져오거나 설정하는 데 사용되며, 주로 JavaScript나 CSS에서 요소를 식별하거나 참조하기 위해 사용된다.

E.className

Element.className 속성은 해당 HTML 요소의 class 속성 값을 가져오거나 설정하는 데 사용된다. class 속성은 주로 스타일시트에서 스타일 규칙을 적용하거나 JavaScript에서 요소를 찾고 조작하는 데 사용된다. 하나의 요소는 여러 클래스를 가질 수 있으며, 각 클래스는 공백으로 구분된다.

사용법

  1. 가져오기: 요소의 class 값을 가져온다.
<div class="container active">Hello, World!</div>
let element = document.querySelector('.container');
console.log(element.className);  // "container active"
  1. 설정하기: 요소의 class 값을 설정한다. 이렇게 하면 기존 클래스는 새 값으로 완전히 대체된다.
let element = document.createElement('div');
element.className = 'newContainer highlighted';
  1. 클래스 추가/제거/토글: 요소에 클래스를 추가, 제거, 토글하려면 Element.classList 메서드(add, remove, toggle 등)를 사용하는 것이 더 효과적이다.

주의사항

  • Element.className은 요소의 모든 클래스를 포함하는 단일 문자열을 반환하므로, 특정 클래스를 확인하거나 조작하려면 문자열 조작이 필요하다.
  • 요소에 여러 클래스가 있을 경우, className은 이를 공백으로 구분된 하나의 문자열로 반환한다.
  • 복잡한 클래스 조작 작업을 위해 Element.classList API를 사용하는 것이 좋다. 이 API는 클래스의 추가, 제거, 확인 및 토글 등의 작업을 간편하게 수행할 수 있게 해준다.

요약하면, Element.className 속성은 해당 요소의 class 속성 값을 가져오거나 설정하는 데 사용되며, 주로 스타일링 또는 요소의 조작 및 참조를 위해 사용된다.

E.classList

Element.classList는 요소의 클래스 속성에 액세스하고 조작하기 위한 편리한 인터페이스를 제공하는 읽기 전용 속성이다. DOMTokenList 객체의 형태로 반환되며, 여러 메서드를 포함하고 있어 클래스 목록을 쉽게 관리할 수 있다.

주요 메서드

  1. add: 하나 이상의 클래스를 요소에 추가한다.
element.classList.add('active', 'highlighted');
  1. remove: 하나 이상의 클래스를 요소에서 제거한다.
element.classList.remove('inactive', 'dimmed');
  1. toggle: 클래스가 요소에 있으면 제거하고, 없으면 추가한다. 또한, 두 번째 매개변수를 사용하여 클래스의 존재 여부를 강제할 수 있다.
element.classList.toggle('active');  // 클래스의 존재에 따라 추가 또는 제거
element.classList.toggle('active', true);  // 클래스가 반드시 존재하도록 강제
  1. contains: 요소가 특정 클래스를 가지고 있는지 확인한다.
if (element.classList.contains('active')) {
  // 'active' 클래스를 가진 경우의 작업
}
  1. replace: 기존 클래스를 새 클래스로 교체한다.
element.classList.replace('oldClass', 'newClass');

주의사항

  • Element.classList는 읽기 전용 속성이지만, 반환된 DOMTokenList 객체의 메서드를 사용하여 내용을 수정할 수 있다.
  • 직접적으로 classList 객체에 항목을 추가하거나 제거할 수 없다. 위에 언급된 메서드를 사용해야 한다.

요약하면, Element.classList는 요소의 클래스를 관리하기 위한 강력하고 유연한 API를 제공한다. 클래스를 추가, 제거, 토글하거나 확인하는 작업을 간단하게 수행할 수 있다.

E.style

Element.style 속성은 요소의 style 속성에 직접 액세스하고 조작하기 위한 인터페이스를 제공한다. 이 속성을 사용하여 요소의 인라인 스타일을 동적으로 변경할 수 있다.

Element.style은 CSSStyleDeclaration 객체를 반환한다. 이 객체는 각 CSS 속성에 대해 개별적인 속성을 포함하고 있다.

사용법

  1. 스타일 설정하기
let element = document.querySelector('div');
element.style.backgroundColor = 'red'; // 배경색을 빨간색으로 설정
element.style.width = '100px'; // 너비를 100픽셀로 설정
  1. 스타일 가져오기: Element.style 속성을 사용하여 인라인 스타일 값을 가져올 수 있다. 그러나 외부 CSS 파일이나 <style> 태그에서 정의된 스타일 값을 가져오려면 window.getComputedStyle() 메서드를 사용해야 한다.
let color = element.style.backgroundColor;
  1. 스타일 제거하기
element.style.backgroundColor = ''; // 배경색 스타일 제거

주의사항

  • Element.style은 오로지 요소의 인라인 스타일만 액세스하고 조작한다. 즉, <div style="color: red;"></div>와 같이 HTML 요소 내부의 style 속성에 직접 정의된 스타일만 액세스할 수 있다.
  • CSS 속성 이름에 하이픈(-)이 포함되어 있을 경우, JavaScript에서는 카멜케이스로 변환하여 사용해야 한다. 예를 들어, background-color는 backgroundColor로 접근하고 조작한다.
  • window.getComputedStyle(element)를 사용하여 요소의 최종 계산된 스타일 값을 가져올 수 있다. 이 메서드는 인라인 스타일 뿐만 아니라 외부 CSS 파일이나 <style> 태그에서 정의된 스타일도 포함한 값들을 반환한다.

요약하면, Element.style 속성은 요소의 인라인 스타일을 동적으로 조회하고 조작하기 위한 방법을 제공한다.

window.getComputedStyle

window.getComputedStyle() 메서드는 특정 요소의 모든 CSS 속성 값에 대한 정보를 포함하는 객체를 반환한다. 이 메서드는 주로 요소에 적용된 최종적인 스타일 값을 알고자 할 때 사용되며, 이 값을 이용해 요소의 레이아웃, 디자인, 애니메이션 등을 정확하게 계산할 수 있다.

기본 사용법

let element = document.querySelector('#myElement');
let styles = window.getComputedStyle(element);

console.log(styles.backgroundColor); // 요소의 배경색 값을 출력합니다.

특징 및 주의사항

  1. 읽기 전용: getComputedStyle()로 반환된 스타일 객체는 읽기 전용이다. 이 객체를 통해 스타일 값을 변경할 수 없다. 스타일을 변경하려면 element.style 프로퍼티를 사용해야 한다.

  2. 최종 스타일 값: 이 메서드는 요소에 적용된 모든 CSS 규칙과 스타일 값을 계산하여 최종적으로 적용되는 값들을 반환한다. 인라인 스타일, 외부 CSS, 그리고 <style> 태그 내의 스타일 규칙 등 모든 출처의 스타일을 포함한다.

  3. 단위: getComputedStyle()는 대부분의 CSS 속성 값에 대해 픽셀(px) 단위 또는 해당 속성에 적합한 단위를 사용하여 값을 반환한다.

  4. 카멜케이스: getComputedStyle()를 사용할 때도 CSS 속성의 이름은 JavaScript의 카멜케이스 방식으로 접근해야 한다. 예를 들어, CSS의 font-size 속성은 fontSize로 접근한다.

  5. 가상 요소 스타일: getComputedStyle()는 두 번째 인자로 가상 요소(pseudo-element)를 지정할 수 있다. 이를 통해, 예를 들어 ::before나 ::after와 같은 가상 요소의 스타일도 조회할 수 있다.

let beforeStyles = window.getComputedStyle(element, '::before');
console.log(beforeStyles.content);

요약하면, window.getComputedStyle()는 요소의 최종적으로 적용된 스타일 값을 조회하는 데 사용되는 메서드로, 모든 CSS 속성 값에 대한 상세 정보를 제공한다.

E.getAttribute, E.setAttribute

getAttribute()와 setAttribute()는 DOM 요소의 속성을 각각 조회하고 설정하는 데 사용되는 메서드이다.

E.getAttribute():

  • 기능: 주어진 속성 이름의 값을 조회한다.
  • 문법: element.getAttribute(attributeName)
    • attributeName: 가져오려는 속성의 이름이다.
  • 반환값: 해당 속성의 값이 반환된다. 속성이 없으면 null을 반환한다.

예시

let anchor = document.querySelector('a');
let hrefValue = anchor.getAttribute('href'); // <a> 태그의 href 속성 값을 가져온다.

E.setAttribute()

  • 기능: 주어진 속성 이름에 대한 값을 설정한다. 해당 속성이 이미 존재하면 값을 덮어쓴다. 속성이 없으면 새로 생성한다.
  • 문법: element.setAttribute(attributeName, value)
    • attributeName: 설정하려는 속성의 이름이다.
    • value: 설정하려는 속성의 값이다.

예시

let anchor = document.querySelector('a');
anchor.setAttribute('target', '_blank'); // <a> 태그의 target 속성 값을 '_blank'로 설정한다.

주의사항

  1. 속성 이름의 대소문자: DOM에서 속성 이름은 대소문자를 구별하지 않는다. 그러나 일관성을 유지하기 위해 주로 소문자를 사용하는 것이 좋다.

  2. 보이지 않는 속성도 조회/설정 가능: HTML에서 보이지 않는 속성 (예: 사용자 정의 데이터 속성 등)도 getAttribute() 및 setAttribute()를 사용하여 조회 및 설정할 수 있다.

  3. 속성 vs. 프로퍼티: DOM 요소의 속성(attribute)과 프로퍼티(property)는 다를 수 있다. 특히 입력 요소의 value와 같은 일부 속성은 초기 값을 나타내는 반면, JavaScript 객체 프로퍼티는 현재 값을 나타낸다. 이러한 차이점에 주의하면서 작업하는 것이 중요하다.

요약하면, getAttribute()는 DOM 요소의 속성 값을 조회하는 데 사용되며, setAttribute()는 해당 값을 설정하는 데 사용된다. 이 두 메서드는 DOM 조작에서 중요한 역할을 한다.

E.hasAttribute, E.removeAttribute

hasAttribute()와 removeAttribute()는 DOM 요소의 속성을 조작하기 위한 메서드이다.

E.hasAttribute()

  • 기능: 요소가 주어진 속성을 가지고 있는지 여부를 확인한다.
  • 문법: element.hasAttribute(attributeName)
    • attributeName: 확인하려는 속성의 이름이다.
  • 반환값: 만약 해당 요소가 주어진 속성을 가지고 있으면 true를, 그렇지 않으면 false를 반환한다.
let anchor = document.querySelector('a');
if (anchor.hasAttribute('href')) {
  console.log('The anchor has an href attribute.');
}

E.removeAttribute()

  • 기능: 주어진 속성을 요소에서 제거한다.
  • 문법: element.removeAttribute(attributeName)
    • attributeName: 제거하려는 속성의 이름이다.

예시

let anchor = document.querySelector('a');
anchor.removeAttribute('target'); // <a> 태그의 target 속성을 제거한다.

주의사항

  1. 대소문자: DOM에서 속성 이름은 대소문자를 구별하지 않는다. 그러나 일관성을 유지하기 위해 소문자를 사용하는 것이 좋다.

  2. removeAttribute의 효과: removeAttribute() 메서드를 사용하여 속성을 제거하면, 해당 요소에서 해당 속성과 관련된 기본 동작이나 스타일링도 사라질 수 있다.

  3. 속성의 존재: hasAttribute()는 속성의 존재만 확인한다. 속성의 값이 무엇인지는 고려하지 않는다. 값을 확인하려면 getAttribute()를 사용해야 한다.

요약하면, hasAttribute()는 요소가 특정 속성을 가지고 있는지 확인하는 데 사용되며, removeAttribute()는 해당 속성을 요소에서 제거하는 데 사용된다. 이 두 메서드는 DOM 요소의 속성을 조작할 때 유용하다.

profile
Shy
초보개발자. 백엔드 지망. 2024년 9월 취업 예정
이전 포스트

[JS] 4. 표준 내장 객체(2)

다음 포스트

[Node.JS로 웹 개발하기] 1. 웹 서버 만들기

0개의 댓글