Unit 10. [JS/브라우저] DOM 기초

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Jieunny의 블로그

Unit 10. [JS/브라우저] DOM 기초 본문

CodeStates/learning contents

Unit 10. [JS/브라우저] DOM 기초

Jieunny 2022. 12. 26. 14:28

📣 DOM

Document Object Model
HTML 요소를 Object처럼 조작할 수 있는 Model이다. -> JS를 사용하면 DOM으로 HTML을 조작할 수 있다.
HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다!

📣 HTML에 JS 적용하기

<script src="myScriptFile.js"></script>

웹 브라우저는 코드 해석 과정에서 <script> 요소를 만나면 HTML 해석을 멈추고 <script> 요소를 먼저 실행한다.
🚨 <script> 요소는 등장과 함께 실행된다

✔️ <script> 요소 추가하는 방법

1️⃣ <head> 안쪽에 삽입

➰ HTML 태그를 만나기 전에 <script>요소가 실행되서 HTML태그를 제대로 불러오지 못한다.

2️⃣ <body> 요소 끝나기 전에 삽입

✔️ HTML 레이아웃을 컴퓨터에게 전달하기

자바스크립트에서 DOM은 document 객체에 구현되어 있다.
console.dir 로 DOM 구조를 조회하면 객체의 모습으로 출력할 수 있다.
선택한 요소의 children 요소를 볼 수 있다.

📣 DOM 다루기

CRUD : CREATE, READ, UPDATE, DELETE
document 객체를 통해서 HTML 엘리먼트를 CRUD 하는 방법

✔️ CREATE

const tweetDiv = document.createElement('div')
// tweetDiv 요소는 현재 공중부양 중이다.
// 공중에 떠있는 element를 확인하기 위해서는 APPEND 해야한다.

✔️ APPEND

document.body.append(tweetDiv)

생성한 tweetDiv를 트리 구조와 연결한다.
변수 tweetDiv에 담긴 새로운 <div> 요소를 <body> 요소에 append 한다.

✔️ READ

const tweets = document.querySelectorAll('.tweet')
// 클래스 이름이 tweet인 모든 HTML 요소를 유사 배열로 받아온다.

여러 개의 요소를 한 번에 가져오기 위해서는 querySelectorAll 을 사용한다.
하나의 요소를 가져오기 위해서는 querySeletor 를 사용한다.
🚨 배열이 아닌 Array-like Object(유사 배열) 로 가져온다.
🚨 document.getElementById 이런 메소드는 옛날 방식

const container = document.querySeletor('#container');
const tweetDiv = document.createElement('div');
container.append(tweetDiv);

tweetDiv 라는 <div> 요소를 생성해서 containter의 마지막 자식 요소로 추가한다.

✔️ UPDATE

const oneDiv = document.createElement('div');
oneDiv.textContent = 'dev';
oneDiv.classList.add('tweet');
const container = document.querySelector('#container');
container.append(oneDiv);

textContent를 사용해서 비어있는 div 엘리먼트에 문자열을 입력한다.
classList.add를 이용해서 <div> 요소에 'tweet' 클래스를 추가한다.
container를 찾아서 마지막 자식 요소로 oneDiv를 추가한다.
🚨 element.setAttribute('attributename', 'attributevalue') 로 class, id 외에 다른 속성을 추가할 수 있다.

✔️ DELETE

1️⃣ 삭제하는 요소의 위치를 알고 있는 경우

const container = document.querySelector('#container');
const tweetDiv = document.createElement('div');
container.append(tweetDiv);
tweetDiv.remove();	// append한 요소 삭제하기

2️⃣ 여러 개의 자식 요소를 삭제하는 경우

document.querySelector('#container').innerHTML = '';

id가 container인 요소 아래의 모든 요소를 제거한다.

3️⃣ 자식 요소를 지정해서 삭제하는 경우

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거한다.

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거한다.

4️⃣ 특정 클래스의 요소를 제거하는 경우

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove();
}

클래스 이름이 tweet인 요소만 찾아서 제거한다.

저작자표시

'CodeStates > learning contents' 카테고리의 다른 글

Unit 10. [JS/브라우저] 이벤트 객체 (0)	2022.12.28
Unit 10. [JS/DOM] 유효성 검사 (0)	2022.12.27
Unit 9. [JS]ES6 주요문법 (0)	2022.12.23
Unit 9. [JS]클로저 (0)	2022.12.23
Unit 9. [JS]스코프 (0)	2022.12.22

'CodeStates/learning contents' Related Articles

Jieunny의 블로그

Unit 10. [JS/브라우저] DOM 기초 본문

Unit 10. [JS/브라우저] DOM 기초

📣 DOM

📣 HTML에 JS 적용하기

📣 DOM 다루기

'CodeStates > learning contents' 카테고리의 다른 글

티스토리툴바