📒Javascript DOM #01 :)

8040 ワード
JavaScript テキストリンク

#DOM


DOMはHTMLドキュメントの階層と情報を表し、それを補完できるAPI(すなわち、式と方法を提供するツリー型構造)を提供する.

1.要素ノードの取得


🔵 Document.prototype.getElementByID()

  • パラメータによって渡されるidツリー値を含む要素ノードに移動し、
    • を返します.
  • idのHTML要素がない場合null
    • を返します.
  • id値と同じ名前のグローバル変数を持つ暗黙的宣言とそのノードオブジェクト割り当ての追加効果.

    • 🔵 Document/Element.prototype.getElementsByTagName()

  • の値を持つすべての要素ノードを返します.
    HTML Collectionオブジェクト
  • DOMオブジェクト
    • を返します.
  • Element.prototype.getElementsByTagName()メソッドは、特定の要素によって呼び出され、特定の要素ノードで要素ノードに移動し、
    • を返します.
  • 引数で渡されるタグ名の要素が存在しない場合は、空のHTML Collectionオブジェクト
    • が返されます.

    🔵 Document/Element.prototype.getElementsByClassName()

  • パラメータによって渡されるクラスツリー値を含む要素ノードに移動し、
    • を返します.
    HTML Collectionオブジェクト
  • DOMオブジェクト
    • を返します.
  • Element.prototype.getElementsByClassName()メソッドは、特定の要素によって呼び出され、特定の要素ノードで要素ノードに移動し、
    • を返します.
  • 引数で渡されるタグ名の要素が存在しない場合は、空のHTML Collectionオブジェクト
    • が返されます.

    🔵 Document/Element.prototype.querySelector()

  • パラメータ伝達を満たすcssセレクタの要素ノードが存在しない場合はnull
    • を返す.
  • パラメータに渡すcssセレクタが構文に合致しない場合、DOMExceptionエラー
    • が発生する.

    🔵 Document/Element.prototype.querySelectorAll()


    NodeListオブジェクト、すなわち
  • DOMコレクションオブジェクトを返します.
  • パラメータに渡すcssセレクタが構文に合致しない場合、空のNodeListオブジェクト
    • が戻る.

    🔵 Element.prototype.matches()

  • 特定要素ノード
    • が取得可能であることを検証する.
  • 委任アクティビティ

    • 2.HTML CollectionとNoteList


    ✏️ HTMLCollection

  • HTML Collectionオブジェクトは、ノードオブジェクトをリアルタイムで反映する生き生きとしたDOM集合オブジェクトである.
  • 配列に類似した反復可能オブジェクトHTML Collectionオブジェクトを配列に戻す場合は、配列の高次関数(forEach、map、filter、reduceなど)を使用します.
    • 👾 #1
    [...$elems].forEach(elem => elem.calssName = 'blue');

    ✏️ NodeList

  • querySelector Allメソッドを使用してNodeListオブジェクトを返します.
  • NodeListオブジェクトはノードオブジェクトの状態変更をリアルタイムで反映しません!
  • NodeListオブジェクトはNodeListです.prototype.forEachは、item、entries、keys、valuesを含む方法
    • を継承し、提供することができる.
    $elems.forEach(elem => elem.calssName = 'blue');
  • ChildNodes Propertyが返すNoteListオブジェクトは、ノードオブジェクトの状態の変更をリアルタイムで反映するアクティブなオブジェクトとして機能します.
  • NodeListオブジェクトも配列に変換できます!
  • Array.
    • メソッドまたはスプレッドシートから配列に変換

    3.ナビゲーションノード

  • parentNode,previousSibling,firstChild,childNodes propertyはNodeです.prototypeは、propertyキーにElementを含むpreviousElementSibling、nextElementSibling、およびサブPropertyがElementであることを提供します.Prototypeが提供する
    • すべての
  • ノードのナビゲーション構成は、
    • を誤って無視することなく、アクセス者構成である.

    🔵 サブノードのナビゲート


    🟡 Node.prototype.childNodes

  • NodeListオブジェクトに含める
    • を返す.
  • 要素ノードおよびテキストノードを含むことができる.

    • 🟡 Element.prototype.children

  • HTML Collectionオブジェクトに含めると
    • が返されます.
  • テキストノードは含まれません.

    • 🟡 Node.prototype.firstChild / Element.prototype.firstElemetChild


    は、
  • の第1のサブノード
    • を返す.

    🟡 Node.prototype.lastChild / Element.prototype.lastElemetChild


    最後のサブノード
    • を返す.

    🔵 サブノードが存在するかどうかを確認


    🟡 Node.prototype.hasChildNodes()

  • サブノードの存在はブール型
    • に戻る.
  • テキストノードを含むサブノードの存在を確認します!!

    • 🟡 children.length,ElementインタフェースのchildElementCount Property

  • 要素ノードが存在すると判断した場合!!
    • console.log(!!$fruits.chilren.length); // 0 -> false
console.log(!!$fruits.childElementCount); // 0 -> false

    🔵 親ノードのナビゲート


    🟡 Node.prototype.parentNode

  • テキストノードはDOMツリーの最後の単一ノードなので、親ノードがないのはテキストノード~!

    • 🔵 兄弟ノードのナビゲート


    🟡 Node.prototype.previousSibling / Element.prototype.previousElementSibling

  • 親ノードは、同じ兄弟ノード内をナビゲートし、前の兄弟ノードに戻ります.

    • 🟡 Node.prototype.nextSibling / Element.prototype.nextElementSibling

  • 親ノードは、同じ兄弟ノードで自分の次の兄弟ノードにナビゲートして戻ります.

    • 4.ノード情報の取得


    🔵 Node.prototype.nodeType

  • ノードタイプを表す定数
    • を返す.
  • node.MEMENT NODE:定数1は
    • を返す
  • node.TEXT NODE:定数3は
    • を返します
  • node.DOCUMENT NODE:定数9は
    • を返します.

    🔵 Node.prototype.nodeName


    返される文字列
  • ノードの名前
  • 要素ノード:「LI」などのタグ名を返す文字列
  • テキストノード:文字列「#text」
    • を返す
  • ドキュメントノード:文字列「#document」
    • を返す.

    5.要素ノードでのテキスト操作


    🔵 textContent

  • setterとgetterは、要素ノード上のテキストとすべてのサブノード上のテキストを取得するか、
    • を変更するアクセス者プログラムです.
  • 要素ノードのコンテンツ領域(開始タグと終了タグの間)のすべてのテキスト
    • を返します.
  • childNodes propertyが返すすべてのノードのテキストノードの値、すなわちすべてのテキストを返す->html寸法はすべて無視されます.
  • html 
    •   <div id ="foo">Hello <span>Wold!</span></div>
    👾 #1>返却
  • js 
    •  console.log(document.getElementById('foo').textContent);
// Hello Wold!
    👾 #2>割当て
  • で指定された文字列にHTMLタグが含まれていても、テキストとして認識されます!!つまり、HTML表記はブロック化しない!!
    •  document.getElementById('foo').textContent = 'Hi <span>Wold!</span>'
    👉🏻 ブラウザにHiWoldを表示!!に出力されました!文字列として割り当てられた寸法は、返されたときもテキスト形式で出力されます~!
    HappyLeetcode37:Add Binary
    Python基本