DOM method (2)
(1) UPDATE - textContent, classList.add
- 1. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.
const oneDiv = document.createElement('div')
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
- 2. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
- 3. 이번에는 append를 이용해 container의 자식 요소로 추가합니다.
const container = document.querySelector('#container')
container.append(oneDiv)
- 4. 정리
const oneDiv = document.createElement('div') // div 엘리먼트 생성
oneDiv.textContent = 'dev' // div 엘리먼트에 dev 입력
oneDiv.classList.add('tweet') // class 추가 한다.
const container = document.querySelector('#container') // 컨테이너 호출
container.append(oneDiv) 컨테이너의 자식요소로 추가한다.
oneDiv
<div class="tweet">dev</div>
const oneDiv = document.createElement('div')
console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
const container = document.querySelector('#container')
container.append(oneDiv)
const oneDiv = document.createElement('div') // div 엘리먼트 생성
oneDiv.textContent = 'dev' // div 엘리먼트에 dev 입력
oneDiv.classList.add('tweet') // class 추가 한다.
const container = document.querySelector('#container') // 컨테이너 호출
container.append(oneDiv) 컨테이너의 자식요소로 추가한다.
oneDiv
<div class="tweet">dev</div>
-
class와 id 말고는 다른 attribute를 추가할 수는 없나요?
-> setAttribute 라는 메소드를 검색해보세요.
(2)DELETE - remove, removeChild
- 1. 먼저 삭제하려는 엘리먼트의 위치를 알고 있는 경우에 사용하는 방법입니다. 앞서 생성하고 추가한 tweetDiv 를 삭제합니다. remove 메소드를 사용하세요.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
- 2. 여러 개의 자식 엘리먼트를 지우려면, 어떻게 해야 할까요? innerHTML 을 이용하면, 아주 간단하게 모든 자식 엘리먼트를 지울 수 있습니다.
document.querySelector('#container').innerHTML = '';
->삭제후
Element.innerHTML
-
보안에 문제가 있어서 권장하지 않는다.
- 경고: 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, innerHTML 을 사용하면 코드가 거부 될 가능성이 높습니다. 예를 들어, 브라우저 확장에서 innerHTML을 사용하고 addons.mozilla.org에 확장을 제출하면 자동 검토 프로세스를 통과하지 못합니다.
-
3. removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드입니다. 모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다. 다음의 코드는 자식 엘리먼트가 남아있지 않을 때까지, 첫 번째 자식 엘리먼트를 삭제하는 코드입니다.
while (container.firstChild) { container.removeChild(container.firstChild); }
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
- 4. container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거합니다.
while (container.children.length > 1) { container.removeChild(container.lastChild); }
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
- 5. 클래스 이름이 tweet인 엘리먼트만 찾아서 제거합니다.
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
(3)Further Study
-
아래 키워드에 대해서 직접 검색하여 학습하세요.
-
element와 node의 차이 (difference between element and node in javascript dom)
-
children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
-
removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
-
tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
-
tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
Author And Source
이 문제에 관하여(DOM method (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jelkov/DOM-method-2
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
아래 키워드에 대해서 직접 검색하여 학습하세요.
element와 node의 차이 (difference between element and node in javascript dom)
children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
Author And Source
이 문제에 관하여(DOM method (2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jelkov/DOM-method-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)