DOM(Document Object Model)

• DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.

HTML에 자바스크립트 적용하기

• HTML에 JavaScript를 적용하기 위해서는 script 태그를 이용합니다. 아래의 경우 HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js을 불러옵니다.
  
• 이 script 태그를 추가하는 두 가지 대표적인 사례가 존재합니다. 하나는 head 태그에 추가하는 방법, 다른 하나는 body 가 끝나기 전에 추가하는 방법입니다.

HTML이 JavaScript에서는 어떻게 표현될까?

• body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요?
• class의 이름이 news-contents 인 div 엘리먼트의 부모 엘리먼트는 무엇인가요?
• id의 이름이 nav인 div엘리먼트 를 포함해서, 모든 자식 엘리먼트의 class 이름을 console.log를 사용하여 확인하는 방법을 수도코드(pseudocode)로 작성하세요.

• body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요?

• class의 이름이 news-contents 인 div 엘리먼트의 부모 엘리먼트는 무엇인가요?

DOM 의 관계도

function consoleLogAllElement(element){
// nav의 class 이름을 console.log 합니다.

// nav의 자식 엘리먼트가 있는지 검색합니다. (logo, menu-wrapper)

//logo의 class 이름을 console.log 합니다.

//logo의 자식 엘리먼트가 있는지 검색합니다. (없음)

//menu-wrapper의 class 이름을 console.log 합니다.

//menu-wrapper의 자식 엘리먼트가 있는지 검색합니다. (menu, menu, menu, profile-photo)

//첫 번째 menu의 class 이름을 console.log 합니다.

//첫 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

//두 번째 menu의 class 이름을 console.log 합니다.

//두 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

//세 번째 menu의 class 이름을 console.log 합니다.

//세 번째 menu의 자식 엘리먼트가 있는지 검색합니다. (없음)

//profile-photo의 class 이름을 console.log 합니다.

//profile-photo의 자식 엘리먼트가 있는지 검색합니다 (없음)

//자식 엘리먼트를 모두 탐색했음으로, 함수 실행이 종료됩니다.
}

CREATE - createElement

DOM으로 HTML을 조작하는 방법 중 가장 기초적인, 새로운 element를 만드는 방법

위 그림처럼 공중에 떠있는 엘리먼트를 확인하기 위해서는 APPEND 해야합니다.

APPEND - append, appendChild

READ - querySelector, querySelectorAll

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있습니다. 셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.

append()

append 메서드를 활용하면 노드객체나 DOMDString(text)를 사용할 수 있다
또한 한번에 여러 개의 자식 요소를 설정할 수 있다.
append 메서드는 retrun 값을 반환하지 않는다

appendChild()

appendChild메서드는 append 메서드와는 다르게 오직 Node 객체만 받을 수 있다
게다가 append 는 여러 개의 노드와 문자를 추가할 수 있는 반면에 appendChild 메서드는 오직 하나의 노드만 추가 가능하다
return 값을 반환

const oneTweet = document.querySelector('.tweet')
[코드] querySelector로 클래스 이름이 tweet인 HTML 엘리먼트를 조회합니다.
--> querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.
여러개의 .tweet 중 첫번째 엘리먼트만 가져옴

모두 가져오려면
const tweets = document.querySelectorAll('.tweet') ---> 유사배열로 리턴 //all만 유사배열인지 확인필요

const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true
--> 같은방식이다

querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까?

• 제일 처음으로 검색되는 div를 뱉거나, div 가 없으면 null 을 리턴

querySelector를 통해서 더 복잡한 작업을 할 수 있을까?

• 엘리먼트의 객체를 조회하고 색깔을 바꾸는등의 작업이 가능해서 복잡한 작업이 가능하다고 생각한다

querySelector의 부모는 꼭 document 객체여야만 할까?

• document 하위의 어떤 객체든 자식 엘리먼트를 가지고 있다면 querySelector의 부모가 될 수 있습니다.

UPDATE - textContent, classList.add

01) -> div 태그 생성하고 문자열 입력
textContent를 이용해 문자열을 입력합니다.

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

02) -> 클래스 지정

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

DELETE - remove, removeChild

유효성 검사

직접 푼 코드