✏️Achievement Goals
✅ DOM의 개념을 이해할 수 있다.
✅ DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
✅ DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
📝summary
DOMDocument Object Model의 약자로,
html 문서의 구조와 관계를 객체(object)로 표현한 모델
🤯그래서 도대체 돔이 뭔데????????
자바스크립트는 HTMl 조작에 특화된 언어다
HTML 조작을 하기 위해서는 HTMl을 자바스크립트가 해석하고 이용할 수 있는
객체(Object) 자료형으로 만들어주는 작업이 필요하다
<div id="practice" class="red">안녕하세요</div>이렇게 HTMl 파일에 div 태그가 있으면 자바스크립트로 변경이 가능하다
이때 자바스크립트로 div를 조작하기 위해서 컴퓨터가 div를 객체(Object)
자료형으로 정리를 해놓는다는 것이다
var document = {
div태그 : {
id : {practice}
style : {color : "red"}
innerHTML : "안녕하세요"
}
}위의 코드와 비슷하게 객체 형식의 자료에 정리를 해 두어야 원하는 자료를 가져오고 변경 할 수 있다 이게 바로 DOM이다 !
이렇게 html문서의 태그를 자바스크립트가 이용할 수 있는 객체(Object)로 만드는 것을 DOM 이라고 한다
DOM은 자바스크립트를 사용해서 엘리먼트의 속성을 얻어내거나 변경할때 사용 한다
📚DOM 으로 HTML 조작하기
브라우저는 DOM tree를 찾고 조작하는 걸 쉽게 도와주는 여러 가지 메소드를(DOM API)를 제공한다
여러가지 메소드를 배워보자!
1. 새로운 엘리먼트 만들기
활용하기 위해서는 변수에 할당해주면 된다
const newEl = document.createElement('div')
console.log(newEl) // <div></div>2. 문자열 입력
newEl.textContent = '문자열 입력은 textContent'
console.log(newEl) // <div>문자열 입력은 textContent<div>3. 클래스 추가
newEl.classList.add('red')
console.log(newEl) // <div class = 'red'>문자열 입력은 textContent<div>4. 엘리먼트 안에 추가하기
document.body.append(newEl)엘리먼트가 아직 화면상에는 보이지 않는다
화면에 보이게 하고 싶다면 append 메소드를 사용해서 body 태그 안에 넣어준다
이렇게 추가된 웹페이지를 볼 수 있다
이때 바디태그가 아닌 원하는 곳에 넣기 위해서는
원하는 곳의 정보를 조회할 수 있어야 한다
5. 정보 조회 (객체 반환)
element = document.querySelector(selectors);
// selector의 그룹과 일치하는 document안 첫번째 엘리먼트를 반환한다.
// 일치하는게 없으면 null을 반환한다DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의
첫 번째 인자로 셀렉터(Selector)를 전달하여 확인할 수 있고
셀렉터로는 HTML 태그("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용된다
<body>
<div id="container">
<h2>Tweet List</h2>
<div class="tweet">hello</div>
<div class="tweet">world</div>
<div class="tweet">code</div>
<div class="tweet">states</div>
</div>
</body>이런 코드가 있다면
querySelector : 선택자가 선택하는 요소의 첫번째 요소를 반환
console.log(document.querySelector(".tweet"))
// <div class="tweet">hello</div>
querySelectorAll : 모든 요소(NodeList)를 반환
console.log(document.querySelectorAll(".tweet"))
// NodeList {0: HTMLDivElement, 1: HTMLDivElement, 2: HTMLDivElement, 3: HTMLDivElement, entries: ƒ entries()…}
// 0: <div class="tweet">hello</div>
// 1: <div class="tweet">world</div>
// 2: <div class="tweet">code</div>
// 3: <div class="tweet">states</div>
위의 코드에서 container 안에 div 태그를 추가해 주고 싶다면 이렇게 사용 할 수 있다
const container = document.querySelector('#container')
container.append(newEl)6. 삭제
1) 삭제하려는 엘리먼트의 위치를 알고 있는 경우
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // append 했던 엘리먼트를 삭제할 수 있다2) 여러개의 자식 엘리먼트 삭제
document.querySelector('#container').innerHTML = '';
// id가 container인 엘리먼트 아래의 모든 엘리먼트를 지운다innerHTML은 보안상의 문제를 가지고 있기 때문에 다른 방법을 사용한다
innerHTML은 크로스 사이트 스크립팅 공격에 취약하다는 문제가 있다 innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에, 해커가
<script>태그를 사용해 JavaScript 코드를 작성한 뒤 실행되도록 만들 수 있다
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
// removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드이다
// 모든 자식 엘리먼트를 삭제하기 위해, 반복문을 활용할 수 있다
// 자식 엘리먼트가 남아있지 않을 때까지,
// 첫 번째 자식 엘리먼트를 삭제하는 코드이다
3) 원하지 않는 부분까지 지워지는 경우 방지
<h2>Tweet List</h2> 제목에 해당하는 h2 태그는 남겨놓고 싶을 경우
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
// container의 자식 엘리먼트가 1개만 남을 때까지
// 마지막 자식 엘리먼트를 제거const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
// 직접 클래스 이름이 tweet인 엘리먼트만 찾아서 지우는 방법