HTML API

このシリーズの冒頭で、「HTML 要素は、ドキュメント オブジェクト モデルを構成するノードです」と述べています。 要素ノードの種類についてはすでに説明しました。このセクションでは、これらのノードにクエリを実行できる要素 API について説明します。

DOM と AOM

DOM は、ドキュメントにアクセスして操作するための API です。DOM はドキュメント内のすべてのノードのツリーです。 子を持つノードもあれば、できないノードもあります。このツリーには、要素とその属性、テキストノードが含まれています。

要素とテキストノードを示す MLW ノードツリー。

ブラウザツールでは、上に示したようなツリーの可視化はできませんが、要素インスペクタでノードを確認できます。

DOM/ARIA。

ブラウザのデベロッパー ツールで確認できるツリー表現は、ユーザー補助ツリーです。AOM は 使用できます。同様に、ユーザー補助ツリーには、すべてのマークアップ要素、属性、テキストを表すオブジェクトが含まれます。 ノード:

AOM の例。

HTML 要素 API

DOM の真ん中の文字は「オブジェクト」です。オブジェクト指向プログラミングの入門編で紹介した person または car オブジェクトの例と同様です。 ドキュメント ツリー内のすべてのノードは、JavaScript で操作できるオブジェクトになります。

このブラウザには、 ネイティブにサポートされているメソッド、イベント、プロパティのクエリと更新を提供する API。 要素ノードには、要素に対して設定されているすべての属性に関する情報が含まれます。HTML インターフェースを使用して 要素の属性に関する情報です。たとえば、HTMLImageElement.alt を使用できます。 すべての画像の alt 属性を取得します。

let allImages = document.querySelectorAll('img');
allImages.forEach((imageInstance) => {
  console.log(imageInstance.alt);
});

HTML インターフェースは、要素の属性へのアクセスだけではありません。さまざまな情報にアクセスできますGoogle では、 読み取り専用の HTMLElement.offsetHeight を見つけて、レイアウトに対するページ内の各セクションの高さを取得します。

let allSections = document.querySelectorAll('section');
allSections.forEach((sectionInstance) => {
  console.log(sectionInstance.offsetHeight);
});

ユーザーがデバイスの向きやビューポートの幅を変更した場合、各 <section> の高さ それに応じて DOM プロパティも自動的に更新されます。

HTML インターフェース API は、属性値へのアクセスに限定されません。DOM から UI の現在の状態に関する情報が提供される。 HTML API はその情報すべてにアクセスできます。現在の再生に視聴が含まれている動画の長さ、 HTMLMediaElement.duration で動画（または音声）の再生が終了すると、 HTMLMediaElement.currentTime、 それぞれ HTMLMediaElement.ended です。

使用可能な要素インターフェース

セクション要素を除き、このシリーズでこれまでに説明し、まだ取り上げていないほとんどの HTML 要素には、 関連する DOM インターフェースがありますすべての要素の基本インターフェースの名前は Element です。 HTMLElement は、要素とすべての HTML 要素固有の要素から継承されます。 継承されます。一部の要素固有のインターフェースは、複数の類似した要素によって実装されます。

インターフェースには次のものがあります。

命名規則は「HTML」です。その後に、要素または要素のグループを大文字のキャメルケースで記述し、その後に「Element」と続きます。 要素または要素部分のグループが正確なパターンに従っていません。このトークンをこれらを覚える必要はありません。 重要なことは、必要なときに調べることができるように、その存在を知っておくことです。

要素のコレクションがある場合は、コレクション インターフェースもあります。たとえば、 HTMLCollection.namedItem() メソッドは最初の コレクション内の id 属性または name 属性がパラメータと一致する要素。一致する要素がない場合は null。

30 個を超える要素に、HTMLElement 以外の関連付けられた DOM インターフェースがありません（<address>、<article>、 <section>、<nav>、<header>、<footer>、<aside>、<hgroup>。多数の要素はサポートされていませんが 非グローバル属性には、HTMLPElement（<p> 要素）や HTMLUnknownElement などの要素固有のインターフェースがあります。 （<😃> または定義されていないその他の要素）が、追加のプロパティやメソッドを実装していないインターフェース HTMLElement から継承されたプロパティとメソッドの上位に表示されます。

冗長な API メソッドとプロパティ

インターフェースのメソッド名またはプロパティ名がインターフェースと同じ場合、継承元のメソッドまたはプロパティは、そのメソッドまたはプロパティを上書きします。 継承されます。imageInstance.alt と sectionInstance.offsetHeight を使用して、上記の alt プロパティと offsetHeight プロパティにアクセスしたとき どの API がアクセスされていたかがコードで特定されませんでした。

一般的には、この 2 つの例のように、これは問題にはなりません。しかし、そういう場合もあります。たとえば、HTMLCollection.length 読み取り専用であり、継承する HTMLOptionsCollection インターフェースの length プロパティ（<select> の options プロパティでのみ返される）を使用して、コレクション サイズを設定することもできます。

その他のインターフェース

DOM ノードのブランチ位置の操作を可能にする追加のインターフェースもあります。EventTarget インターフェース。次の機能を提供します。 addEventListener() と removeEventListener() を持つ us は Node インターフェースと Window インターフェースに継承されます。次に、Element、Document、DocumentFragment（カスタム要素を参照）の各インターフェースは Node から継承し、HTMLElement インターフェースは Element から継承します。

node インターフェース

あらゆる種類の DOM ノードは、Node に基づくインターフェースによって表されます。 では、DOM ツリーに関連する要素として情報とメソッドが提供されます。Node インターフェースを使用すると、ノードをクエリしてノードツリーに追加できます。

ダグラス クロックフォードの有名な「Walk the DOM」この関数は、Node の firstChild を利用します。 と nextSibling プロパティ。

const walk_the_DOM = function walk(node, callback) {
  callback(node);
  node = node.firstChild;
  while (node) {
    walk(node, callback);
    node = node.nextSibling;
  }
};

Node の appendChild() と カスタム要素を定義する際の cloneNode() メソッド。 Node インターフェースには、DOM のクエリと操作に役立つ多くのプロパティとメソッドが用意されています。

customElements.define('star-rating',
  class extends HTMLElement {
    constructor() {
      super(); // Always call super first in constructor
      const starRating = document.getElementById('star-rating-template').content;
      const shadowRoot = this.attachShadow({
        mode: 'open'
      });
      shadowRoot.appendChild(starRating.cloneNode(true));
    }
  });

attachShadow() メソッドは、要素のメソッドです。 行うことができます。shadowRoot インターフェースもあり、 Shadow DOM API が メイン DOM ツリーに配置されます。

Document インターフェースと HTMLDocument インターフェース

Document インターフェースは Node から継承します。これは、 ドキュメントが HTML、SVG、XML、MathML など、ブラウザで読み込まれたウェブページ。Document インターフェースも HTMLDocument インターフェースから継承します。

document を使用すると、ノードタイプにすばやくアクセスして、次のような特定の要素タイプのコレクションを作成できます。 document.body と document.styleSheets。HTMLDocument を使用すると、ドキュメントに関連する情報に Document.location のような HTML ノードで見つかりません。 Document.lastModified、Document.Cookie。

ドキュメント インターフェースに表示される機能に基づいて使用できる API がいくつかあります。その中には、Drag and Drop API などがあります。 FullScreen API を使用できます。どちらも Element から継承します。

Window インターフェース

ウィンドウ インターフェースには、DOM 以外にも、グローバルに利用可能なアイテムが含まれており、DOM の操作に使用できます。ウィンドウがもたらすもの MDN の JavaScript に記載されている関数、名前空間、オブジェクト、コンストラクタ および DOM 参照をご覧ください。

Window インターフェースは、ドキュメントを含むオブジェクトの API です。グローバル window オブジェクトは、インスタンスが 表示されます。すべてのブラウザタブには、独自の Window オブジェクトが含まれます。ウィンドウ インターフェースはタブの内容をクエリできる ウィンドウやデバイス全体を確認できますたとえば、resizeTo() メソッドを使用すると、ブラウザ ウィンドウのサイズ変更に使用できます。devicePixelRatio プロパティを使用して、デバイスのディスプレイ ピクセルにアクセスできます。タブに関する情報にアクセスすると、 タブに表示される DOM ツリーではなく、ウィンドウが目的のインターフェースである可能性が高いと判断できます。

Web Worker など、いくつかの API は、ウィンドウ インターフェースを通じて表示される機能に基づいて利用できます。 と IndexedDB API を使用します。

理解度をチェックする

HTML API に関する知識をテストします。

DOM の O は何の略ですか。

指向:
もう一度お試しください。
オブジェクト
正解です。
アウター。
もう一度お試しください。

コンテンツが表示されているタブに関する情報を探すのに役立つインターフェースはどれですか。

ウィンドウ
正解です。
ドキュメント
もう一度お試しください。
ノード
もう一度お試しください。