210426. Today I Learned(TIL) : DOM

7415 ワード
DOM テキストリンク

DOMは、javascriptを使用してエンティティの属性値を取得または変更します。

  • モデル
    • は、JavaScriptオブジェクトを処理するようにHTML要素を操作することができる.
  • 、つまりJavaScriptが使用可能であればDOMを使用してHTML
    • を操作することができる.
  • Document Object Model
  • HTML文書の構造と関係をオブジェクトとして表すモデル
  • ツリー構造
  • htmlドキュメントおよびJavaScriptオブジェクトには、ツリー構造
    • があります.
  • documentはグローバル変数であり、
    • にアクセスできる.
    <HTML>

<body>
	<div id="practice" class="highlight red">
    	여기 엘리먼트가 하나 있습니다
        <span>자식도 있습니다</span>
        <span>자식도 여럿 있습니다</span>
    </div>
</body>    
    <HTML 엘리먼트를 JavaScript 객체로 표현>

   {
	tagName: 'DIV',
    id: 'practice',
    classList: ['highlight', 'red'],
    textContent: '여기 엘리먼트가 하나 있습니다 자식도...',
    parentElement: body,
    children: [
    	{
         tagName: 'SPAN',
         textContent: '자식도 있습니다'
         },
         {
          tagName: 'SPAN',
          textContent: '자식도 여럿 있습니다'
         }
       ]
    }

    Domの作成、適用、読み取り、更新、削除(CARUD)

  • Create: createElement
    • JavaScriptにアクションの結果を含めるには、変数を宣言し、変数に結果値を割り当てる必要があります.同様に、DOMを使用してJavaScriptでHTML要素を作成できます.
    const newDiv = document.createElement('div')
    しかし、createElementのようなelementはまだ空に浮かんでいる.ブラウザで使用できるのは、新しく作成した要素を必要な親要素のサブ要素として追加する場合のみです.
  • Append: append, appendChild
    • 前に作ったnewDivをbodyの子と呼びましょう
    document.body.append(newDiv)
    ⚔▼appendとappendChildの違い(簡単!)⚔️
    -->appendは一度に複数のサブノードを貼り付けることができますが、appendChildは一度に1つのサブノードしか貼り付けることができません.
  • Read - querySelector, querySelectorAll
    • クエリーでは、querySelectorを使用してHTML構造の要素をJavaScriptにロードできます.
    クエリーで最もよく使われるHTMLタグ、id、classの3種類.
    const readDiv = document.querySelector('div')
const classDiv = document.querySelector('.className')
const idDiv = document.querySelector('#idName')
    querySelector Allは一度に複数の要素をインポートします.これにより、クエリの要素は配列のようにfor文を使用することができます.ただし、これらの要素は実際の配列ではなく、「類似配列」(Array-like Object)であることに注意してください.
    const allClassDiv = document.querySelectorAll('.className')
  • Update - textContent, classList, add 
    • textContent를 이용해 문자열을 추가

console.log(newDiv) // <div></div>
newDiv.textContent = 'something'
console.log(newDiv) // <div>something</div>
    classList.add를 이용해 클래스를 추가

newDiv.classList.add('classA')
console.log(newDiv) // <div class="classA">something</div>
    setAttribute를 이용해 아이디를 추가

newDiv.setAttribute('id', 'idA')
console.log(newDiv) // <div class="classA" id="idA">something</div>
  • Delete - remove, removeChild 
    • newDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있음.
    class를 삭제하는 것도 가능

newDiv.classList.remove('classA')
console.log(newDiv) // <div id="idA">something</div>
    golang map回転jsonの順序問題
    反応と流れでイオンチャットアプリを構築する方法