JavaScript DOM에 대한 이해

 

 

개요

JavaScript는 Document Object Model (DOM)을 통해 HTML 문서의 요소들을 조작할 수 있습니다. DOM은 웹 페이지의 구조를 트리 형태로 표현하고, 각 요소에 대한 접근과 수정을 가능하게 합니다. 이번 글에서는 DOM의 다양한 기능과 주요 메소드에 대해 알아보겠습니다.

1. getElementById

getElementById 메소드는 주어진 id 속성 값에 해당하는 요소를 가져옵니다.

const element = document.getElementById('myElement');

위의 코드에서 getElementById를 사용하여 'myElement'라는 id를 가진 요소를 가져옵니다.

2. getElementsByTagName

getElementsByTagName 메소드는 주어진 태그 이름에 해당하는 모든 요소를 가져옵니다.

const elements = document.getElementsByTagName('div');

위의 코드에서 getElementsByTagName을 사용하여 'div' 태그를 가진 모든 요소를 가져옵니다.

3. getElementsByClassName

getElementsByClassName 메소드는 주어진 클래스 이름에 해당하는 모든 요소를 가져옵니다.

const elements = document.getElementsByClassName('myClass');

위의 코드에서 getElementsByClassName을 사용하여 'myClass'라는 클래스를 가진 모든 요소를 가져옵니다.

4. querySelector

querySelector 메소드는 주어진 CSS 선택자에 해당하는 첫 번째 요소를 가져옵니다.

const element = document.querySelector('#myElement');

위의 코드에서 querySelector를 사용하여 id가 'myElement'인 첫 번째 요소를 가져옵니다.

5. querySelectorAll

querySelectorAll 메소드는 주어진 CSS 선택자에 해당하는 모든 요소를 가져옵니다.

const elements = document.querySelectorAll('.myClass');

위의 코드에서 querySelectorAll을 사용하여 클래스가 'myClass'인 모든 요소를 가져옵니다.

6. innerHTML

innerHTML 속성은 요소의 내부 HTML 코드를 가져오거나 설정합니다.

const element = document.getElementById('myElement');
console.log(element.innerHTML);

위의 코드에서 innerHTML을 사용하여 'myElement'의 내부 HTML 코드를 가져와서 콘솔에 출력합니다.

7. textContent

textContent 속성은 요소의 텍스트 내용을 가져오거나 설정합니다.

const element = document.getElementById('myElement');
console.log(element.textContent);

위의 코드에서 textContent를 사용하여 'myElement'의 텍스트 내용을 가져와서 콘솔에 출력합니다.

8. innerText

innerText 속성은 요소의 텍스트 내용을 가져오거나 설정합니다. innerText는 CSS로 숨겨진 요소의 내용을 가져오지 않습니다.

const element = document.getElementById('myElement');
console.log(element.innerText);

위의 코드에서 innerText를 사용하여 'myElement'의 텍스트 내용을 가져와서 콘솔에 출력합니다.

9. getAttribute

getAttribute 메소드는 요소의 특정 속성 값을 가져옵니다.

const element = document.getElementById('myElement');
const value = element.getAttribute('src');

위의 코드에서 getAttribute를 사용하여 'myElement'의 'src' 속성 값을 가져옵니다.

10. setAttribute

setAttribute 메소드는 요소의 특정 속성 값을 설정합니다.

const element = document.getElementById('myElement');
element.setAttribute('src', 'image.jpg');

위의 코드에서 setAttribute를 사용하여 'myElement'의 'src' 속성 값을 'image.jpg'로 설정합니다.

11. style

style 속성을 사용하여 요소의 스타일을 변경할 수 있습니다.

const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '20px';

위의 코드에서 .style을 사용하여 'myElement'의 글자 색상을 빨간색으로, 글자 크기를 20px로 변경합니다.

12. classList

classList 속성은 요소의 클래스 목록을 가져오고 추가/제거/토글할 수 있습니다.

const element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');

위의 코드에서 classList를 사용하여 'myElement'에 'newClass'를 추가하고 'oldClass'를 제거한 뒤, 'active' 클래스의 토글 동작을 수행합니다.

13. add / removeChild

addChild 메소드는 부모 요소에 자식 요소를 추가합니다. removeChild 메소드는 부모 요소에서 자식 요소를 제거합니다.

const parent

 = document.getElementById('parentElement');
const child = document.getElementById('childElement');

parent.appendChild(child); // 자식 요소 추가
parent.removeChild(child); // 자식 요소 제거

위의 코드에서 addChild를 사용하여 'parentElement'에 'childElement'를 추가한 뒤, removeChild를 사용하여 다시 제거합니다.

14. Toggle

Toggle 메소드는 클래스의 추가와 제거를 번갈아가며 수행합니다.

const element = document.getElementById('myElement');
element.classList.toggle('active');

위의 코드에서 toggle을 사용하여 'myElement'에 'active' 클래스를 토글합니다.

15. contains

contains 메소드는 요소가 특정 클래스를 포함하는지 여부를 확인합니다.

const element = document.getElementById('myElement');
const hasClass = element.classList.contains('myClass');
console.log(hasClass);

위의 코드에서 contains를 사용하여 'myElement'가 'myClass'를 포함하는지 여부를 확인하고, 그 결과를 콘솔에 출력합니다.

16. parentElement

parentElement 속성은 요소의 부모 요소를 가져옵니다.

const element = document.getElementById('myElement');
const parent = element.parentElement;

위의 코드에서 parentElement를 사용하여 'myElement'의 부모 요소를 가져옵니다.

17. childElementCount / children

childElementCount 속성은 요소의 자식 요소의 개수를 반환합니다. children 속성은 자식 요소의 목록을 반환합니다.

const parent = document.getElementById('parentElement');
const childCount = parent.childElementCount;
const children = parent.children;

위의 코드에서 childElementCount를 사용하여 'parentElement'의 자식 요소 개수를 가져오고, children을 사용하여 자식 요소의 목록을 가져옵니다.

18. PreviousSibling / nextSibling

PreviousSibling 속성은 이전 형제 요소를, nextSibling 속성은 다음 형제 요소를 가져옵니다.

const element = document.getElementById('myElement');
const previousSibling = element.previousSibling;
const nextSibling = element.nextSibling;

위의 코드에서 PreviousSibling을 사용하여 'myElement'의 이전 형제 요소를 가져오고, nextSibling을 사용하여 다음 형제 요소를 가져옵니다.

19. Append / AppendChild / prepend

append와 appendChild 메소드는 요소의 자식 요소를 추가합니다. prepend 메소드는 첫 번째 자식 요소로 추가합니다.

const parent = document.getElementById('parentElement');
const child = document

.getElementById('childElement');

parent.append(child); // 마지막 자식 요소로 추가
parent.appendChild(child); // 마지막 자식 요소로 추가
parent.prepend(child); // 첫 번째 자식 요소로 추가

위의 코드에서 append와 appendChild를 사용하여 'parentElement'의 마지막 자식 요소로 'childElement'를 추가하고, prepend를 사용하여 첫 번째 자식 요소로 추가합니다.

20. createElement

createElement 메소드를 사용하여 새로운 요소를 생성합니다.

const newElement = document.createElement('div');
newElement.textContent = '새로운 요소';

const parent = document.getElementById('parentElement');
parent.appendChild(newElement);

위의 코드에서 createElement를 사용하여 'div' 요소를 생성하고, textContent를 설정한 뒤, appendChild를 사용하여 'parentElement'에 추가합니다.

결론

JavaScript의 DOM은 HTML 문서의 요소들을 동적으로 조작할 수 있는 강력한 도구입니다. getElementById, getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll 등의 메소드를 사용하여 요소에 접근하고, innerHTML, textContent, innerText 등을 통해 내용을 수정하며, getAttribute, setAttribute를 사용하여 속성을 조작할 수 있습니다. 또한, 클래스 관리를 위해 classList를 사용하고, 요소의 구조를 변경하기 위해 append, appendChild, prepend, removeChild 등의 메소드를 활용할 수 있습니다.

더 자세한 정보는 MDN에서 확인하실 수 있습니다.