21.7.5 TIL (DOM)

10664 ワード
TIL テキストリンク
学習目標
  • DOMの概念は理解できる.
  • DOMの構造を理解し、HTMLとDOMの類似性を理解します.
  • HTMLからJavascriptファイルをロードする際の注意点
    実行結果は、
  • ラベルの適用位置によって異なる場合があることが理解される.

    • DOMとは?


    Document Object Modelの略で、HTML要素をObjectオブジェクトとする
    操作可能なモデル
    domはdocumentオブジェクトで実装されます
    dom構造をクエリーするときにconsoleを使用します.dirを使用してDOMをオブジェクトの外観として出力します.

    子供、親を探して


    documentオブジェクトでhtmlのサブエレメントと親エレメントを検索する方法は、次のとおりです.
    document.body.children    body태그 안에 자식엘리먼트를 조회

ex)
document.body.children[0].parentElement  자식엘리먼트중 0번째 인덱스의 부모엘리먼트를 조회 ,  부모엘리먼트인 body가 출력된다

    JavaScriptをHTMLに適用する(bodyラベルに適用する必要がある)

    <script src="myScriptFile.js"></script>
    図に示すように、JavaScriptをHTMLに適用するにはscriptタグを使用します.
    ただし、cssのようにheadラベルにこのコードを入力すると、
    jsファイルでは、bodyでDOM操作html要素を使用しても適用されません
    jsファイルはheadラベルで終了したため
    したがって、DOMを使用してbody内部で要素を操作すると、bodyタグは終了する前に
    jsファイルをhtmlに関連付ける

    DOMを使用したHTML操作


    学習目標
    JavaScriptアクション
  • DOMを使用して、HTML要素を追加、削除、または変更できます.
  • createElement - CREATE
  • querySelector, querySelectorAll - READ
  • textContent, id, classList, setAttribute - UPDATE
  • remove, removeChild, innerHTML = "", textContent = ""- DELETE
  • appendChild - APPEND
  • innerHTMLとテキストコンテンツの違い

    • CREATE - createElement

    먼저 createElement메소드로 div 엘리먼트를 만듭니다
document.createElement('div')
const tweetDiv = document.createElement('div')  // twwetDiv 변수에 div엘리먼트를 할당한다

현재는 dom의 트리구조를 보면 생성된 div엘리먼트가 부모엘리먼트에 연결되어있지 않는 상태이다

    APPEND - append, appendChild

    append 메소드를 통해 연결되어 있지 않은 변수 tweetDiv를 body엘리먼트 안에 넣는다
document.body.append(tweetDiv)

    READ - querySelector, querySelectorAll


    querySelector

    querySelector 에 '.tweet' 을 첫 번째 인자로 넣으면, 
클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있다
const oneTweet = document.querySelector('.tweet')

여러 개의 엘리먼트를 한 번에 가져오기 위해서는, querySelectorAll 을 사용한다
클래스 이름이 tweet 인 모든 HTML 엘리먼트를 유사 배열로 받아옵니다.
const tweets = document.querySelectorAll('.tweet')
    生成されたdivセグメントをbodyセグメントではなくコンテナセグメントに入れる方法は以下の通りである.
    // id가 container인 엘리먼트를 조회하여 변수에 할당하고
// 그 변수에 append 메소드를 통해 생성한 div엘리먼트를 연결한다
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

    UPDATE - textContent, classList.add


    以前appendメソッドで接続したコンテンツが空の要素または
    既存のエンティティでtextContentを使用すると、コンテンツにコンテンツを追加できます.
    console.log(oneDiv) // <div></div>
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
    cssを適用するdiv要素クラス属性を追加するには、次の手順に従います.
    oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
    IDまたはclass以外の属性を同様の方法で追加できるsetAttribute関数があります.
    element.setAttribute('attribute_name','attribute_value');
함수의 인자로 속성의 키와 값을 입력받아 엘리먼트에 속성을 추가한다

ex)oneDiv.setAttribute( 'href', 'https://velog.io' );

    DELETE - remove, removeChild


    削除するエンティティの場所が分かっている場合は、
  • です.
    const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.
  • 複数のエンティティを削除する場合、innerHTMLを使用して
    • を簡単にすべて削除する.
    document.querySelector('#container').innerHTML = '';
    innetHTMLは簡単ですが、セキュリティ上の問題があります
    innetHTMLのremoveChildメソッドは、サブエイリアスを指定することで削除されます.
    繰り返し文ですべてのサブエレメントを削除できます
  • サブエレメントを指定して削除する方法
    • const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}   // 자식엘리먼트가 전부 삭제될때 까지 , 첫번째 자식엘리먼트를 삭제하는 코드
    テキスト、式、文
    UTFとは何ですか.