[리뷰] DOM

DOM

DOM은 Document Object Model의 약자로, HTML 요소를 자바스크립트 객체처럼 조작할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.

HTML에서 Javascript적용하기

HTML에서 JavaScript를 적용하기 위해서는 script태그를 이용한다.
웹 브라우저가 작성된 코드를 해석하는 과정에서 script요소를 만나면, 웹 브라우저는 HTML해석을 잠시 멈추고 script요소를 먼저 실행한다.

그렇기 때문에 script태그는 보통 닫힌 바디태그전에 사용된다.
DOM구조를 조회할 때는 console.dir이 유용하다. console.dir을 DOM을 객체의 모습으로 출력한다.

DOM다루기

CREATE

• document.createElement('div')로 div 요소를 만든다.
• document.body.append(div요소 생성코드) // body안에 새로운 div태그를 추가한다.

READ

• document.querySelector("클래스,아이디 명") 사용
• document.querySelectorAll("클래스명")// 조회한 HTML요소들을 배열처럼 for문을 사용할 수 있다. 유사배열(Array-like Object)
• document.getElementById("아이디명") 사용
• document.getElementsByClassName("클래스명")사용

UPDATE

• setAttribute 메서드 사용
• .innerHTML을 사용해서 내용 변경

DELETE

• remove메서드 사용
• removeChild 를 사용해서 자식요소를 지정해 삭제
• .innerHTML을 사용해서 삭제

이벤트 객체

onClick 핸들러를 자주 사용한다.