웹브라우저가 HTML -> CSS -> DOM구성
자바스크립트 학습
-HTML의 태그를 참조하여 제어를 하는 목적(중요)
1) HTML의 태그를 참조
2)제어. 즉 기능을 부여한다
- 태그의 내용을 변경
- 태그에 자식태그를 추가,변경,제거
- 태그에 스타일을 추가,변경,제거
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My title</title> <!--title이 부모태그 My title 자식태그 기억하기!-->
</head>
<body>
<!--태그의 내용은 태그의 자식관계이다-->
<!--태그의 내용 입장에서는 태그는 부모관계이다-->
<!--태그의 속성은 자식관계가 아니다.(부모,자식관계 구조로 관리를 안한다)-->
<a href="#">My Link</a>
<h1>My header</h1>
</body>
</html>😝DOM HTML
document.getElementById.속성 = new value
1)태그 속성: document.getElementById 태그참조
태그입장에서 지원하는 속성
2)공통 속성: innerHTML, innerText, outerHTML, outerText 등등
😝Event
태그에 이벤트 설정하는 방법
- <태그 이벤트명 = "자바스크립트">내용</태그>
- 태그를 참조
w3schools - JS DOM event
😝Event Listener
이벤트 버블링
- 자식수준에서 부모수준으로 이벤트가 전파
- 이벤트 전파막기: event.stopPropagation()
이벤트 캡쳐링- 부모수준에서 자식수준으로 이벤트가 전파
😝Node
DOM
- HTML문서의 내용(태그 등등)을 12개의 노드타입으로 구분해서 관리한다
w3schools - JS DOM node
😝Collection
배열(Array)과 컬렉션(Collection)
기억장소의 종류 중 하나
- 공통점: 기억장소 내부에 하위적인 개념을 두어 관리하는 대표하는 이름
- 차이점:
배열 - 기억장소의 크기를 고정
컬렉션 - 기억장소의 크기가 정해서 사용하는 것이 아니라 상대적으로 크기가 유동적인 성격을 가진다
w3schools - JS collection
열심히가 되는 길♨_♨