728x90
반응형
05. DOM의 기초
DOM과 DOM 트리
문서 객체 모델(DOM)
- 자바스크립트 이용해 웹 문서에 접근하고 제어할 수 있도록 객체 사용해 웹 문서를 체계적으로 정리하는 방법
- 웹 문서를 구조화한 DOM 트리(DOM tree)와 이벤트를 정리해 놓은 표준
웹에서 자바스크립트 사용하는 이유
어떤 조건이 주어지거나 사용자의 동작이 있을 때 웹 문서 전체 or 일부분이 동적으로 반응하게 하는 것
-> 이렇게 하려면 웹문서의 모든 요소 따로 제어할 수 있어야 함
ex. 웹 문서에 텍스트와 이미지 들어 있다면
- 웹 브라우저) 마크업 정보를 보면서 텍스트 단락이 몇 개이고 그 내용이 무엇인지 살펴봄
- 이미지가 몇 개이고 이미지 파일 경로는 어떠한지 대체 텍스트는 무엇인지도 파악 -> 이미지별로 정리해서 인식
- 텍스트와 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별해서 인식해야 함
- 마크업을 보면서 요소 사이의 포함 관계도 알아야 함
DOM 트리
- 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시한 것
- 나무 형태가 됨
- 노드(node): DOM 트리에서 가지가 갈라져 나간 항목
- 루트 노드(root node): DOM 트리의 시작 부분(html)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM TREE</title>
</head>
<body>
<h1>Do it!</h1>
<img src="images/doit.jpb" alt="공부하는 이미지"?
</body>
</html>
웹 요소에 접근하기
웹 문서에서 원하는 요소를 찾아가는 것 = 접근한다(access)
ex. 제목의 글자색 바꾸고 싶으면 우선 제목까지 '접근해야' 함
querySelector(), querySelectorAll() 함수
// 웹 요소 하나만 접근
querySelector(선택자)
document.querySelector("h1"); // <h1></h1>
document.querySelector("#profile"); // <div id="profile"></div>
// 웹 요소 여러 개에 접근
querySelectorAll(선택자)
document.querySelector(".user")- 선택자
- id 이름 앞에서는 해시 기호(#), class 이름 앞에는 마침표(.), 태그는 기호 없이 태그명 사용
- 반환값
- `querySelector()` 메서드: 한 개의 값만 반환
- `querySelectorAll()` 메서드: 반환 값이 여러 개일 때 모두 반환 -> 노드 리스트로 저장됨
getElement~ 함수
id, class, 태그명 사용해서 접근
- `getElementById()`
- `getElementsByClassName()`
- `getElementsByTagName()`
document.getElementById("id명");
document.getElementByClassName("클래스명");
document.getElementByTagName("태그명");
`getElement*()`와 `querySelector()` 차이
- id값, class값, 태그 이름 사용해서 접근하는 것은 같음
- querySelector() 사용하면 둘 이상의 선택자를 조합해서 접근할 수 있음
- ex. #detail > p
웹 요소 내용 가져오기 및 수정하기
- `innerText`: 순수 텍스트 가져오거나, 해당 요소에 텍스트 지정
- `innerHTML`: 태그와 함께 텍스트 가져오거나, 해당 요소에 태그와 함께 텍스트 지정
- `textContent`: 텍스트 가져오되, 화면에 보이는대로가 아니라 소스에 있는대로 가져옴
화면에서 감춘 요소에서도 내용 가져올 수 있고, 소스에 공백이 여러 개일 경우 그 공백도 모두 가져옴
요소.innerText = "내용";
요소.innerHTML = "내용";
요소.textContent = "내용";자바스크립트로 스타일 수정하기
CSS 속성에 접근하기
요소.style.속성명
// 글자색 수정
style.color
// 배경색 수정 - 하이픈 X 대문자로
style.backgroundColor// 제목 부분 클릭 -> 제목의 글자색과 글자 배경색 변경
const title = document.qeurySelector("#title");
title.onClick = () => {
title.style.backgroundColor = "yellow";
title.style.color = "blue";
}classList 프로퍼티
- 두 개 이상의 class 스타일이 적용되었을 경우 class 스타일 정보를 담아두는 프로퍼티
- 적용 중인 class 스타일 제거할 수도 있고 새로운 class 스타일 추가할 수도 있음
<div id="desc">
<p class="user clicked">이름: 도레미 </p>
<p class="user">주소: somewhere</p>
<p class="clicked">연락처: 1234-5678</p>
</div>document.querySelector("#desc p").classList; // DOMTokenList(2) ['user', 'clicked', value: 'user clicked']클래스 스타일 추가하기 및 삭제하기
요소.classList.add(클래스명)
요소.classList.remove(클래스명)
출처
Do it! 모던 자바스크립트 프로그래밍의 정석
www.youtube.com
728x90
반응형
'한국경제신문 with toss bank > FE' 카테고리의 다른 글
| [Do it! 모던 자바스크립트 프로그래밍의 정석] 10. 문자열과 배열 (0) | 2024.08.09 |
|---|---|
| [Do it! 모던 자바스크립트 프로그래밍의 정석] 07. DOM 활용하기 (0) | 2024.08.09 |
| [Do it! 모던 자바스크립트 프로그래밍의 정석] 04. 함수와 스코프 (0) | 2024.07.31 |
| [Do it! 모던 자바스크립트 프로그래밍의 정석] 09. 자바스크립트 객체 만들기 (0) | 2024.07.31 |
| [Do it! 모던 자바스크립트 프로그래밍의 정석] 02. 변수와 자료형 (0) | 2024.07.29 |
