DOM에 대해서 기록을 남겨본다.
🌲DOM(Document Object Mode)이라고 거창하게 말하지만 그냥 HTML이 인식하는 Tree구조 인것이다.
그림으로 보면 다음과 같다.
이러한 HTML의 구조는 HTML에서 자바스크립트를 불러와 조작할 수 있다. 즉, DOM을 Javascript로 조작하여 HTMl Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
Javascript를 통해 HTML 요소를 추가, 조회하는 방법을 알아보자.
const divElement = document.createElement('div');
//근데 이렇게만 적어주면 컴퓨터가 div가 어디에 연결되어 있는 자식인지 알지 못한다. 그래서
document.body.append(divElement);
//이렇게 body에 divElement를 넣겠다는 것을 append를 통해 적용시켜 줘야함<조회하는 방법도 알아보자>
const bodyDiv = document.querySelector('.divElement');
//class이름인 경우
const bodyDiv = document.querySelector('#divElement');
// id이름인 경우
const bodyDiv = document.querySelectorALL('.divElement');
// class이름이 divElement인 모든 HTML요소들을 '유사배열'로 받아옴
const bodyDiv = document.getElementById('divElement');
//querySelector말고 다른 방법으로 요소 가져오기<내용을 업데이트하는 방법도 알아보자>
const divElement = document.createElement('div');
divElement.textContent = 'Hi';
//div태그 안에 Hi라는 택스트가 만들어 진다.
divElement.classList.add('thisIsdiv');
// div태그에 thisIsdiv라는 class이름이 만들어진다.<지우는 방법을 알아보자>
const container = document.querySelector('#container');
const divElement = document.createElement('div');
container.append(divElement);
divElement.remove()
//이렇게 하면 입력했던 div태그가 사라짐
//여러개의 자식 Element를 한번에 지우고 싶다면
document.querySelector('#container').innerHTML = '';
//이렇게 하면 되기는 하는데 몇가지 보안 문제를 들고 있어서
while (container, firstChild) {
container.removeChild(container, firstChild);
}
//이렇게 removeChild의 반복문을 통해 container의 모든 자식 Element를 지워줄 수 있음
const tweets = document.querySelectorAll('.tweet');
tweets.forEach(function(tweet) {
tweet.remove();
})
or
for (let tweet of tweets) {
tweet.remove();
}
//이렇게 클래스 이름이 tweet인 Element만 골라서 제거할 수도 있음*for문 작성법 참고
🙃
Notorious