DOM(Document Object Model)

jus1234·2022년 1월 8일
0

웹개발

목록 보기
4/10

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

  • HTML에서 Javascript의 사용은 <script>태그를 통해 가능
<script src="myJavascript.js"></script>

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

<script>의 위치

  • <head>태그에 추가하는 경우
  • </body>태그 전에 추가하는 경우

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 만들기

  • document.createElement()
const newElement = document.createElement('div')

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

  • append()
document.body.append(newElement)

READ : 엘리먼트의 정보 조회

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

UPDATE : 엘리먼트 정보 수정

  • textContent
newElement.textContent = ‘dev’
  • classList.add()
newElement.classList.add(’myClass’)
  • setAttribute(name,value)
newElement.setAttribue(”name”, ”newName”)
newElement.setAttribute("disabled", "")

DELETE : 엘리먼트 삭제

  • remove()
container.remove(newElement)
  • removeChild()
container.removeChild(container.firstChild)
profile
콰삭칩을 좋아하는 개발자 입니다.

0개의 댓글