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

- DOM(Document Object Model)

: 웹 문서를 제어하기 위해 개발된 언어

: 컨텐츠 변경, 추가, 제거 등 html 문서를 조작하기 위해 만들어진 언어

: 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화한 것

 

- Document

: 자바스크립트에서 DOM 접근을 위해 쓰이는 Interface

 

let element, elements;
element = document.getElementById("Id"); // id 속성값으로 요소 찾기
elements = document.getElementByClassName("className"); // class 속성값으로 요소 찾기

element = document.querySelector("selector") //셀렉터를 통해 요소 찾기
elements = document.querySelectorAll("selector") //셀렉터를 통해 해당되는 요소 찾기

 

- append

: 선택한 객체의 자식 요소로 인수를 뒤에 추가

: 문자열 사용 가능, 여러 개의 자식 요소 선택 가능, return 값 반환 x

 

- document.createElement

: HTML 문서에서 지정한 태그의 요소 생성

 

- innerText 
: 태그 안의 텍스트를 가져오거나 바꾸는 기능

 

- setAttribute

: 지정된 요소의 속성 값을 설정, 속성이 이미 있으면 값 업데이트, 속성이 없다면 지정된 이름과 값으로 새 속성 추가

 

- toggle

:  DOM 요소의 클래스 리스트에 클래스를 추가하거나 제거