啓発DOM整理(2)


第二章。Documentノード


2-1. ドキュメントノードの概要

  • ドキュメントから継承されたHTML Documentジェネレータは、DOCUMENT NODEを生成します.(window.document)
    ダイアログを呼び出すdocumentは、DOCUMENT NODEオブジェクトであるHTML Documentによって生成される.
    console.log(window.document.constructor); // HTMLDocument
    console.log(window.document.nodeType); // 9. (DOCUMENT_NODE)
  • 2-2. HTML Documentのプロパティとメソッド(継承を含む)

  • 注意すべき属性と方法
  • doctype
  • documentElement
  • implementation
  • activeElement
  • body
  • head
  • title
  • lastModified
  • referer
  • URL
  • defaultView
  • compatMode
  • ownerDocument
  • hasFocus()
  • 2-3. 一般的なHTMLドキュメント情報の取得

  • ドキュメント情報
  • タイトル:document.title
  • url : document.URL
  • referer : document.referer
  • 最終修正日:document.lastModified
  • 互換モード:document.compatMode
  • 2-4. ドキュメントサブノード

  • ドキュメントノードは、window.documentなどのDocumentTypeノードオブジェクトとElementノードオブジェクト(ラベル...)を含む1つ持つことができます.
    cf) window.ドキュメントとDocumentオブジェクトを混同することはできません.window.documentはDOMインタフェースの起点であることを知るだけです.
  • 2-5. ドキュメントは<!DOCTYPE>、<html lang="en"、<head>、<body>のショートカットを提供します。

  • 番通り
  • document.doctype :
  • document.documentElement < html lang='en'>
  • document.head : < head>
  • document.body : < body>
    cf) window.document:HTML Document(DOCUMENT NODE)から作成
    doctypeはDcoumentType(DOCUMENT TYPE NODE)によって
  • を生成する.

    2-6. document.implementation.hasFeature()を使用してDOM仕様/機能を検出

  • document.implementation.hasFeature()を使用すると、ブラウザが現在のドキュメントで実装/サポートする機能とレベルがわかります.
    たとえば、ブラウザは、Core DOM Level 3仕様が実装されているかどうかを決定するために、メソッドに機能名とバージョンを渡します.console.log(document.implementation.hasFeature('Core','3.0'))
  • 2-7. ドキュメント内のフォーカスまたはアクティブなノードへの参照の取得


  • document.ActiveElementを使用すると、ドキュメント内のフォーカスまたはアクティブなノードへの参照をすぐに取得できます.

  • ページをロードするときに、ドキュメントのフォーカスを<textarea>ノードに設定し、activeElementプロパティを使用してノードへの参照を取得できます.
    <textarea></textarea>;
    
    document.querySelector("textarea").focus();
    
    // 지금 포커스를 받는 노드는 ? <textarea>
    console.log(document.activeElement);
  • 2-8. ドキュメントまたはドキュメント内の特定のノードにフォーカスがあるかどうかを確認します。

  • document.hasFocus()メソッドを使用して、ユーザーが現在のHTMLドキュメントのロードウィンドウにフォーカスしているかどうかを決定します.
    index.htmlをリフレッシュし、他のウィンドウをクリックしてfalseに戻ります.
    setTimeout(function () {
      console.log(document.hasFocus())
    }, 1000)
  • 2-9. document.defaultViewは、トップ/グローバルオブジェクトへのショートカットです。

  • document.defaultViewプロパティを使用すると、最上位オブジェクトを呼び出すことができます.JS環境では、ウィンドウオブジェクトを示します.
    document.defaultView(); // window
  • このプロパティを使用すると、
  • の最上位オブジェクトがないDOM、Webブラウザで実行されていないJS環境では、最上位オブジェクト領域にアクセスできません.
  • 2-10. ElementのownerDocumentを使用してDocumentへの参照を取得

  • ownerDocumentプロパティを呼び出して、ノードを含むドキュメントへの参照を返します.