DOM은 Document Object Model의 약자
HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있다.DOM은 document 객체에 구현되어 있다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있다.
DOM 구조를 조회할 때에는 console.dir 이 유용합니다. console.dir 은 console.log 와 달리 DOM을 객체의 모습으로 출력
HTML은 프로그래밍을 위해서 만들어진 언어가 아니기 때문에 이전에 배웠던 조건문이나 반복문을 사용할 수 없고,
정보를 저장하기에도 적합한 언어가 아니다.
그래서 JavaScript라는 프로그래밍 언어와 DOM을 활용하여
HTML에 접근하고 조작한다모든 브라우저에서 사용할 수 있는 기준과 표준어
ECMA script DOM BOM DOM : 문서(HTML) 객체를 다루기 위한 속성, 메소드 제공DOM
HTML Element를 추가하는 방법
(1) create
document.createElement('div') 새로운 <div> 요소를 만든다const tweetDiv = document.createElement('div') 새롭게 생성한 div element를 변수에 할당한다.
HTML Element를 부모 노드에 포함
(2) append
document.body.append(tweetDiv) 변수 tweetDiv에 담긴 새로운 <div> 요소를 <body> 요소에 append
HTML Element를 조회
(3) READ
자바스크립트에서 원시 자료형인 변수의 값을 조회하기 위해서는, 변수의 이름으로 직접 조회할 수 있다. 참조 자료형인 배열은 index를, 객체는 key를 이용해 값을 조회할 수 있다. 그러나 DOM은 조금 특별한 방법을 사용해야 한다. DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있다. 셀렉터로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용된다.참고로 querySelector는 셀렉터를 조회한다는 의미를 가지고 있다.
query의 의미가 "질문하다"라는 것을 알고 있다면 역할을 쉽게 유추하실 수 있다.
이 query라는 단어는 개발자 간에 "ㅇㅇㅇ를 조회한다"라는 의미를 "쿼리를 날리다"라는 jargon(특정 영역에서만 사용되는 단어)로 굳어졌기 때문에 알고 있어야 한다.
querySelector
querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다.
const oneTweet = document.querySelector('.tweet') ㅡ> querySelector로 클래스 이름이 tweet인 HTML 요소를 조회여러 개의 요소를 한 번에 가져오기 위해서는, querySelectorAll 을 사용한다.
이렇게 조회한 HTML 요소들은 배열처럼 for문을 사용할 수 있다.
앞서 조회한 HTML 요소들은 배열이 아닙니다!
이런 '배열 아닌 배열'을 유사 배열, 배열형 객체 등 다양한 이름으로 부른다.const tweets = document.querySelectorAll('.tweet') ㅡ> querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아옵니다.
get 방식(옛날)
const getOneTweet = document.getElementById('container') const queryOneTweet = document.querySelector('#container') console.log(getOneTweet === queryOneTweet) // true ㅡ> getElementById와 querySelector로 각각 받아 온 container 요소는 하나의 요소
const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) ㅡ> tweetDiv를 container의 마지막 자식 요소로 추가
(4) update
앞선 콘텐츠 CREATE, APPEND, READ를 통해 새로운 DOM 객체를 만들고, 기존의 DOM 객체에 붙이고, DOM 객체를 선택해서 조회하는 방법을 학습했다. oneDiv라는 이름의 <div> 요소를 만들어 보자const oneDiv = document.createElement('div'); console.log(oneDiv) // <div></div>textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력
oneDiv.textContent = 'dev'; console.log(oneDiv) // <div>dev</div> ㅡ>textContent를 이용해 문자열을 입력CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가
oneDiv.classList.add('tweet') console.log(oneDiv) // <div class="tweet">dev</div> ㅡ>classList.add를 이용해 'tweet' 클래스를 추가append를 이용해 container의 자식 요소로 추가
const container = document.querySelector('#container') container.append(oneDiv) ㅡ>append를 이용해 container의 자식 요소에 oneDiv를 추가
(5) delete
삭제하려는 요소의 위치를 알고 있는 경우
const container = document.querySelector('#container') const tweetDiv = document.createElement('div') container.append(tweetDiv) tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다. ㅡ> id가 container인 요소 아래에 tweetDiv를 추가하고, remove로 삭제
여러 개의 자식 요소를 지우려면, 어떻게 해야 할까요?
document.querySelector('#container').innerHTML = ''; ㅡ> id가 container인 요소 아래의 모든 요소를 지웁니다.
자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드
innerHTML은 보안에서 몇 가지 문제를 가지고 있다.
removeChild 는 자식 요소를 지정해서 삭제하는 메서드.
모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있다.const container = document.querySelector('#container'); while (container.firstChild) { container.removeChild(container.firstChild); } ㅡ> container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거const container = document.querySelector('#container'); while (container.children.length > 1) { container.removeChild(container.lastChild); } ㅡ> container의 자식 요소가 1개만 남을 때까지, 마지막 자식 요소를 제거
직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법
const tweets = document.querySelectorAll('.tweet') tweets.forEach(function(tweet){ tweet.remove(); }) // or for (let tweet of tweets){ tweet.remove() } ㅡ> 클래스 이름이 tweet인 요소만 찾아서 제거
이벤트 객체
사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있다.
사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져온다.
다시 말해, 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체이다
