타임라인
- 개인과제 발제
- 자바스크립트 걷기반 실습
오늘의 학습내용 : DOM 조작과 데이터 타입
◆ DOM 조작
DOM(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface 이다. (참고: MDN Web Docs) 구조화된 표현을 통해 프로그래밍 언어가 웹 페이지에 접근해서 문서의 스타일과 내용 등을 변경한다. 즉, 자바스크립트로 HTML을 조작할 수 있게 해 주는 것이다. 다음은 HTML에 있는 태그를 가져오는 방법이다.
- document.getElementsByTagName(선택자)
- document.getElementById(선택자)
- document.getElementsByClassName(선택자)
- document.querySelector(선택자) querySelector 만으로도 id, class, 태그명을 모두 선택해서 가져올 수 있다!
querySelector에서 id로 태그를 가져오고 싶다면 "#아이디명", class로 태그를 가져오고 싶다면 ".클래스명" 을 사용한다.
// (1) 태그 내부의 내용 변경하기
document.querySelector("#id").innerHTML = "안녕하세요2"
// (2) 글자 색 변경하기
document.querySelector("#id").style.color = "red"
// (3) 주소 변경하기
document.querySelector(".class").src = "https://images.example.com";
DOM을 통한 조작은 단순히 문서의 내용을 변경하는 것뿐만이 아니라, 사용자가 브라우저에서 취할 수 있는 다양한 이벤트를 등록하고 그때 실행될 코드를 작성할 수 있다.
document.querySelector("#아이디명").addEventListener("이벤트명", fucntion () {
// 이벤트 발생 시 실행할 코드 작성
};
◆ 데이터 형변환
<body>
<span class="number">0</span> // 데이터 형변환하지 않은 상태
<button class="plus-btn">증가</button>
<script src="script.js"></script>
</body>
</html>const plusBtn = document.querySelector(".plus-btn");
const number = document.querySelector(".number");
plusBtn.addEventListener("click", function () {
// span 태그의 내부 내용(0)에 1을 더하여 넣는다.
number.innerHTML = number.innerHTML + 1;
});
// 결과: 011111...
// 태그에서 가져온 0의 데이터 타입이 문자열이기 때문이다.plusBtn.addEventListener("click", function () {
number.innerHTML = Number(number.innerHTML) + 1;
}); // Number 함수를 사용해 문자열을 숫자로 바꾼다.
'스파르타코딩클럽 > 내일배움캠프' 카테고리의 다른 글
| [JS문법 종합반] 4주차_this 바인딩 (1) | 2024.10.23 |
|---|---|
| [JS문법 종합반] 4주차_콜백 함수와 제어권 (1) | 2024.10.22 |
| [JS문법 종합반] 3주차_데이터 타입(심화) (0) | 2024.10.14 |
| [JS문법 종합반] 2주차_ES6문법 : 일급 객체로서의 함수 (2) | 2024.10.11 |
| [JS문법 종합반] 2주차_ES6문법 : ES6문법 소개 (1) | 2024.10.10 |