DOM(Document Object Model)

시디·2022년 1월 8일

웹개발

목록 보기

4/9

DOM은 HTML요소를 Object(Javascript Object)처럼 조작할 수 있는 모델
DOM은 트리구조로 구성
Javascript를 사용할 수 있으면 HTML 조작 가능!

<script src="myJavascript.js"></script>

웹 브라우저는 코드를 해석하는 과정에서 <script>를 만나면 HTML해석을 멈추고 <script>를 먼저 실행

<script>의 위치

Javascript에서 DOM은 document객체에 구현

✅ DOM구조를 조회할 경우 console.dir을 사용하면 DOM 객체의 모습으로 출력

console.dir(document.body);

엘리먼트의 관계

<body>
	<div id="contents-container">
		<div class="content"></div>
		<div class="content"></div>
		<div class="content"></div>
	</div>
</body>

위의 HTML에서 #contents-container엘리먼트는 body엘리먼트의 자식 엘리먼트

DOM으로 HTML조작

CREATE : 새로운 element 만들기

const newElement = document.createElement('div')

APPEND : 생성한 엘리먼트를 트리구조에 추가

document.body.append(newElement)

READ : 엘리먼트의 정보 조회

const container = document.querySelector('#mainTree')
container.append(newElement)// 아까 생성한 엘리먼트를 #mainTree의 자식 요소로 추가

UPDATE : 엘리먼트 정보 수정

newElement.textContent = ‘dev’

newElement.classList.add(’myClass’)

newElement.setAttribue(”name”, ”newName”)
newElement.setAttribute("disabled", "")

DELETE : 엘리먼트 삭제

container.remove(newElement)

container.removeChild(container.firstChild)

콰삭칩을 그리워하는 개발자 입니다.