DOM이란?
- html문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조즉 html문서를 노드라고 불리는 요소에 넣어서 자바스크립트만으로 html의 요소를 움직일 수 있는 것들이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="codeunion"></ul>
<script>
//메소드로
function createLi(text){
const li=document.createElement("li");
li.textContent=text;
return li;
}
const ul=document.querySelector("#codeunion");
ul.append(createLi("사이다"))
ul.append(createLi("오렌지주스"))
</script>
</body>
</html> 
이렇게 DOM을 이용하여 html문서를 바로바로 조작할 수 있다는 장점이 있다
DOM은 HTML문서의 구성요소인 HTML요소를 객체화한 모든 노드 객체들을 트리 자료구조로 구성
HTML 조작을 하려면 - 요소 가져오기
-
document.getElementById()
= 선택한 id를 가진 HTML요소를 가져올 수 있음 -
document.querySelector()
= css선택자를 이용해 요소를 가져오는 방법을 반환
= 모든 css선택자로 요소들을 가져옴
const el=document.querySelector('#cu') //아이디 가져오기
// id로 요소 가져오기DOM CRUD
- CRETE
const divE1=document.createElement('div')
document.body.append(divE1)= DOM element를 생성하는 메소드
- READ
document.querySelector(divE1)- UPDATE
ex)
document.textContent=text - DELETE
document.remove()
성장을 추구하는 개발자 입니다 :)