DOM
DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.
DOM트리 구조로 만든 객체를 DOM을 이용해서 자바스크립트로 가져올 수 있다.
DOM조회
console.dir사용
console.dir(document.body)
console.dor(document.body.children)객체의 모습으로 출력
자식 조회
let newsContents = document.body.children[1]
console.dir(newsContents)DOM 다루기
새로운 요소 생성
document.createElement('div')변수에 할당
const tweetDiv = document.createElement('div')현재 tweetDiv는 어디에도 연결되어 있지 않은 노드
APPEND
create로 생성한 tweetDiv를 트리구조에 연결
이번 콘텐츠에서는 append 라는 메서드를 사용해서, 변수 tweetDiv 를 <body> 에 삽입
document.body.append(tweetDiv)READ
DOM으로 HTML 엘리먼트의 정보를 조회
querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있다.
셀렉터로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용
- querySelector
const oneTweet = document.querySelector('.tweet')querySelector로 클래스 이름이 tweet인 HTML 요소를 조회
.tweet 의 첫번째 요소 조회
- querySelectorAll
const tweets = document.querySelectorAll('.tweet')querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 참조
UPDATE
textContent를 이용해 문자열을 입력
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>classList.add를 이용해 'tweet' 클래스를 추가
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>append를 이용해 container의 자식 요소에 oneDiv를 추가
const container = document.querySelector('#container')
container.append(oneDiv)
열심히 기록할 예정🙃