-
JavaScript DOM에 대한 이해Front-end/Javascript 2023. 5. 21. 22:19반응형
개요
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에서 확인하실 수 있습니다.
반응형'Front-end > Javascript' 카테고리의 다른 글
자바스크립트 반복문 (0) 2023.05.18 뉴스와 날씨 정보를 가져오는 세 가지 방법 (0) 2023.05.17 JavaScript의 split() 메서드 (0) 2023.05.15 프로토타입과 프로토타입 체인 (0) 2023.05.11 객체 지향 프로그래밍(OOP)에 대한 이해 (0) 2023.05.11