[TIL] JS/브라우저 DOM

김윤혜·2022년 11월 10일

DOM; Document Object Model. HTML 요소를 Object처럼 조작할 수 있는 모델

HTML <- JavaScript 적용

script 태그: script 요소는 등장과 함께 실행된다.

<script src = "test.js"></script>
//src : URL 명시

script 태그의 위치
1) head 안쪽

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
  </body>
</html>

let msgElement = document.querySelector("#msg");
console.log(msgElement); // null

2) body 안쪽(이용할 HTML 요소보다 밑에 위치)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="msg">Hello JavaScript!</div>
    <!-- script 요소 삽입 위치 -->
    <script src="myScriptFile.js"></script>
  </body>
</html>

let msgElement = document.querySelector("#msg");
console.log(msgElement); // <div id="msg">Hello JavaScript!</div>

결론: script 태그가 HTML 엘리먼트보다 밑에 위치해야 HTML 요소를 조작할 수 있음

Document

자바스크립트에서 DOM은 document 객체에 구현되어 있다.

console.log(document.body) // <body></body>

console.dir : DOM을 객체 모습으로 출력

<html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="profile-photo"></div>
      </div>
    </div>
    <div id="news-contents">
      <div class="news-content-wrapper">
        <div class="news-picture"></div>
        <div class="news-title"></div>
        <div class="news-description"></div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>

console.dir(document.body.children);
// [div#nav, div#news-contects, div#footer]

엘리먼트 관계확인(부모&자식)

<html>
  <body>
    <div id="nav">
      <div class="logo"></div>
      <div class="menu-wrapper">
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="menu"></div>
        <div class="profile-photo"></div>
      </div>
    </div>
    <div id="news-contents">
      <div class="news-content-wrapper">
        <div class="news-picture"></div>
        <div class="news-title"></div>
        <div class="news-description"></div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
</html>

// 자식요소 확인
console.dir(document.body.children[1]); // div#news-contents
let newsContents = document.body.children[1]
-> 변수를 이용, 더 간편하게 불러올 수 있음


//부모요소 확인
newsContents.parentNode
newsContents.parentElement

CRUD(Create, Read, Update, Delete)

Create
- document.createElement(div) // div 엘리먼트 생성
- const tweetDiv = document.createElement(div) // 변수에 할당
- document.body.*append(tweetDiv) // 부모 *노드에 추가 (트리구조와 연결)

노드 : HTML DOM은 노드(node)라고 불리는 계층적 단위에 정보를 저장하고 있다.
append() : Element.append()메서드는 Node의 마지막 자식 뒤에 개체 집합 또는 문자열 개체를 삽입한다.

Read
- querySelector : 셀렉터(HTML요소 #id .class)를 조회(질문)한다.
  - document.querySelector('.a') ; querySelector에 .a를 첫번째 인자로 넣는다.
    -> 클래스 이름이 a인 HTML 엘리먼트 중 1번째 엘리먼트를 조회한다.
  - const onea = document.querySelector('.a') // 변수에 할당
  - document.querySelectorAll('.a') ; querySelector에 .a를 첫번째 인자로 넣는다. -> 클래스 이름이 a인 HTML 엘리먼트를 모두 조회한다.
  - querySelectorAll로 불러온 값은 배열이 아닌 유사배열이다.
  - document.querySelectorAll('.a') ; querySelector에 .a를 첫번째 인자로 넣는다. -> 클래스 이름이 a인 HTML 엘리먼트를 모두 조회한다.
  - querySelectorAll로 불러온 값은 배열이 아닌 유사배열이다.

Update
- 문자열 추가 : textContent
  - oneDiv.textContent = 'dev';
    console.log(oneDiv) // <div>dev</div>
- class 추가 : classList.add()
  - oneDiv.classList.add('tweet')
    console.log(oneDiv) // <div class="tweet">dev</div>
- 노드로 이사 : Element.append()
  - const container = document.querySelector('#container')
    container.append(oneDiv)
Delete_삭제하려는 요소의 위치를 알고 있는 경우
- remove()
  - const container = document.querySelector('#container') [Read]
  - const tweetDiv = document.createElement('div') [Create]
  - container.append(tweetDiv) [Append]
  - tweetDiv.remove() [Delete]
- 여러개의 자식요소 삭제
  - document.querySelector('#container').innerHTML = ''; 보안문제로 🚫
  - 갱신되는 첫 번째 자식 요소를 반복하여 삭제 (feat.반복문)
```
const container = document.querySelector('#container');
			while (container.firstChild) {
		container.removeChild(container.firstChild);
		}
```
  - 특정 클래스 요소만 삭제할 때
```
const tweets = document.querySelectorAll('.tweet')
			tweets.forEach(function(tweet){
				tweet.remove();
				})
					// or
				for (let tweet of tweets){
			    tweet.remove()
				}
```
  - 1번째 요소만 남길 때
```
const container = document.querySelector('#container');
			while (container.children.length > 1) {
		container.removeChild(container.lastChild);
			}
```

DOM vs JavaScript

11 / 10

김윤혜

본질에는 일치를, 비본질에는 관용을, 이 모든 것에 사랑을

이전 포스트

JavaScript Koans

다음 포스트

[TIL] JS/브라우저 DOM

HTML <- JavaScript 적용

Document

엘리먼트 관계확인(부모&자식)

JavaScript Koans

[11/12~13]weekend coding

0개의 댓글