DOM
Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.
CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법입니다. (CRUD를 이해한 다음에는 세세한 메서드들을 알아야 합니다.)
document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 방법을 학습합니다. DOM에는 HTML에 적용(APPEND)하는 메서드가 따로 있으니 주의.
Create
document.createElement('div') // <div> 요소 생성
const tweetDiv = document.createElement('div') // tweetDiv에 할당
document.body.append(tweetDiv) // 변수 tweetDiv에 담긴 새로운 <div> 요소를 <body> 요소에 append
메소드설명
| .append() | 선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다. |
| .prepend() | 선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다. |
| .appendTo() | 선택된 요소를 해당 요소의 마지막에 추가한다. |
| .prependTo() | 선택된 요소를 해당 요소의 첫번째에 추가한다. |
| .insertBefor(a, b) | 첫 번째 인수로 전달받은 노드를 두번째 인수로 전달받은 노드 앞에 추가한다. (두 번째 인수는 반드시 insertBefore 메서드를 호출한 노드의 자식 노드여야 한다. 두 번째 인수가 null일 경우엔 appendChild 메서드처럼 동작한다.) |
Read
const oneTweet = document.querySelector('.tweet')
// 클래스 이름이 tweet인 HTML 요소를 조회합니다.
const tweets = document.querySelectorAll('.tweet')
// querySelectorAll로 클래스 이름이 tweet 인 모든 HTML 요소를 유사 배열로 받아옵니다.
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // trueUpdate
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev'; // textContent를 이용해 문자열을 입력
console.log(oneDiv) // <div>dev</div>
oneDiv.classList.add('tweet') // classList.add를 이용해 'tweet' 클래스를 추가
console.log(oneDiv) // <div class="tweet">dev</div>class와 id 말고 다른 attribute를 추가하는 방법은 MDN에서 setAttribute 라는 메서드를 검색
Delete
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
여러 개의 자식 요소를 지우려면, 어떻게 해야 할까?
innerHTML 을 이용하면, 아주 간단하게 모든 자식 요소를 지울 수 있다.
document.querySelector('#container').innerHTML = '';
// id가 container인 요소 아래의 모든 요소를 지움
innerHTML 을 이용하는 방법은 분명 간편하고 편리한 방식이지만, innerHTML은 보안에서 몇 가지 문제를 가지고 있다. 이 방법을 대신할 다른 메서드를 사용한다.
removeChild 는 자식 요소를 지정해서 삭제하는 메서드이다.
모든 자식 요소를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있다. 다음의 코드는 자식 요소가 남아있지 않을 때까지, 첫 번째 자식 요소를 삭제하는 코드이다.
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
} // container의 첫 번째 자식 요소가 존재하면, 첫 번째 자식 요소를 제거
또는 직접 클래스 이름이 tweet인 요소만 찾아서 지우는 방법도 있습니다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
} // 클래스 이름이 tweet인 요소만 찾아서 제거
모자딥다의 DOM 페이지가 너무 많다...😭😭
'Language > JavaScript' 카테고리의 다른 글
| this (2) | 2023.03.13 |
|---|---|
| DOM 2 (2) | 2023.03.08 |
| 모듈 패턴, ES6 모듈 (0) | 2023.03.05 |
| 스코프 (0) | 2023.03.05 |
| 다양한 함수의 형태 정리 (0) | 2023.03.05 |
