DOM
: DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하면 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.
DOM은 HTML 요소를 Object 할 수 있는 Model이다. 자바스크립트를 이용하여 DOM으로 HTML을 조작할 수 잇다.
HTML에 JavaScript를 적용하기 위해서는 <script>태그를 이용한다.
script 요소는 등장과 함께 실행된다.
⚡️ <script> 요소를 추가하는 두 가지 방법
<head>에 추가
: HTML을 불러오지 않는 상태로 console.log로 불렀기 때문에null로 출력된다.
</body>가 끝나기 전에 추가
: HTML이 입력된 후 script 파일을 불러왔기 때문에null이 아닌 #msg 요소가 출력된다.
⚡️ DOM의 CRUD(Create, Read, Update and Delete)
💧 CREATE
const createDiv = document.createElement('div')div를 생성했지만 아무 것도 연결이 되어있지 않은 채 공중부양 되어있는 상태이다. 이 div를 append를 이용해 createDiv를 트리 구조에 연결한다.
💧 APPEND
: append라는 메서드를 사용해서, 변수 createDiv를 <body>에 넣는다.
const createDiv = document.createElement('div');
document.body.append(createDiv)
💧 READ
querySelector: 셀렉터를 조회한다는 의미를 가지고 있다.
const containerDiv = document.querySelector('.container')[코드] querySelector로 클래스 이름이 container인 HTML 요소를 조회한다.
변수 containerDiv에 할당된 요소는 단 하나이다. 여러 개의 요소를 한 번에 가져오기 위해서는 querySelectorAll을 사용한다. 이렇게 조회한 HTML요소들은 배열처럼 for문을 사용할 수 있다. 이런 '배열'아닌 '배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부릅니다.
💧 UPDATE
- 문자열 입력
const createDiv = document.createElement('div');
console.log(createDiv) // <div></div>
createDiv.textContent = 'dev';
console.log(createDiv) // <div>dev</div>textContent : 문자열을 입력한다.
- 클래스 추가
createDiv.classList.add('container')
console.log(createDiv) // <div class = "container">dev</div>- 요소의 속성값을 정하는 메서드
// 문법
// element.setAttribute( 'attributename', 'attributevalue' )
createDiv.setAttribute( 'title', 'This is title' )💧 DELETE
1.remove
const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // append 했던 요소를 삭제할 수 있다.
- innerHTML
document.querySelector('#container').innerHTML = '';
[코드] id가 container인 요소 아래의 모든 요소를 지우나 보안에 대한 문제를 가지고 있어 사용을 지양한다.
- removeChild
: 자식 요소를 지정해서 삭제하는 메서드. 모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc)을 활용할 수 있다.
const container = document.querySelector('#container')
while(container.firstChild){
container.removeChild(container.firstChild);
}
// 자식 요소가 남아있지 않을 때까지 첫번째 자식 요소를 삭제removeChild와 while을 이용해 자식 요소를 삭제하면 삭제되는 동안 container의 자식요소의 순서가 바뀌어 제대로 삭제 되지 않을 수 있다. 이때는 뒤에서부터 삭제한다.
DOM 고수!