TIL) DOM 기초, DOM 다루기, CRUD, 부모, 자식, 형제 찾기

 

 

DOM (Document Object Model)

DOM은 HTML 문서를 파싱한 결과물이다. 

HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 

HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다. 

 

DOM의 개념을 이해한다.
DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.
HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.
[심화]DOM과 JavaScript의 차이에 대해 이해할 수 있다.

 

HTML에 JavaScript를 적용하기 위해서는 <script> 태그를 이용한다. 

 

<script src="파일명.js"></script>

 

웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다.

HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행한다.

<script> 요소는 등장과 함께 실행된다⭐️

 

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

브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있다.

 

 

부모, 자식, 형제 찾기, 선택하기 (childNodes, parentNode, Sibling)

<div id=mother>
    <div id=one></div>
    <div id=two></div>
    <div id=three></div>
</div>

 

부모가 자식 찾기childNodes

// 부모 생성
var mother = document.getElementById('mother');
// 모든 자식 찾기
var every = mother.childNodes;
// 첫번째 자식 찾기
var one = mother.firstChild;
// 세번째 자식 찾기
var three = mother.lastChild;

 

자식이 부모 찾기 parentNode

var one = document.getElementById('one');
var mother = one.parentNode;

 

형제 찾기 Sibling

var one = document.getElementById('one');
var two = one.nextSibling;
var one = two.previousSibling;

출처: https://itun.tistory.com/501 [Bino]

 

 

---

DOM 다루기

 

CRUD(Create, Read, Update and Delete)를 이해한 후 세세한 메서드를 알자!

DOM을 JavaScript로 조작하여 HTML Element를 추가할 수 있다. (CREATE)
DOM을 JavaScript로 조작하여 HTML Element를 조회할 수 있다. (READ)
DOM을 JavaScript로 조작하여 HTML Element를 변경할 수 있다. (UPDATE)
DOM을 JavaScript로 조작하여 HTML Element를 삭제할 수 있다. (DELETE)
생성한 HTML Element를 부모 엘리먼트의 자식 엘리먼트로 포함할 수 있다. (APPEND)
innerHTML과 textContent의 차이를 이해한다.

심화

DOM과 JavaScript의 차이에 대해 이해할 수 있다.
createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
HTML5 template tag 사용법을 이해할 수 있다.
element와 node의 차이를 이해할 수 있다.
children과 childNodes의 차이를 이해할 수 있다.
remove와 removeChild의 차이를 이해할 수 있다.
같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
offsetTop 등을 이용하여 좌표 정보를 조회할 수 있다.
offsetWidth 등을 이용하여 크기 정보를 조회할 수 있다.

 

*렌더 트리는 렌더링을 위한 트리 구조의 자료구조이다. (브라우저 화면에 렌더링되는 노드만으로 구성된다.)

ex) meta 태그, script태그, display:none 등은 노드에 포함되지 않는다. 

DOM을 JavaScript로 조작하여 HTML Element를 추가 (CRUD) .createElement()

 

✔️ 새로운 <div> 요소를 만들기 👇

document.createElement('div')

 

 

---

CREATE에서 생성한 tweetDiv를 *트리 구조와 연결하기 .append()

<기존 html>

 

 

 

1. 'div'요소 (element)를 생성해서 tweetDiv 변수에 넣어준다. 

2. body 안에 넣어준다. 

 

 

<div>가 body 안에 들어갔다!

id가 contianer인 <div>와는 형제이다. 

 

 

 

---

DOM을 JavaScript로 조작하여 HTML Element를 조회 (CRUD) querySelector

 

HTML 요소("div"), id("#tweetList"), class(.tweet)가 많이 사용된다. 

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')

 

 

<div>를 생성해서 id가 contianer인 <div>안에 넣어보자!

1. id가 contianer인 요소를 찾아서 container라는 변수에 넣어주자.

2. <div>를 생성해서 tweetDiv라는 변수에 넣어주자.

3. container에 append를 사용해서 tweetDiv를 넣자!

 

 

결과

 

 

---

DOM을 JavaScript로 조작하여 HTML Element를 변경 (CRUD) .textContent = '';

 

 

✔️ 'div' 요소 생생 후, textContent를 이용해 문자열을 입력하기 👇

const oneDiv = document.createElement('div');
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>

 

 

✔️ classList.add를 이용해 'tweet' 클래스를 추가하기👇

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

 

추가공부

.setAttribute() => 요소의 속성 값을 정하는 메서드

element.setAttribute( 'attributename', 'attributevalue' )

⬆️ 기본 문법

attributename에는 속성 이름을, attributevalue에는 속성값을 넣는다.

 

 

document.getElementById( 'xyz' ).setAttribute( 'title', 'This is title' )

id가 'xyz'인 요소의 속성 이름을 title로, 속성값을 'This is title'로 정한다. 

만약 이미 속성값이 존재한다면 그 값을 지우고 새 값을 적용한다.

 

 

 

---

DOM을 JavaScript로 조작하여 HTML Element를 삭제 (CRUD) 

 

삭제 전 오리지날 HTML 코드

 

1-1. 삭제하려는 요소의 위치를 알고 있는 경우

 

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

 

1-2. 삭제할 class 이름을 아는 경우 classList.remove('class name');

let elFailureMessage = document.querySelector('.failure-message');
console.log(elFailureMessage);

elFailureMessage.classList.remove('hide');

 

 

2-1. 여러 개의 자식 요소를 지울 때 innerHTML

 

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

 

🔴하지만 innerHTML은 사이트의 공격 경로가 되어 잠재적인 보안 위험이 발생할 수 있다고 한다.  //

참고)<script> 요소를 사용하면 harmless!!

 

따라서 일반 텍스트를 삽입 할 때는 innerHTML 을 사용하지 않는 것이 좋다. 대신 전달 된 내용을 HTML로 파싱하지 않고 원시 텍스트(raw text)로 삽입하는 Node.textContent를 사용을 권고한다. 

 

 

2-2. 여러 개의 자식 요소를 지울 때 removeChild

 

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

=> removeChild 와 while 을 이용해 자식 요소를 삭제하면, 제목에 해당하는 H2 "Tweet List"까지 삭제된다. 

 

 

 

3-1. 부분삭제 하기 

 

container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거하기 👇

 

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

 

3-2. 부분삭제 하기

 

클래스 이름이 tweet인 요소만 찾아서 제거하기 👇

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})

or

const tweets = document.querySelectorAll('.tweet')
for (let tweet of tweets){
    tweet.remove()
}

 

추가공부 필요

forEach