JS. DOM

10223 ワード
JS/Node テキストリンク

DOM (The Document Object Model)


BOM (Brower Object Model)

  • ブラウザ関連オブジェクトのセット
  • ブラウザオブジェクトモデルの最上位オブジェクトはwindowという名前のオブジェクトであり、このDOMはそのwindowオブジェクトのサブオブジェクト
    • である.

    DOMとは

  • HTMLドキュメントのタグをJavascriptで使用可能なオブジェクトとして作成する場合は、ドキュメントオブジェクト
    • と呼ばれます.
  • 樹形資料構造

    • 一番上の<html>はルートディレクトリです
    <ノードタイプ>

  • ドキュメントノード
    DOMツリーの開始点へのアクセス

  • 要素ノード
    HTML要素を表す
    要素にはネストされた親子関係があり、親子関係によって情報を構造化します.

  • テキストノード
    エレメントノードのサブノードであり、独自のサブノードを持たないHTMLエレメントを表すテキスト

  • 属性ノード
    HTML要素の属性を表す

    • 操作DOM（CRUD）


    (1)documentオブジェクトのcreateElementメソッドを使用してdiv要素を作成する
    let comment = document.createElement("div");
comment.className = 'comment';
console.log(comment) // <div class="comment"></div>
    (2)documnetオブジェクトのappendメソッドを用いて他のエンティティに挿入する
    document.body.append(comment)
    textContent
    comment.textContent = 'dev';
console.log(comment) // <div class="comment">dev</div>
    classList.add
  • ユニットにclass
    • を追加
    comment.classList.add('tweet')
console.log(commnet) // <div class='comment tweet'>dev</div>

    1.要素へのアクセス


    (1) document.getElementById(id)
    要素ノードを
  • id属性値として選択し、複数のノードがある場合、最初の要素
    • を返す.
    (2) document.getElementByClassName(class)
  • class属性値
    • としてすべての要素ノードを選択
  • スペース、合計
  • の戻り値が複数の場合、配列ではなく類似の配列です.
    • (3) document.getElementByTagName(tagName)
  • タグ名を使用して、すべての要素ノード
    • を選択します.
    const elems = document.getElementsByClassName('red');
console.log([...elems]); // [li#one.red, li#two.red, li#there.red]
    (4) document.querySelector(cssSelector)
  • cssコレクタを使用して要素ノードを選択し、複数ある場合は最初の要素
    • を返します.
    const oneTweet = document..querySelector('.tweet')
// querySelector로 클래스 이름이 tweet인 HTML 엘리먼트를 조회
    (5) document.querySelectorAll(cssSelector)
  • は、HTML Collection
    • ではなくNodeListを返す.
  • で指定するcssセレクタを使用して、すべての要素ノード
    • を選択します.

    2.ナビゲーション


    (1) parentNode
  • 親ノード
    • に移動
    const elem = document.querySelector('#two');
elem.parentNode.className = 'blue'
    (2) firstChild,lastChild
  • サブノード(最初、最後)
    • に移動
    elem.firstChild.className = 'blue';
elem.lastChild.className = 'blue';

    に注意


    ほとんどのブラウザでは、要素間のスペースまたは改行をテキストノードと見なします.
    したがってfirstElementChild、lastElementChildを使用することができます
    (3) hasChildNode()
  • サブノードを確認し、ブール値
    • を返します.
    (4) childNodes
  • サブノードのセットを返し、テキスト要素を含むすべてのサブ要素
    • を返します.
  • Nodelist
    • (5) children
  • サブエレメントは、Elementタイプエレメント
    • のみを返します.
    const elem = document.querySelector('ul');

if (elem.hasChildNodes()) {
	console.log(elem.childNodes);
  	console.log(elem.children);
}
    innerHTML vs innerText vs textContent
    <div class="wrap">
  This is fruit.
  <span>banana</span>
  <span>apple</span>
  Fruit is delicious.
</div>
    (1) innerHTML
    Elementのプロパティを使用して、ElementのHTML、XMLを取得または設定できます.
    自分ではテキスト値のみを取得し、子供はテキストとタグ値を同時に取得します.
    document.querySelector('.wrap').innerHTML;
    結果
    This is fruit.
    banana
    apple
    Fruit is delicious.
    (2) innerText
    このElementからユーザーの「表示」テキストの値を取得
    自分と子のテキスト値のみを取得しますが、モデリング情報は取得しません.
    document.querySelector('.wrap').innerText;
    結果
    This is fruit. banana apple Fruit is delicious.
    (3) textContent
    改行やスペースなどのスタイル情報を同時にインポート
    document.querySelector('.wrap').textContent;
    結果
    This is fruit.
    banana
    apple
    Fruit is delicious.
    Django Framework - Create File
    C#テキスト内容を読み出し、Devコントロールにデータを表示する