DOM 기초 (시작)

오늘은 DOM을 처음 본 날이다
안녕....?
방금 막 따끈따끈하게 공부해서 잘 알진 못하지만 기록해보려 한다
늘 그렇듯 부족한 부분은 내가 찾아보고 알아봐야 하는데
DOM은 특히 알아가야 할 게 많은 것 같다

짚고 갈 것:
html은 마크업 언어
javascript는 프로그래밍 언어

1. 오늘 공부한 것

✅ DOM (Document Object Model)

트리 구조 : 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복된다

HTML 요소를 JavaScript Object처럼 manipulation 할 수 있는 model
HTML로 구성된 웹 페이지를 동적으로 움직일 수 있게 한다

DOM은 Document 객체에 구현되어 있다.

console.dir(document.body); 
//dir : 객체의 모습으로 출력

console.dir(document.body.children[1]);	
//children : 자식 요소를 가리키는 속성

console.dir(document.body.parentElement); 
//parentElement : 부모 요소를 가리키는 속성

1️⃣ Create

: 요소를 생성한다

const createDiv = document.createElement('div');
// createElement() method

아직 웹 페이지에 시각적으로 나타나지 않는다.
'div' 요소는 현재 '트리구조'에 들어가지 않아 웹 페이지에 둥둥 떠 있는 상태라고 할 수 있다.

이것을 document 트리 구조에 연결(append)시켜야
크롬 개발자 도구 - elements에서 'div'요소가 생긴 것을 확인할 수 있다.

✔️ append

document.body.append(createDiv);
// append() method

2️⃣ Read

: 셀렉터를 조회한다(query)

const variable = document.querySelector('div');	// 이름이 div인 HTML 요소를 변수로 지정함
const navigator = document.querySelector('#nav');	// id가 nav인 HTML 요소를 변수로 지정함
const box_bottom = document.querySelector('.box');	// class가 box인 HTML 요소를 변수로 지정함
//querySelector() method

원하는 셀렉터 1개를 조회하여 변수로 지정해놓고 사용하면 편리하다.
➡️ 여러 개를 조회하고 싶다면?

const tweets = document.querySelectorAll('.tweet'); // class가 tweet인 HTML 요소를 모두 조회하여 변수로 지정함
//querySelectorAll() method

➡️ 같은 일을 하는 method (strict equal한 결과값이 나온다)

.getElementById('idname')
.getElementsByClassName('className')
.getElementsByTagName('tagname')
.getElementsByName('name')

등..

3️⃣ Update

: HTML Element를 변경한다

• textContent 추가하기

const createDiv = document.createElement('div'); // Create
document.body.append(createDiv);	// append

createDiv.textContent = 'young의 velog'; // Update
//element.textContent = 'textContect'

➡️ textContent를 추가한 모습

• 다른 div요소와 같은 스타일을 적용하기 위해 id요소의 자식요소로 append하고, class 지정을 해준다

//1. id가 container인 요소를 조회하여 변수로 지정하고 append 한다
const container = document.querySelector('#container');	//read
container.append(createDiv); 	//append


//2. class를 지정한다
createDiv.classList.add('tweet');	//update
//.classList.add('name')

➡️ 원하는 대로 css적용된 모습!
html 문서에도 다음과 같이 나타나 있다

4️⃣ Delete

: HTML Element 삭제하기

✔️ .remove()

//삭제하려는 요소를 직접 지정
createDiv.remove()	

열심히 만든 createDiv 요소가 삭제된다

✔️ .innerHTML=''

//해당 부모요소의 자식요소 전체삭제
document.querySelector('부모요소').innerHTML=""; 

querySelectorAll으로 하면 안되고 querySelector 로 하는 것!! 헷갈렸다

하지만 innerHTML으로 text를 삽입하는 것은 보안 문제가 있어 사이트의 공격 경로가 될 수 있다고 한다.

일반 텍스트를 삽입 할 때는 innerHTML 을 사용하지 않는 것이 좋습니다.
대신 Node.textContent를 사용하십시오.
이것은 전달 된 내용을 HTML로 파싱하지 않고 원시 텍스트(raw text)로 삽입합니다. -mdn
https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML#security_considerations

✔️ .removeChild

//자식요소 지정하여 삭제
container.removeChild(container.firstChild);

container 요소의 첫 번째 자식요소를 지정하여 삭제한다.

✔️ 반복문을 사용하여 요소를 1개만 남기거나, 모두 삭제하거나 하는 등 조건을 만들어서 삭제할 수도 있다.

const tweets = document.querySelectorAll('.tweet');	// tweet클래스의 요소들을 변수tweets로 지정한다


//1 remove()를 반복문과 사용하여 전체 삭제하기
for (let tweet of tweets) {
  tweet.remove();	//반복문으로 tweet클래스 요소들을 전체 삭제한다
}


//2  forEach() method로 함수 만들어 전체 삭제하기
tweets.forEach(function(tweet){
    tweet.remove();
})

2. 추가적으로 공부한 것

💡 DOM과 JavaScript는 다른 것?

DOM은 자바스크립트 뿐만 아니라 다른 프로그래밍 언어에서도 사용 가능하다.
웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

DOM은 document의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있게 한다.
따라서 프로그래밍 언어로 document의 CRUD가 가능해지는 것이다.

API (web or XML page) = DOM + JS (scripting language)

DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다.
문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다.
때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다. -mdn

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

💡 setAttribute

: 속성을 추가할 수 있는 다른 method

// .setAttribute(name, value);

createDiv.setAttribute(id, creative);
//<id="creative">와 같은 속성이 추가된다

💡element와 node의 차이

element는 태그 노드만을 가리키고
node는 태그 노드와 텍스트 노드 전체를 가리킨다.

💡children과 childNodes의 차이

childNodes는 자식으로 있는 모든 노드를 가리키고 (tag, tag.classname, text)
children은 자식으로 있는 태그노드를 가리킨다. (tag.classname)
document의 children은 Doctype 선언과 HTML 요소로 2개이다.

3. 더 공부하자

• createDocumentFragment

• HTML5 template tag

• offsetTop 좌표 정보 조회

• offsetWidth 크기 정보 조회

• forEach : 콜백함수를 알고 나면 알 것 같다...

• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
  복사하지 않고 이동한다. 복사된다면 id 태그가 중복될 수도 있다.
  https://indepth.dev/posts/1161/here-is-why-appendchild-moves-a-dom-node-between-parents

4. 기억하자

• 프로그래밍 언어를 배울 때 CRUD부터 이해하고 세세한 것을 익혀가자
  CRUD : Create, Read, Update and Delete

• HTML 파일 내 <script> 태그는 <body> 태그 최하단에 등록하자
  https://velog.io/@takeknowledge/script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C%EC%9A%94