JavaScript DOM Elements
JavaScript DOM Elements: DOM 요소의 이해와 조작
JavaScript DOM Elements는 HTML 문서 내의 각 요소를 나타내며, 이를 통해 웹 페이지의 구조를 정의하고, 스타일을 적용하며, 사용자와 상호작용하는 기능을 제공합니다. DOM 요소를 조작하는 것은 웹 애플리케이션의 동적인 부분을 만드는 데 필수적입니다. 이 가이드는 DOM 요소의 개념과 다양한 조작 방법에 대해 설명합니다.
1. DOM 요소란?
DOM 요소는 HTML 문서에서 태그로 정의된 모든 구성 요소를 의미합니다. 각 요소는 DOM 트리의 **노드(node)**로 표현되며, JavaScript를 사용하여 선택, 수정, 추가, 삭제할 수 있습니다. 일반적으로 사용되는 DOM 요소는 다음과 같습니다:
- HTML 요소:
<div>,<p>,<h1>,<ul>,<li>등 - 속성:
id,class,src,href등 - 텍스트: 요소 내의 문자열 콘텐츠
2. DOM 요소 선택 방법
DOM 요소를 조작하기 위해서는 먼저 해당 요소를 선택해야 합니다. JavaScript는 다양한 메서드를 제공하여 DOM 요소를 선택할 수 있습니다.
2.1. getElementById()
특정 ID를 가진 요소를 선택합니다.
<p id="demo">Hello, World!</p>
<script>
const element = document.getElementById('demo');
console.log(element.textContent); // Hello, World!
</script>
2.2. getElementsByClassName()
특정 클래스를 가진 모든 요소를 선택하여 HTMLCollection 형태로 반환합니다.
<p class="example">Paragraph 1</p>
<p class="example">Paragraph 2</p>
<script>
const elements = document.getElementsByClassName('example');
console.log(elements[0].textContent); // Paragraph 1
</script>
2.3. getElementsByTagName()
특정 태그를 가진 모든 요소를 선택합니다.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
const items = document.getElementsByTagName('li');
console.log(items.length); // 2
</script>
2.4. querySelector()와 querySelectorAll()
CSS 선택자를 사용하여 요소를 선택합니다.
querySelector(): 첫 번째 일치하는 요소 반환querySelectorAll(): 모든 일치하는 요소를 반환
<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>
3. DOM 요소 조작
선택한 DOM 요소의 속성, 텍스트, 스타일 등을 변경할 수 있습니다.
3.1. 텍스트 콘텐츠 변경
- *
textContent*를 사용하여 요소의 텍스트를 읽거나 수정할 수 있습니다.
<p id="demo">Original text</p>
<script>
const element = document.getElementById('demo');
element.textContent = 'Updated text'; // 텍스트 변경
</script>
3.2. HTML 내용 변경
- *
innerHTML*를 사용하여 요소의 HTML 콘텐츠를 읽거나 수정할 수 있습니다.
<div id="content">This is the original content</div>
<script>
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '<strong>Updated content</strong>'; // HTML 콘텐츠 변경
</script>
3.3. 속성 변경
- *
setAttribute()*를 사용하여 요소의 속성을 설정할 수 있습니다.
<img id="myImage" src="old_image.jpg" alt="Old Image">
<script>
const image = document.getElementById('myImage');
image.setAttribute('src', 'new_image.jpg'); // src 속성 변경
</script>
3.4. 스타일 변경
style 프로퍼티를 사용하여 요소의 인라인 스타일을 변경할 수 있습니다.
<p id="demo">Styled text</p>
<script>
const element = document.getElementById('demo');
element.style.color = 'blue'; // 텍스트 색상 변경
element.style.fontSize = '20px'; // 텍스트 크기 변경
</script>
4. DOM 요소 생성 및 삭제
JavaScript를 사용하여 새로운 DOM 요소를 생성하거나 기존 요소를 삭제할 수 있습니다.
4.1. 요소 생성
createElement() 메서드를 사용하여 새로운 요소를 생성합니다.
<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>
4.2. 요소 삭제
remove() 메서드를 사용하여 선택한 요소를 삭제할 수 있습니다.
<p id="demo">This paragraph will be removed.</p>
<script>
const element = document.getElementById('demo');
element.remove(); // 요소 삭제
</script>
5. DOM 이벤트 처리
DOM 요소에 이벤트 리스너를 추가하여 사용자의 상호작용을 처리할 수 있습니다.
5.1. 이벤트 리스너 추가
addEventListener() 메서드를 사용하여 특정 이벤트가 발생했을 때 실행할 함수를 등록합니다.
<button id="myButton">Click Me!</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button clicked!');
});
</script>
- 이 코드에서는 버튼이 클릭될 때마다 알림 창이 표시됩니다.
6. DOM 트리 탐색
DOM 트리에서 부모, 자식, 형제 노드를 탐색할 수 있는 방법을 제공합니다.
6.1. 주요 DOM 탐색 메서드
parentNode: 부모 노드에 접근childNodes: 자식 노드의 리스트firstChild,lastChild: 첫 번째/마지막 자식 노드nextSibling,previousSibling: 다음/이전 형제 노드
6.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 Elements는 HTML 문서 내의 요소를 동적으로 조작하는 강력한 도구입니다. DOM 요소를 선택하고, 조작하고, 생성 및 삭제하는 다양한 메서드를 제공하여 동적이고 상호작용적인 웹 페이지를 구축할 수 있습니다.
- DOM 요소 선택 메서드:
getElementById(),querySelector(),getElementsByClassName()등을 사용하여 특정 요소에 접근합니다. - DOM 요소 조작 메서드:
textContent,innerHTML,setAttribute()등을 사용하여 텍스트와 속성을 변경합니다. - DOM 요소 생성 및 삭제:
createElement()와remove()를 사용해 DOM 요소를 추가하거나 삭제합니다. - DOM 이벤트 처리:
addEventListener()를 사용하여 사용자 상호작용을 감지하고 처리합니다. - DOM 탐색:
parentNode,childNodes,nextSibling등을 사용하여 요소 간의 관계를 탐색합니다.
DOM 요소를 잘 활용하면 동적이고 상호작용적인 웹 애플리케이션을 쉽게 만들 수 있습니다.