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)
콰삭칩을 그리워하는 개발자 입니다.