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. classをdivエイリアスに追加してCSSスタイルを適用します.
  • 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>

  • classとidを除いて、他のattributeを追加できませんか?
    ->setAttribute.
  • (2)DELETE - remove, removeChild

  • 1. 削除するエンティティの場所が分かっている場合は、このメソッドを使用します.以前に作成および追加したtweet Divを削除します.removeメソッドを使用してください.
  • 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. 最後のサブアイテムを削除し、コンテナのサブアイテムが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の違い(JavaScript domにおけるelementとnodeの違い)
    ChildrenとChildNodesの違い(ChildrenとChildNodesのJavaScript domでの違い)
    removeChildとremoveの違い(JavaScript domでのremoveChildとremoveの違い)
    tweetでforEachを使用できますが、減らすことができないのは(なぜ配列メソッドがnodeListを使用しないのか)
    tweetを類似配列から配列に変換する方法(nodeListをJavaScript配列に変換する方法)