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