JS Dev Blog
DOM 개념 정리 본문
DOM(Document Object Model)은 HTML을 Javascript가 이해할 수 있게 객체로 인식하는는 모델을 말한다. 조금 더 자세히 설명하면 <body>나 <div> 같은 html문서의 태그들을 javascript가 이용할 수 있는 객체(Object)로 만드는 것을 의미한다. DOM을 사용하면 Javascript를 통해 웹페이지를 동적으로 제어(생성, 수정 삭제)할 수 있다.
DOM의 특징
- 트리구조로 되어있다 (*트리구조 : 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복됨)
- 자바스크립트를 이용해서 엘리먼트의 속성값을 얻어내거나 변경할 수 있다.
- document라는 전역변수로 접근 가능하다.
자주 사용되는 메소드
// Create
document.createElement('div')
const newDiv = document.createElement('div') // 변수 newDiv에 새로운 div Element 할당
document.body.append(newDiv) // 새로운 div element를 body element에 append
// Read
const oneContent = document.querySelector('.contents') // class이름이 contents인 element중 첫 번째 element 조회
const content = document . querySelectorAll('.contents') // class이름이 contents인 모든 Element를 유사배열로 받아옴
console.log(document.getElementById('container') === document.querySelector('#container') // true
//get*와 querySelector는 유사한 역할을 함. get*이 더 오래된 방식.
// Update
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
oneDiv.classList.add('content')
console.log(oneDiv) // <div class ="content">dev</div>
const container = document.querySelector('#container')
container.append(oneDiv) //append를 이용해 container의 자식 요소에 oneDiv를 추가, content class 스타일 적용됨.
//remove
const container = document.querySelector('#container')
const oneDiv = document.createElement('div')
container.append(oneDiv)
oneDiv.remove() // append 했던 엘리먼트를 삭제할 수 있다.
//여러 개의 자식 엘리먼트를 지우는 방법
//container의 첫 번째 자식 엘리먼트가 존재하면, 첫 번째 자식 엘리먼트를 제거합니다.
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
//container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거합니다.
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
//class 이름이 content인 element만 찾아서 지우기
const contents = document.querySelectorAll('.content')
contents.forEach(function(content){
content.remove();
})
// or
for (let content of contents){
content.remove()
}
'Development > HTML&CSS' 카테고리의 다른 글
| 이미지 삽입 (0) | 2022.06.08 |
|---|