🏟DOM
Document Object Model 의 약자
HTML요소를 Object처럼 조작할 수 있는 model
즉, 자바스크립트를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있는 것
DOM으로 HTML로 구성된 웹페이지를 동적으로 움직일 수 있음
HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리구조
HTML에 JavaScript 적용
<script> 태그를 이용해서 js 파일을 불러옴
<script> 요소는 등장과 함께 실행
-
<head>안쪽에 삽입하는 경우 -
<body>요소가 끝나기 전에 삽입하는 경우
DOM 구조를 조회할 때 : console.dir
DOM 다루기
document 객체에는 많은 속성과 메서드 존재
그 중 중요한 것 -> CRUD (create, read, update, delete)
create HTML Element를 추가
createElement
append HTML Element를 부모 노드에 포함
append
read HTML Element를 조회
- querySelector (query : "질문하다", "조회한다" / 셀렉터 요소 : HTML요소, id, class)
cf) querySelectorAll 배열과 비슷한 객체인 nodeList를 반환, 반환객체가 nodeList이기에 for문 또는 forEach문을 사용querySelector(#id) ➡️ id 값 id를 가진 요소를 찾음
querySelector(.class) ➡️ class 값 class를 가진 요소를 찾음cf)
querySelectorAll("#id,.class");
update HTML Element를 변경
textContent를 이용해 비어있는 엘리먼트에 문자열을 입력
classList.add를 이용해 클래스를 추가
append를 이용해 container의 자식 요소에 추가
delete HTML Element를 삭제
remove,innerHTML,removeChild,while
❗️이벤트 객체
이벤트 : 클릭이나 드래그하는 일
이벤트 객체 : 사용자 입력을 트리거로 발생한 이벤트 정보를 담은 객체
사용자 입력의 예시 : onclick, onkeyup, onscroll 등
addEventListener
: document 특정 요소의 이벤트를 등록할 때 사용
😑오늘의 속마음
튜토리얼 없이는 못살아...정말 못살아...
