[ JS/브라우저 ] DOM
DOM : Document Object Model 의 약자. HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model. 즉, 자바스크립트를 사용할 수 있다면 DOM 으로 HTML을 조작할 수 있다.
HTML에 자바스크립트 적용하기
웹브라우저가 코드 해석 과정중에 <script> 요소를 만나면, HTML 해석을 잠시 멈추고 <script> 요소를 먼저 실행한다.
※ <script> 요소는 등장과 함께 실행된다는 사실 기억하기!!
자식 엘리먼트 찾기
자바스크립트에서 DOM은 document 객체에 구현되어 있다.
DOM 구조를 조회할 때는 console.dir 을 사용하면 DOM을 객체의 모습으로 출력해준다.
예시) console.dir(document.body.children)
부모 엘리먼트 찾기
class나 ID를 가진 요소의 부모 태그 찾는 방법
부모는 parentNode 속성으로 접근한다.
ㄴ var parent = demodiv.parentNode;
자식은 childNodes 속성으로 접근한다.
ㄴ var children = demodiv.childNodes;
DOM으로 HTML 조작하기
CRUD(Create, Read, Update and delete)
어떤 언어를 배우더라도 CRUD에 집중해야 한다. CRUD를 이해하는 것이 새로운 언어를 가장 빨리 학습하는 방법이기 때문이다.
엘리먼트 생성
document.createElement('div')클래스 속성값이 있는지 확인
classList.contains('클래스명')
개발자