DOM method (2)
(1) UPDATE - textContent, classList.add
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
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
document.querySelector('#container').innerHTML = '';
->削除後
Element.innerHTML
警備員に問題があるので、お勧めしません.
3.removeChildは、サブエイリアスを指定して削除する方法です.すべてのサブアイテムを削除するには、繰り返し文(while、for、etc.)を使用します.次のコードは、サブアイテムが存在しないまで、最初のサブアイテムを削除するコードです.
while (container.firstChild) { container.removeChild(container.firstChild); }
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
while (container.children.length > 1) { container.removeChild(container.lastChild); }
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
(3)Further Study
下記のキーワードを直接検索して勉強してください.
ChildrenとChildNodesの違い(ChildrenとChildNodesのJavaScript domでの違い)
removeChildとremoveの違い(JavaScript domでのremoveChildとremoveの違い)
tweetでforEachを使用できますが、減らすことができないのは(なぜ配列メソッドがnodeListを使用しないのか)
tweetを類似配列から配列に変換する方法(nodeListをJavaScript配列に変換する方法)
Reference
この問題について(DOM method (2)), 我々は、より多くの情報をここで見つけました https://velog.io/@jelkov/DOM-method-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol