[JavaScript] Document 정의 및 사용 방법

 

 

document

웹 페이지의 문서 객체 모델(Document Object Model, DOM)을 나타내는 JavaScript의 내장 객체 중 하나

 

HTML 문서의 구조를 표현하고, JavaScript를 통해 이 구조에 접근하고 조작할 수 있게 해주는 인터페이스를 제공

 

웹 페이지의 전체 문서를 나타내며, 해당 문서 내의 요소들에 접근하고 조작할 수 있는 다양한 메서드와 속성을 제공

 

JavaScript로 HTML 문서를 동적으로 조작

 

 

 

---

* 요소 선택

document.getElementById( )

지정된 ID를 가진 요소를 선택

var myElement = document.getElementById('myId');

 

 

document.getElementsByClassName(  )

지정된 클래스를 가진 모든 요소를 선택

var myElements = document.getElementsByClassName('myClass');

 

 

document.getElementsByTagName(  )

지정된 태그 이름을 가진 모든 요소를 선택

ar myParagraphs = document.getElementsByTagName('p');

 

 

document.querySelector(  )

document.querySelectorAll(  )

 

CSS 선택자를 사용하여 요소를 선택

var myElement = document.querySelector('#myId'); // ID 선택
var myElements = document.querySelectorAll('.myClass'); // 클래스 선택

 

 

---

요소 조작

innerHTML 

요소의 내부 HTML 콘텐츠를 가져오거나 설정

myElement.innerHTML = '새로운 내용';

 

 

style

지정된 클래스를 가진 모든 요소를 선택

myElement.style.color = 'red';

 

 

appendChild(  )

removeChild(  )

 

요소를 추가하거나 제거

var newElement = document.createElement('div');
myElement.appendChild(newElement); // 자식 요소 추가
myElement.removeChild(newElement); // 자식 요소 제거