このシリーズの冒頭で、「HTML 要素は、ドキュメント オブジェクト モデルを構成するノードです」と述べています。 要素ノードの種類についてはすでに説明しました。このセクションでは、これらのノードにクエリを実行できる要素 API について説明します。
DOM と AOM
DOM は、ドキュメントにアクセスして操作するための API です。DOM はドキュメント内のすべてのノードのツリーです。 子を持つノードもあれば、できないノードもあります。このツリーには、要素とその属性、テキストノードが含まれています。
ブラウザツールでは、上に示したようなツリーの可視化はできませんが、要素インスペクタでノードを確認できます。
ブラウザのデベロッパー ツールで確認できるツリー表現は、ユーザー補助ツリーです。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 要素固有の要素から継承されます。
継承されます。一部の要素固有のインターフェースは、複数の類似した要素によって実装されます。
インターフェースには次のものがあります。
HTMLAnchorElement
-<a>
HTMLAreaElement
-<area>
HTMLAudioElement
-<audio>
HTMLBaseElement
-<base>
HTMLButtonElement
-<button>
HTMLCanvasElement
-<canvas>
HTMLDataElement
-<data>
HTMLDataListElement
-<datalist>
HTMLDetailsElement
-<details>
HTMLDialogElement
-<dialog>
HTMLEmbedElement
-<embed>
HTMLFieldSetElement
-<fieldset>
HTMLFormElement
-<form>
HTMLHtmlElement
-<html>
HTMLIFrameElement
-<iframe>
HTMLImageElement
-<img>
HTMLInputElement
-<input>
HTMLLabelElement
-<label>
HTMLLegendElement
-<legend>
HTMLLIElement
-<li>
HTMLLinkElement
-<link>
HTMLMapElement
-<map>
HTMLMediaElement
~<audio>
、<video>
HTMLMenuElement
-<menu>
HTMLMetaElement
-<meta>
HTMLMeterElement
-<meter>
HTMLModElement
~<ins>
、<del>
HTMLObjectElement
-<object>
HTMLOListElement
-<ol>
HTMLOptGroupElement
~<optgroup>
HTMLOptionElement
-<option>
HTMLOutputElement
-<output>
HTMLPictureElement
-<picture>
HTMLProgressElement
-<progress>
HTMLQuoteElement
-<cite>
、<blockquote>
、<q>
HTMLScriptElement
-<script>
HTMLSelectElement
-<select>
HTMLSlotElement
-<slot>
HTMLSourceElement
-<source>
HTMLStyleElement
~<style>
HTMLTableCellElement
~<td>
、<th>
HTMLTableColElement
~<col>
、<colgroup>
HTMLTableElement
-<table>
HTMLTableRowElement
-<tr>
HTMLTableSectionElement
-<tfoot>
、<tbody>
、<thead>
HTMLTemplateElement
-<template>
HTMLTextAreaElement
-<textarea>
HTMLTimeElement
-<time>
HTMLTitleElement
-<title>
HTMLTrackElement
-<track>
HTMLVideoElement
-<video>
命名規則は「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 は何の略ですか。
コンテンツが表示されているタブに関する情報を探すのに役立つインターフェースはどれですか。