TIL 6. DOM (1)

13236 ワード
TIL JavaScript テキストリンク
HTML:ドキュメントの意味と構造(空白)を表すブラウザで理解できる言語
CSS:視覚元素を添加するための言語(顔料)
💡 HTML、CSSに接続するにはどうすればいいですか?
  • Inline Style
  • Style tag
  • リンク入力
    • Javascript:Webページを動的に作成する言語
  • プログラミングの論理特性を用いて動的に実現した.
  • HTMLに接続するには、次の手順に従います.
    script tag/.js外部リンクimport

    • What is DOM?


    👉HTML、JSをつなぐ中間橋渡し役
    👉Webページにアクセスして要素を作成したり、コンテンツを追加したり、クラスを付与したりすることができます.

    Document Object Model


    ドキュメント(html)をオブジェクト化するモデル
  • ページのHTMLを階層化し、ツリー構造のオブジェクトモデル
    • を生成する.
  • JSによるWebページへのアクセスと変更

    • 🔎 どうして客体形態なの?
  • DOMはツリー構造であり、オブジェクトとしてのアクセスが最も便利な
    • である.

    1.なぜHTMLにアクセスするのですか?


    ブラウザのレンダリングエンジンはHTMLドキュメントをグループ化し,ブラウザが理解できるデータ構造DOMを生成する.

    🔎ここでDOMは？


    DOM:Document Object Modelは、HTMLドキュメントの階層と情報を表すことによってそのAPI、すなわちプロバイダとメソッドを制御するツリー型データ構造である.

    →ツリー:ノードの階層/親ノードと子ノードからなる
    →ルートノード:最上位ノード.親ノードがありません.サブノードは0個以上あります.
    →リーフノード:サブノードがないノード
    ノードオブジェクトからなるツリーデータ構造をDOMと呼びます!
    <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul id="fruits">
        <li class="apple">Apple</li>
        <li class="banana">Banana</li>
        <li class="orange">Orange</li>
    </ul>
    
    <script src="app.js"></script>
</body>
</html>
    上のHTML構造を分割し、以下のDOMを生成します.

    出典:モダンJavaScript deep diff 679 p
    ✔DOMはHTML文書の階層と情報を表す
    ✔ノードオブジェクトのタイプ、タイプおよび必要な機能を構成およびメソッドのセットとして提供するDOM API
    ✔DOM APIでHTMLの構造、内容、スタイルを動的に操作できます!
    Input要素ノードオブジェクトのプロパティ
    基本タイプのオブジェクトを指定
    オブジェクト
    Object
    イベントを刺激するオブジェクト
    EventTarget
    ツリー構造内のノードオブジェクト
    Node
    ブラウザでレンダリング可能なWebドキュメントの要素(HTML、XML、SVG)を表すオブジェクト.
    Element
    WebドキュメントのHTML要素を表すオブジェクト.
    HTMLElement
    HTML要素のinput要素を表すオブジェクト
    HTMLInputElement

    2.要素ノードの取得


    2-1. idを使用して要素ノードを取得する:getElementById()


    Document.prototype.getElementById:id値を持つ要素ノードに移動して戻ります
    👉getElementByIdメソッドはDocumentです.プロトタイプのpropertyです.documentで呼び出す必要があります.

    2-2. タグ名を使用して要素ノードを取得する:getElementByTagName()


    Document.prototype.getElementByTagName:パラメータとして渡されるタグ名を持つすべての要素ノードをナビゲートして返します
    👉getElementByTagNameメソッドは、HTML Collectionオブジェクトの複数の要素ノードオブジェクトを返します.
    関数は1つの値しか返されません.したがって、複数の値を返す場合は、配列やオブジェクトなどの資料構造に入れる必要があります.
    👉DOMコレクションオブジェクトとしてのHTML Collectionオブジェクトは、似たような配列オブジェクトであり、小さなかわいいオブジェクトでもある.

    2-3. クラス名を使用した要素ノードの取得:getElementsByClassName()


    Document.prototype/Element.prototype.getElementsByClassName:パラメータとして渡されるclass値を持つすべての要素をナビゲートして返します
    -複数のclassを指定し、パラメータとして渡されるclass値をスペースで区切ります.

    2-4. cssセレクタを使用したエレメントノードの取得:スタイルを適用するHTMLエレメントを指定するときに使用する構文

    * { ... } : 전체선택자_ 모든 요소를 선택
P { ... } : 모든 p 태그 요소를 모두 선택
#foo { ... } : 아이디 값이 'foo'인 요소를 모두 선택
.foo { ... } : class 값이 'foo'인 요소를 모두 선택
input[type=text] { ... } : 어트리뷰트 선택자/ input 요소 중에 type 어트리뷰트 값이 'text'인 요소를 모두 선택
div p { ... } : 하위 선택자 / div 요소의 하위 요소 중 p 요소를 모두 선택
div > p { ... } : 자식 선택자 / div 요소의 자식 요소 중 p 요소를 모두 선택
p + ul { ... } : 일반 선택자 / p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택
p ~ ul { ... } : 가상클래스 선택자 / hover 상태인 a 요소를 모두 선택
a:hover { ... } : 가상요소선택자 / p요소의 콘텐츠 앞에 위치하는 공간을 선택
일반적으로 content 프로퍼티와 함께 사용
p::after { ... }

    2-5. 要素ノードに移動して戻ります:querySeletor()


    Document.prototype/Element.prototype.QuerySelector():パラメータとして渡されるCSSセレクタを満たす要素ノードを返します.
    複数の要素ノードがコミットCSSセレクタ
  • パラメータを満たす場合、最初のノード
    • のみが戻る.
  • パラメータによって伝達されるCSSセレクタの要素ノードが満たされていない場合:null
  • パラメータに渡すCSSセレクタが構文に合致しない場合、DOMExceptionエラー
    • が発生する.
    ✔querySelector All():パラメータとして渡されるCSSセレクタを満たすすべての要素ノードを返します
    ✔querySelector All():DOM集合オブジェクトであるNoteListオブジェクトは配列オブジェクトに戻り/類似しており、小さい

    2-6. 特定の要素ノードを取得できることを確認します:matches()


    Element.prototype.matches():パラメータで渡されたcssセレクタが特定の要素ノードを取得できるかどうかを確認します(true/false戻り)

    3. HTMLCollection, NodeList


    📌特長
  • DOM APIは、複数の結果値のDOM集合オブジェクト
    • を返す.
  • は配列のようなオブジェクトですが、いずれもかわいい
    • です.
  • for...の文は巡回可能であり、電子構文を使用して配列
    • に戻ることができる.
  • アクティブオブジェクト(ただし、NoteListはほとんど非アクティブオブジェクトであり、場合によってはアクティブオブジェクトのみ)
    👉したがって、ノードオブジェクトの状態にかかわらず、安全にDOMコレクションを使用する場合は、HTML CollectionまたはNodeListオブジェクトを「配列」に変換することが望ましい.配列として使用すると、配列高次関数を使用できるので、利点があります.

    • 4.ナビゲーションノード


    4-1. 空白テキストノード


    HTML要素間のスペース、タブ、改行などのスペース(スペース)は、空のテキストノードを生成します.

    4-2. サブノードのナビゲート


    ✔ 4-2-1. Node.prototype.childNodes
    すべての
  • サブノードに移動し、DOMコレクションオブジェクトNodeListに入れると
    • に戻る.
  • ChildNodes Propertyが返すNodeListには、要素ノードだけが含まれていません.
    テキストノードを含めることもできます.
    • ✔ 4-2-2. Element.prototype.children
  • サブノードでは、すべての要素ノードのみをナビゲートし、HTML Collectionの
    • に戻ります.
  • テキストノードは含まれません.
    • ✔ 4-2-3. Node.prototype.firstChild
  • は、第1のサブノード
    • を返す.
  • テキストノードor要素ノード
    • を返します.
    ✔ 4-2-4. Node.prototype.lastChild
    最後のサブノード
    • を返す.
  • テキストノードor要素ノード
    • を返します.
    ✔ 4-2-5. Element.prototype.firstElementChild
    は、
  • の第1のサブエレメントノード
    • を返す.
  • 要素ノード
    • のみが戻る.
    ✔ 4-2-6. Element.prototype.lastElementChild
    最後のサブエレメントノード
    • を返します.
  • 要素ノード
    • のみが戻る.

    4-3. 要素ノードでのテキストノードの検索:firstChild

  • 要素ノードのテキストノードは要素ノードのサブノード
    • である.
  • 要素ノードのテキストノードはfirtstChild propertyを介してアクセスできます.
    • は、
  • 要素ノードまたはテキストノード
    • を返します.
    <!DOCTYPE html>
<html>
<body>
	<div id="foo">Hello</div>
    <script>
    	//요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근할 수 있다.
        console.log(document.getElementById('foo').firstChild); //#text
    </script>
</body>
</html>

    4-4. 親ノードのナビゲート:Node。prototype.parentNode


    4-5. 兄弟ノードのナビゲート


    ✔ 4-5-1. Node.prototype.previousSibing
  • 親ノードは、同じ兄弟ノードで自分の前の兄弟ノードに移動し、
    • を返します.
    は、
  • 要素ノードまたはテキストノード
    • を返します.
    ✔ 4-5-2. Node.prototype.nextSibling
  • 親ノードは、同じ兄弟ノードで自分の次の兄弟ノードに移動し、
    • を返します.
    は、
  • 要素ノードまたはテキストノード
    • を返します.
    ✔ 4-5-3. Node.prototype.previousElementSibling
  • 親ノードは、同じ兄弟ノードで自分の前の兄弟要素ノードに移動し、
    • を返します.
  • 要素ノード
    • のみが戻る.
    ✔ 4-5-4. Node.prototype.nextElementSibling
  • 親ノードは、同じ兄弟ノードで自分の次の兄弟要素ノードに移動し、
    • を返します.
  • 要素ノード
    • のみが戻る.

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


    5-1. nodeValue


    NodeValueはアクセス者構成で、setterもgetterも存在します.したがって、参照も割り当ても可能です.
  • ノードオブジェクトのノード値構成を参照して、ノードオブジェクトの値を返します.
  • ノードオブジェクトの値:テキストノードのテキストを返します.

    • 5-2. textContent


    要素ノードのtextContent propertyを参照すると、要素ノードのコンテンツ領域内のすべてのテキストが返されます.(HTMLマークアップを無視)
  • 要素ノードのtextContent propertyに文字列を割り当てると、要素ノードのすべてのサブノードが削除され、割り当てられた文字列がテキストとして追加されます.
    • 出典:モダンjavascript deep diff
    JAvaコンカレントツールクラス:CountDownLatch、CyclicBarrier、Exchanger
    CopyOnWriteArrayList分析-どのような問題を解決できるか