[JavaScript] DOM

Notice

Recent Posts

Recent Comments

Link

« 2025/07 »
일	월	화	수	목	금	토
		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

관리 메뉴

roqkf

[JavaScript] DOM 본문

💻 Development/JavaScript

[JavaScript] DOM

ahyeon7 2022. 11. 25. 01:22

DOM(Document Object Model)이란?

HTML 요소를 Object처럼 조작할 수 있는 Model
HTML의 아주 작은 부분까지 접근할 수 있는 구조를 DOM이라고 한다.
DOM을 이용하면 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다.
document 객체에 구현돼 있다.
DOM은 '트리 구조'다! (부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복)

HTML에 JavaScript를 적용하는 방법

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

- HTML 파일과 같은 디렉토리에 존재하는 index.js를 불러온다.

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면 HTML 해석을 잠시 멈추고 <script> 요소를 먼저 실행한다! 등장과 함께 실행된다는 점!

<script> 요소를 추가하는 방법

<head> 요소에 추가
</body> 가 끝나기 전에 추가

DOM 구조 조회

body를 찾아보자
console.dir(document.body)
+ console.log와 달리 DOM을 객체의 모습으로 출력한다.

CREATE

document.createElement('div') // <div> 요소 만들기

아래 사진과 같이 잘 만들어진 걸 확인할 수 있었다!

새로 만든 div 요소를 활용하려면 어떻게 할까?
변수에 할당 하자!

const tweetDiv = document.createElement('div')

<div>를 만드는 작업을 변수 tweetDiv에 할당하였으니 tweetDiv를 활용하면 되겠다!!

READ

DOM을 이용해 HTML Element를 조회하기

const oneTweet = document.querySelector('.tweet') 
- 클래스명이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회!

?? 첫 번째 요소만 가져 오는 거 말고 클래스명이 tweet인 모든 엘리먼트를 가지고 올 수 있을까
const oneTweet = documetn.querySelectorAll('.tweet')

1. Document.querySelector(selectors);
- 첫 번째 엘리먼트를 반환, 일치하는 요소가 없다면 null이 반환된다!

2. Document.querySelectorAll(selectors);
- 지정된 셀렉터 그룹에 일치하는 엘리먼트 리스트를 나타내는 정적 NodeList를 반환

3. Document.getElementById(selectors); 
- get으로 시작하는 DOM 조회 메서드도 존재한다
- 이전 버전의 브라우저 호환성에 신경 써야 한다면 get 메서드를 사용해야 할 수도 있다!

* 실제 동작은 동일함
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true

div를 생성하여 container의 맨 마지막 자식의 요소로 tweetDiv 추가하기(append();)

const container = document.querySelector('#container') // 아이디가 'container'인 엘리먼트 조회
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

UPDATE

빈 div 요소에 문자열을 삽입해 보자!

const oneDiv = document.createElement('div'); // div 생성
oneDiv.textContent = 'dev' // <div>dev</div>로 업데이트

class가 'tweet'인 요소에 css가 적용돼 있다면 방금 만든 div에도 tweet 요소에 씌여진 css를 동일하게 넣고 싶다? div에 class를 부여해 주자!

oneDiv.classList.add('tweet')

다른 attribute 추가하는 방법?
+ setAttribute 함수

element.setAttribute('attribute_name', 'attribute_value');

ex) 아이디가 test인 요소에 href 속성 값 변경하기
document.getElementById('test').setAttribute('href', '링크 주소');

또는

const tests = document.querySelector('#test');
tests.setAttribute('href', '링크 주소');

참고: https://kkamikoon.tistory.com/entry/Javascript-%EC%9A%94%EC%86%8CElement%EC%9D%98-%EC%86%8D%EC%84%B1Attribute-%EA%B0%92-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

DELETE

const container = document.querySelector('#container') 
const tweetDiv = document.createElement('div')
container.append(tweetDiv) /// container에 tweetDiv 추가
tweetDiv.remove() // tweetDiv 삭제

여러 개의 자식 요소를 삭제하는 방법

document.querySelector('#container').innerHTML = '';
- 간편하고 편리하지만 사이트의 공격 경로가 돼서 잠재적인 보안 위험이 발생할 수 있고 하니 지양하자!

반복문 활용해서 여러 개의 자식 요소를 삭제

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

클래스 이름이 tweet인 요소만 찾아서 지우기

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

'💻 Development > JavaScript' 카테고리의 다른 글

[JavaScript] 클래스와 인스턴스 (0)	2022.11.25
[JavaScript] 고차함수 (0)	2022.11.25
[JavaScript] Hoisting (0)	2022.11.25
[JavaScript] 객체 (0)	2022.11.25
[JavaScript] 배열 (0)	2022.11.25

'💻 Development/JavaScript' Related Articles

roqkf

[JavaScript] DOM 본문

[JavaScript] DOM

DOM(Document Object Model)이란?

<script> 요소를 추가하는 방법

DOM 구조 조회

CREATE

READ

UPDATE

DELETE

'💻 Development > JavaScript' 카테고리의 다른 글

티스토리툴바