고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
오늘은 오전에 병원을 가야해서 공가 신청을 했다.
그래도 공부는 해야지!!
내일 페어 활동에 지장 가지 않도록 조금이라도 해놔야겠다.
DOM
Document Object Model의 약어로, 문서 객체 모델을 의미합니다.
이는 HTML, XHTML, XML 등의 마크업 언어로 작성된 문서를 트리 구조로 분석하고, 각 요소들을 객체로 표현하여 이들을 다루는 프로그래밍 인터페이스를 제공하는 표준입니다.
즉, DOM은 웹 페이지나 문서를 객체 지향적으로 다룰 수 있게끔 하는 모델로, 각 HTML 요소들을 객체로 표현하여 이들을 조작하거나 상호작용할 수 있도록 합니다. 예를 들어, DOM을 이용해 HTML 요소의 속성 값을 변경하거나, 새로운 요소를 동적으로 추가할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>DOM Example</h1>
<p id="text">Click the button to highlight the text</p>
<button id="button">Highlight</button>
<script>
const button = document.querySelector('#button');
const text = document.querySelector('#text');
button.addEventListener('click', function() {
text.classList.toggle('highlight');
});
</script>
</body>
</html>위 코드는 버튼을 클릭하면 p 요소의 배경색이 노란색으로 변경되는 예제입니다. 이를 위해 DOM 메서드 중 querySelector를 사용하여 버튼과 p 요소를 선택하고, addEventListener를 사용하여 버튼 클릭 시 실행될 함수를 지정합니다. 함수 내부에서는 classList.toggle을 사용하여 p 요소의 클래스를 변경합니다. 클래스 이름이 highlight인 경우 배경색이 노란색으로 변경됩니다.
728x90
반응형
'프론트앤드 부트캠프 > Day' 카테고리의 다른 글
| [코드스테이츠 FE 45기] _2023.05.04 _ Day 18 (0) | 2023.05.07 |
|---|---|
| [코드스테이츠 FE 45기] _2023.05.03 _ Day 17 (0) | 2023.05.03 |
| [코드스테이츠 FE 45기] _2023.05.01 _ Day 15 (0) | 2023.05.01 |
| [코드스테이츠 FE 45기] _2023.04.28 _ Day 14 (0) | 2023.05.01 |
| [코드스테이츠 FE 45기] _2023.04.27 _ Day 13 (0) | 2023.04.27 |
