[2024 신입부원 기초 스터디] 김민서 #4주차

DOM



JavaScirpt

• 웹 문서를 제어하기 위해 개발
• 컨텐츠 변경, 추가 제거 등의 html 문서 조작을 위해 만들어짐

DOM(Document Object Model) - 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화

 

Document - 자바스크립트에서 DOM 접근을 위해 쓰이는 인터페이스

 

• document.querySelector("#id"); 셀렉터를 통해 특정 id 속성값을 가진 요소를 찾음
• document.querySelector(".class-name"); 셀렉터를 통해 특정 class를 가진 요소를 찾음
• document.querySelector("input"); 셀렉터를 통해 특정 태그를 찾음

 

html

• head - title

• body - h1, p

 

append() : DOM에 새로운 요소를 추가하는 데 사용, 선택한 요소의 자식으로 다른 요소를 추가

document.createElement() : 지정된 요소 노드를 생성

innerText : 해당 요소의 내부 텍스트 내용을 나타냄, 특정 요소의 텍스트를 설정하거나 가져올 수 있음

toggle : 불리언 값 전환 또는 클래스 전환 (해당 클래스가 있으면 제거 없으면 추가)