[JavaScript] Document 정의 및 사용 방법
2023. 12. 22. 20:04ㆍHTML + CSS+JS
반응형
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); // 자식 요소 제거
반응형
'HTML + CSS+JS' 카테고리의 다른 글
[HTML]header, footer / fragments 이용하여 layouts 분리하기 (0) | 2023.12.23 |
---|---|
[JavaScript] 이벤트 리스너 종류 (1) | 2023.12.22 |
[HTML/CSS/JS] 역할과 기능 (1) | 2023.12.22 |