TIL 020|文書オブジェクトモデルDOM

6472 ワード
TIL JavaScript WeCode テキストリンク

1. DOM


ドキュメントオブジェクトモデル(Document Object Model,DOM)は、ページ内のすべてのコンテンツ(HTML)を階層的にオブジェクトとして表すモデルである.
オブジェクトのアクセス方法では、ポイントシンボルを使用してドキュメントオブジェクトにアクセスすることから始めます.このドキュメント・オブジェクトを使用すると、ページの内容の変更、html要素の新規作成、クラスの付与、スタイルの付与など、多くの操作を実行できます.

DOMオブジェクトツリー構造の可視化資料.各タグは、エレメントノード(element node)または通常のエレメントと呼ばれ、ツリー構造を構成します.ルートノードhtmlを基準としてhead,bodyというサブノードがあり,枝のようにサブノードを形成し続ける.

2.必要な要素へのアクセス

document.body.style.background = 'blue';
// body 의 배경을 파랑색으로 변경
document.bodyはbodyに近い例である.このように、documentというエントリポイントから、必要な要素ノードにアクセスする代表的な関数がいくつかあります.
  • document.getElmentById()
  • document.getElementsByClassName()
  • document.getElementsByTagName()
  • document.querySelector()
  • document.querySelectorAll()
    • 上記の関数を使用して、必要な要素にアクセスし、変更できます.
    const myFirstClass = document.getElementsByClassName('myClass')[0];
const contactEmail = document.getElementById('contactEmail');

myFirstClass.innerHTML = '퍼스트 클래스' 
contactEmail.style.color = 'green'
    上記のコードを説明する場合は、「myClass」というクラスの最初の要素にアクセスした後、「firstClass」文字を入力します.次に、「contactEmail」という要素にアクセスし、背景色を緑に変更します.
    getElementsByClassNameはelements(複数)であるため、myClassに対応する要素を含む集合を返します.したがって、配列内の最初の要素にアクセスするには、[0]のように要素を指定する必要があります.逆にidは一意の値であるため、getElementByIdのように1つの要素にアクセスするだけでよい.

    3.スクリプトの場所


    ブラウザは、HTMLの読み取り中に<script>タグに遭遇したときにDOMの生成を停止し、まずスクリプトを実行します.このブラウザの操作順序によって、次の問題が発生します.
  • <script>スクリプトの下のDOMにアクセスできません.
  • ページに大きなスクリプトファイルがある場合、ユーザーがスクリプトをダウンロードして実行するまで、スクリプトの下のページが表示されます.
    • 容量の少ないページの場合、<script>タグは<body>の一番下にあり、すべてのコンテンツを表示した後にスクリプトファイルを実行できます.これにより、ページコンテンツの出力をブロックすることなく、スクリプトの上の要素にアクセスできます.
    しかし、この方法は完璧な解決方法にはならない.HTMLドキュメント自体が非常に大きいと仮定すると、ブラウザがHTMLドキュメント全体をダウンロードし、スクリプトをダウンロードすると、ページが非常に遅くなります.
    これらの問題を解決できる<script>属性はdeferおよびasyncである.
  • defer
    ブラウザは、deferプロパティを持つスクリプト(以下、deferスクリプトまたは遅延スクリプトと略称する)をバックグラウンドからダウンロードします.したがって、遅延スクリプトのダウンロード中にHTMLスライスは停止せず、遅延スクリプトの実行はページ構成が完了するまで遅延する.
    • <script defer src=""></script>
  • async
    asyncスクリプトはdeferスクリプトと同様にバックグラウンドでダウンロードされます.したがって、HTMLページはasyncスクリプトのダウンロードが完了するのを待つのではなく、ページ内のコンテンツを処理および出力します.ただし、deferとは異なり、asyncスクリプトは実行中にHTMLパーティションを停止します.他のスクリプトはasyncスクリプトを待たず、asyncスクリプトも他のスクリプトを待たない.
    これらの特徴により、ページにasyncスクリプトが複数ある場合、実行順序が異なります.実行はダウンロード完了後のスクリプト順に行います.
    • <script async src="https://long.js"></script>
<script async src="https://small.js"></script>
    位置が狭い.jsは下だけどlongダウンロードがjsより先の場合は、まず実行されます.これにより、最初にロードされたスクリプトが最初に実行され、「load-firstorder」と呼ばれます.



    references


    https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
    https://ko.javascript.info/script-async-defer
    TIL 210124
    Javascriptの基礎