DOM(Document Object Model)이란?
- HTML 요소를 Object처럼 조작할 수 있는 Model
- HTML의 아주 작은 부분까지 접근할 수 있는 구조를 DOM이라고 한다.
- DOM을 이용하면 HTML로 구성된 웹페이지를 동적으로 움직이게 만들 수 있다.
- document 객체에 구현돼 있다.
- DOM은 '트리 구조'다! (부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복)
HTML에 JavaScript를 적용하는 방법
<script src="index.js"></script>
- HTML 파일과 같은 디렉토리에 존재하는 index.js를 불러온다.- 웹 브라우저가 작성된 코드를 해석하는 과정에서
<script>요소를 만나면 HTML 해석을 잠시 멈추고<script>요소를 먼저 실행한다! 등장과 함께 실행된다는 점!
<script> 요소를 추가하는 방법
<head>요소에 추가</body>가 끝나기 전에 추가
DOM 구조 조회
body를 찾아보자
console.dir(document.body)
+ console.log와 달리 DOM을 객체의 모습으로 출력한다.
CREATE
document.createElement('div') // <div> 요소 만들기아래 사진과 같이 잘 만들어진 걸 확인할 수 있었다!
새로 만든 div 요소를 활용하려면 어떻게 할까?
변수에 할당 하자!
const tweetDiv = document.createElement('div')<div>를 만드는 작업을 변수 tweetDiv에 할당하였으니 tweetDiv를 활용하면 되겠다!!
READ
DOM을 이용해 HTML Element를 조회하기
const oneTweet = document.querySelector('.tweet')
- 클래스명이 tweet인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회!
?? 첫 번째 요소만 가져 오는 거 말고 클래스명이 tweet인 모든 엘리먼트를 가지고 올 수 있을까
const oneTweet = documetn.querySelectorAll('.tweet')
1. Document.querySelector(selectors);
- 첫 번째 엘리먼트를 반환, 일치하는 요소가 없다면 null이 반환된다!
2. Document.querySelectorAll(selectors);
- 지정된 셀렉터 그룹에 일치하는 엘리먼트 리스트를 나타내는 정적 NodeList를 반환
3. Document.getElementById(selectors);
- get으로 시작하는 DOM 조회 메서드도 존재한다
- 이전 버전의 브라우저 호환성에 신경 써야 한다면 get 메서드를 사용해야 할 수도 있다!
* 실제 동작은 동일함
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // truediv를 생성하여 container의 맨 마지막 자식의 요소로 tweetDiv 추가하기(append();)
const container = document.querySelector('#container') // 아이디가 'container'인 엘리먼트 조회
const tweetDiv = document.createElement('div')
container.append(tweetDiv)UPDATE
빈 div 요소에 문자열을 삽입해 보자!
const oneDiv = document.createElement('div'); // div 생성
oneDiv.textContent = 'dev' // <div>dev</div>로 업데이트class가 'tweet'인 요소에 css가 적용돼 있다면 방금 만든 div에도 tweet 요소에 씌여진 css를 동일하게 넣고 싶다? div에 class를 부여해 주자!
oneDiv.classList.add('tweet')다른 attribute 추가하는 방법?
+ setAttribute 함수
element.setAttribute('attribute_name', 'attribute_value');
ex) 아이디가 test인 요소에 href 속성 값 변경하기
document.getElementById('test').setAttribute('href', '링크 주소');
또는
const tests = document.querySelector('#test');
tests.setAttribute('href', '링크 주소');DELETE
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv) /// container에 tweetDiv 추가
tweetDiv.remove() // tweetDiv 삭제여러 개의 자식 요소를 삭제하는 방법
document.querySelector('#container').innerHTML = '';
- 간편하고 편리하지만 사이트의 공격 경로가 돼서 잠재적인 보안 위험이 발생할 수 있고 하니 지양하자!반복문 활용해서 여러 개의 자식 요소를 삭제
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
클래스 이름이 tweet인 요소만 찾아서 지우기
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}