DOM(Document Object Model)은 HTML에 접근하여 JS의 객체처럼 HTML을 조작할 수 있는 모델이며 DOM의 구조를 조회하기 위해서는 'console.dir(DOM을 객체의 모습으로 보여주는 것)' 이 유용하다.
[Document는 DOM을 대표하는 객체로 console.dir 에서 확인 할 수 있다]
document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 하는 방법을 알아야 하고 또한, HTML에 적용(APPEND)하는 메소드도 존재한다.
DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
1. createElement - CREATE
|
1
|
const tweetDiv = document.createElement('div')
|
cs |
(div element를 만든상태에 tweetDiv 변수를 선언)
2. APPEND - append, appendChild
|
1
|
document.body.append(tweetDiv)
|
cs |
(DOM구조와 연결 되지 못한 div element를 HTML에 추가 적용)
- prepend : 선택한 요소의 자식 요소 앞에 내용 삽입
- append : 선택한 요소의 자식 요소 뒤에 내용 삽입
- appendChild는 DOM 함수이고
- append는 JavaScript 함수
3. querySelector, querySelectorAll - READ
|
1
2
|
const oneTweet = document.querySelector('.tweet')
const tweets = document.querySelectorAll('.tweet')
|
cs |
(tweet를 클래스 이름으로 가진 모든 HTML 엘리먼트 조회 가능 All이 붙고 안 붙고는 하나만 가져오는지 다 가져오는지의 여부에 따른다.)
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 엘리먼트를 반환한다. 일치하는 요소가 없으면 null을 반환하게 된다.
4. textContent, id, classList, setAttribute - UPDATE
|
1
2
3
4
5
6
|
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
|
cs |
(class를 지정 후, append로 container에 붙이기)
5.remove, removeChild, innerHTML = "" , textContent = "" - DELETE
|
1
2
3
4
|
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
|
cs |
(자식 엘리먼트를 지우는 방법 중에 가장 간단한 방법은 innerHTMLinnerHTML을 활용하는 방법이지만, innerHTML은 여러 보 안상의 문제를 가지게 되어 비추천된다고 한다.)
removeChild는
|
1
2
3
4
|
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
|
cs |
while 조건문을 이용하여 원하는 부분만큼 삭제할 수 있으며, 아래처럼 직접 일일이 엘리먼트 자체를 찾아서 지울 수도 있다고 한다.
|
1
2
3
4
5
6
7
8
|
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
|
cs |
＊ innerHTML과 textContent의 차이
두 가지 모두 값을 할당할 수 있는 특성(화면의 표시내용이 바뀜)이라 되도록이면, textContent를 사용하는 것이 좋은 것 같다. 성능과 보안에 강점이 있으며 결과적으로 해당 노드의 raw text를 얻게 됨으로써 이후 의도한 대로 가공할 수 있기 때문이다. ex)<a href = "https://www.naver.com">네이버</a> => 네이버만 표기
innerHTML
HTML Parsing이 필요한 문자열에만 사용하도록 하는 게 좋으며 그게 아니라면, 성능상 좋지 않고 XSS 공격에도 취약하므로 innerHTML은 사용하지 않는 것이 좋다고 한다.
ex)<a href = "https://www.naver.com">네이버</a> => 해당 태그 전체 모두 표기
'개념정리' 카테고리의 다른 글
| 8/18[TIL] underbar 과제 (0) | 2020.08.18 |
|---|---|
| 8/14[TIL] 고차함수 (0) | 2020.08.14 |
| 8/10[TIL] CSS (0) | 2020.08.10 |
| [8/10]TIL <HTML> (0) | 2020.08.10 |
| 개발자로의 커리어 전환 2주일... (1) | 2020.08.10 |
