▶ JavaScript HTML DOM

JavaScript DOM Methods

JavaScript DOM Methods: 주요 메서드와 사용법

JavaScript DOM(Document Object Model) 메서드는 웹 페이지의 HTML 요소를 동적으로 조작하는 데 사용됩니다. DOM 메서드를 사용하면 요소 선택, 콘텐츠 변경, 요소 생성 및 삭제, 이벤트 처리와 같은 다양한 작업을 수행할 수 있습니다. DOM 메서드를 통해 웹 페이지를 동적으로 만들고, 사용자와 상호작용할 수 있는 웹 애플리케이션을 구현할 수 있습니다.

이 가이드는 JavaScript DOM 메서드의 기본 개념과 주요 사용법을 설명합니다.

1. DOM 요소 선택 메서드

DOM에서 HTML 요소를 선택하는 메서드는 웹 페이지의 특정 요소에 접근하고, 이를 조작하는 첫 번째 단계입니다.

1.1. `getElementById()`

*getElementById()*는 ID 속성을 기준으로 단일 요소를 선택합니다. 선택한 요소에 접근하여 속성, 텍스트, 스타일 등을 변경할 수 있습니다.

<p id="demo">Hello World</p>

<script>
  const element = document.getElementById('demo');
  console.log(element.textContent);  // Hello World
</script>

1.2. `getElementsByClassName()`

*getElementsByClassName()*는 클래스 이름을 기준으로 HTMLCollection을 반환합니다. 선택된 요소들은 배열처럼 다루며, 각각의 요소에 접근해 조작할 수 있습니다.

<p class="example">First paragraph</p>
<p class="example">Second paragraph</p>

<script>
  const elements = document.getElementsByClassName('example');
  console.log(elements[0].textContent);  // First paragraph
  console.log(elements[1].textContent);  // Second paragraph
</script>

1.3. `getElementsByTagName()`

*getElementsByTagName()*는 태그 이름을 기준으로 HTMLCollection을 반환합니다. 특정 태그의 모든 요소를 선택하고 조작할 수 있습니다.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const items = document.getElementsByTagName('li');
  console.log(items[0].textContent);  // Item 1
</script>

1.4. `querySelector()`와 `querySelectorAll()`

querySelector(): CSS 선택자를 사용해 첫 번째 일치하는 요소를 선택합니다.
querySelectorAll(): CSS 선택자를 사용해 모든 일치하는 요소를 NodeList로 반환합니다.

<p class="example">First paragraph</p>
<p class="example">Second paragraph</p>

<script>
  const firstPara = document.querySelector('.example');
  console.log(firstPara.textContent);  // First paragraph

  const allParas = document.querySelectorAll('.example');
  allParas.forEach(para => console.log(para.textContent));
  // First paragraph
  // Second paragraph
</script>

2. DOM 요소 조작 메서드

선택한 DOM 요소의 콘텐츠나 속성, 스타일을 변경하는 메서드를 사용하면 웹 페이지의 동적 업데이트가 가능합니다.

2.1. `textContent`

*textContent*는 요소의 텍스트 콘텐츠를 읽거나 수정할 수 있는 속성입니다. HTML 태그는 포함되지 않고 순수 텍스트만 처리합니다.

<p id="demo">Original text</p>

<script>
  const element = document.getElementById('demo');
  element.textContent = 'Updated text';  // 텍스트 변경
</script>

2.2. `innerHTML`

*innerHTML*은 요소의 HTML 콘텐츠를 읽거나 수정할 수 있습니다. HTML 태그를 포함한 콘텐츠를 변경할 수 있어, 구조나 스타일을 변경할 때 유용합니다.

<div id="content">This is the original content</div>

<script>
  const contentDiv = document.getElementById('content');
  contentDiv.innerHTML = '<strong>Updated content</strong>';  // HTML 콘텐츠 변경
</script>

2.3. `setAttribute()`와 `getAttribute()`

setAttribute(): 요소의 속성 값을 설정합니다.
getAttribute(): 요소의 속성 값을 가져옵니다.

<img id="myImage" src="old_image.jpg" alt="Old Image">

<script>
  const image = document.getElementById('myImage');
  image.setAttribute('src', 'new_image.jpg');  // src 속성 변경
  image.setAttribute('alt', 'New Image');      // alt 속성 변경
</script>

2.4. `style` 프로퍼티

style 프로퍼티를 사용하면 요소의 인라인 스타일을 변경할 수 있습니다.

<p id="demo">Styled text</p>

<script>
  const element = document.getElementById('demo');
  element.style.color = 'blue';    // 텍스트 색상 변경
  element.style.fontSize = '20px'; // 텍스트 크기 변경
</script>

3. DOM 요소 생성 및 삭제 메서드

JavaScript로 동적으로 요소를 추가하거나 삭제할 수 있습니다. 이를 통해 실시간 업데이트가 필요한 웹 페이지를 구현할 수 있습니다.

3.1. `createElement()`와 `appendChild()`

createElement(): 새로운 HTML 요소를 생성합니다.
appendChild(): 생성된 요소를 DOM에 추가합니다.

<div id="container"></div>

<script>
  const container = document.getElementById('container');
  const newPara = document.createElement('p');  // 새로운 <p> 요소 생성
  newPara.textContent = 'This is a new paragraph';
  container.appendChild(newPara);  // <div> 안에 추가
</script>

3.2. `remove()`와 `removeChild()`

remove(): 선택한 요소를 삭제합니다.
removeChild(): 부모 요소에서 자식 요소를 삭제합니다.

<p id="demo">This paragraph will be removed.</p>

<script>
  const element = document.getElementById('demo');
  element.remove();  // 요소 삭제
</script>

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
  const list = document.getElementById('list');
  const firstItem = list.querySelector('li');
  list.removeChild(firstItem);  // 첫 번째 <li> 삭제
</script>

4. DOM 이벤트 처리 메서드

JavaScript DOM 이벤트 처리 메서드를 사용하면 사용자 상호작용을 감지하고 특정 작업을 수행할 수 있습니다.

4.1. `addEventListener()`

*addEventListener()*는 DOM 요소에 이벤트 리스너를 추가하여, 클릭, 키보드 입력, 마우스 이동 등 다양한 이벤트를 처리할 수 있습니다.

<button id="myButton">Click me</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', () => {
    alert('Button clicked!');
  });
</script>

click, keydown, **mouseover*와 같은 이벤트를 감지할 수 있습니다.

5. DOM 트리 탐색 메서드

DOM 트리에서 부모, 자식, 형제 노드로 요소를 탐색할 수 있는 다양한 메서드가 있습니다.

5.1. 주요 DOM 탐색 메서드

parentNode: 부모 노드
childNodes, children: 자식 노드 리스트
firstChild, lastChild: 첫 번째/마지막 자식 노드
nextSibling, previousSibling: 다음/이전 형제 노드

5.2. DOM 탐색 예시

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  const list = document.getElementById('myList');
  const firstItem = list.firstChild;  // 첫 번째 자식 요소
  console.log(firstItem.textContent);  // Item 1

  const nextItem = firstItem.nextSibling;  // 다음 형제 노드
  console.log(nextItem.textContent);  // Item 2

</script>

요약

JavaScript DOM 메서드는 HTML 문서를 동적으로 조작, 탐색, 이벤트 처리할 수 있게 해줍니다. DOM 메서드를 잘 활용하면 동적이고 상호작용적인 웹 페이지를 쉽게 만들 수 있습니다.

DOM 요소 선택 메서드: getElementById(), querySelector() 등을 사용하여 요소에 접근합니다.
DOM 요소 조작 메서드: textContent, innerHTML, **setAttribute()*를 사용해 텍스트, HTML 콘텐츠, 속성을 변경합니다.
DOM 요소 생성 및 삭제: createElement(), appendChild(), **remove()*를 사용해 DOM 트리에 요소를 추가하거나 삭제할 수 있습니다.
DOM 이벤트 처리 메서드: **addEventListener()*를 사용하여 클릭, 키보드 입력 등의 이벤트를 처리합니다.
DOM 트리 탐색: parentNode, childNodes, nextSibling 등을 사용하여 요소 간의 관계를 탐색합니다.

DOM 메서드는 동적인 웹 애플리케이션을 구축하는 핵심 도구로, 웹 페이지의 콘텐츠를 실시간으로 변경하고 사용자 상호작용을 처리하는 데 필수적입니다.

코딩 스쿨 JavaScript