ECMAScript以外の仕様で実装されているJavaScriptのオブジェクト / ECMAScript リファレンス

EventTarget
Window
Node

とりあえずまとめる場所を作ったので、実際に使ってみて、実体をつかむ。

EventTarget

EventTarget インターフェイスは、イベントを受け取ることや、リスナーを持つことができるオブジェクトが実装します。言い換えると、イベントのターゲットはすべて、このインターフェイスに関する 3 つのメソッドを実装しています。

Element とその子、Document、Window は、最も一般的なイベントターゲットですが、他のオブジェクトも、例えば XMLHttpRequest、AudioNode、AudioContext などもイベントターゲットになります。

多くのイベントターゲット (要素、文書、ウィンドウを含む) は、イベントハンドラーを設定するのに onイベント名プロパティや属性を使用することもできます。

コンストラクター「EventTarget()」：新しい EventTarget オブジェクトのインスタンスを作成します。

Window

参考：window

Window.console
Window.document
Window.event
Window.history
Window.location
Window.navigator
Window.performance
Window.screen

Window インターフェイスは、 DOM 文書を収めるウィンドウを表します。 document プロパティは、そのウィンドウに読み込まれた DOM の document オブジェクトを指します。特定の文書が属するウィンドウは、 document.defaultView プロパティを使用して取得できます。

グローバル変数の window は、スクリプトを実行しているウィンドウを表しており、JavaScript コードに公開されます。

Window インターフェイスは、ユーザーインターフェースのウィンドウの概念とは必ずしも直接関連づかない、さまざまな関数、名前空間、オブジェクト、コンストラクターのホームです。一方、 Window インターフェイスはグローバルで使用可能であることが必要な、さまざまなアイテムを含むのに適した場所です。これらの多くは JavaScript リファレンスや DOM リファレンスで文書化しています。

タブブラウザーでは、それぞれのタブが個々の Window オブジェクトで表されます。タブ内で実行している JavaScript から見えるグローバルの window は、常にコードを実行しているタブを表します。しかし、タブブラウザーであっても resizeTo() や innerHeight のように、タブを含むウィンドウ全体に適用されるプロパティやメソッドがあります。一般に、タブに所属することができない合理的な理由があるものは、代わりにウィンドウに属します。

Window.innerWidth

Node

参考：node

DOM の Node インターフェイスは、他の多くの DOM API オブジェクトのベースとなる抽象的な基底クラスです。したがって、これらのオブジェクト型と類似しており、しばしば交換して使用することができます。抽象クラスであるため、単なる Node オブジェクトというものは存在しません。 Node の機能を実装しているオブジェクトはすべて、何れかのサブクラスに基づいています。最も注目すべきものは、 Document, Element, DocumentFragment です。

それに加えて、あらゆる種類の DOM ノードが Node を基底とするインターフェイスで表現されます。これには、 Attr, CharacterData (Text, Comment, CDATASection, ProcessingInstruction がすべて基底とするもの), DocumentType があります。

場合によっては、ベースとなる Node インターフェイスの特定の機能が子インターフェイスに適用されないことがあります。この場合、継承するノードは状況に応じて null を返したり、例外を投げたりします。例えば、子を持てないノード型に子を追加しようとすると、例外が発生します。

NodeList

DocumentType

参考：documenttype

DocumentType インターフェイスは、 doctype を包含する Node を表します。

DocumentFragment

参考：DocumentFragment

DocumentFragment インターフェイスは、親ノードを持たない最小限の文書オブジェクト (文書の断片) を表します。これは Document の軽量版として使用され、標準の文書のようにノードで構成される文書構造の区間を格納します。重要な違いは、文書の断片はアクティブな文書ツリー構造の一部ではないため、断片に対して変更を行っても、文書に影響したり、再フローを起こしたり、変更が行われたときに性能上の影響を及ぼしたりすることがないことです。

DocumentFragment の一般的な利用方法は、まず一つ作成し、その中に DOM のサブツリーを構成し、 Node インターフェイスの appendChild() または insertBefore() などのメソッドを利用して断片を DOM に追加または挿入することです。こうすると断片のノードは DOM に移動し、空の DocumentFragment が残ります。すべてのノードが文書に一括で挿入されるため、それぞれのノードが別個に挿入されれば、その度に再フローや描画が起動する可能性があるところが、この場合は一度しか起動されません。

このインターフェイスはウェブコンポーネントでも大いに役に立っています。 <template>要素はその HTMLTemplateElement.content プロパティに DocumentFragment を含みます。

空の DocumentFragment は document.createDocumentFragment メソッドやコンストラクターを使って作成できます。

Document

参考：document

Document インターフェイスはブラウザーに読み込まれたウェブページを表し、 DOM ツリーであるウェブページのコンテンツへのエントリーポイントとして働きます。

DOM ツリーには <body> や <table> など、多数の要素があります。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。

document.getElementById("demo").innerHTML = "Hello";
document.getElementById("demo").style.fontSize = "35px";
document.getElementById("demo").style.display = "none";

/* appendChild
例を自分で試してみないと全容はわからない。
一旦、間違っててもいいからまとめて、そこから調査して、そして、情報の整理をしよう。 */

を取得する　一部　get	Document.querySelector()
全部　All	Document.querySelectorAll()

Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByTagName()
Document.getElementsByName()

HTMLDocument

参考：htmldocument 非推奨　情報なし

Element

参考：element

Element は Document が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが Element を継承しています。

例えば HTMLElement インターフェイスは HTML 要素の基本インターフェイスであり、 SVGElement インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。

XUL の XULElement インターフェイスのようなウェブプラットフォームの枠外の言語もまた、Element インターフェイスを実装しています。

Element.getElementsByClassName()
Element.innerHTML

HTMLElement

参考：htmlelement

HTMLElement インターフェイスは、任意の HTML 要素を表します。要素によってはこのインターフェイスで直接実装されていたり、これを継承したインターフェイスを通して実装されていたりします。

HTMLElement.innerText

CharacterData

参考：characterdata

CharacterData 抽象インターフェイスは、文字を包含する Node オブジェクトを表します。これは抽象インターフェイスであり、 CharacterData 型のオブジェクトは存在しません。抽象ではない Text、Comment、CDATASection、ProcessingInstruction といったインターフェイスによって実装されています。

Text

参考：text

Text インターフェイスは、 DOM ツリー内でテキストノード (node) を表します。

Comment

参考：comment

Comment インターフェイスは、マークアップ内にある注意書きのテキストを表します。これらは通常の閲覧時には表示されず、このようなコメントはブラウザのソースビュー表示時に閲覧可能です。HTML や XML でコメントは、「」で囲んだコンテンツとして記述します。XML 構文においては、「--」をコメント内に記述することはできません。

Attr

参考：attr

Attr インターフェイスは要素の属性の一つをオブジェクトとして表します。多くの場合、属性値を直接文字列として取得しますが（例: Element.getAttribute()）、一部の関数（例: Element.getAttributeNode()）や反復処理の場面では Attr のインスタンスを返します。

Attr 型のオブジェクトの核となる考え方は、名前と値の関連付けです。属性は名前空間の一部であることもあり、この場合、名前空間を識別する URI と、名前空間の省略形である接頭辞も持っています。

最終的に名前空間接頭辞を無視した場合はローカルとみなされ、名前空間の接頭辞がある場合はそれを含み、コロン (:) でローカル名との間を区切った場合は修飾されているとみなされます。名前空間の外にある属性、名前空間の中にあって接頭辞が定義されていない属性、名前空間の中にあって接頭辞が定義されている属性の 3 つの場合があります。

Performance

参考：performance

Performance インターフェイスは、現在のページのパフォーマンス関連情報へのアクセスを提供します。これはHigh Resolution Time API の一部ですが、Performance Timeline API、Navigation Timing API、User Timing API、および Resource Timing API によって拡張されています。

このタイプのオブジェクトは読み取り専用属性 window.performance を呼び出すことで取得できます。

Animation

参考：animation

Animation はウェブアニメーション APIのインターフェイスで、アニメーションプレイヤーを表し、アニメーションノードやソースに対する再生制御やタイムラインを提供します。

CSSAnimation

参考：cssanimation 実験段階

XMLHttpRequestEventTarget、XMLHttpRequest

参考：xmlhttprequest

参考：xmlhttprequesteventtarget

XMLHttpRequest (XHR) オブジェクトは、サーバーと対話するために使用されます。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。

XMLHttpRequest は AJAX プログラミングで頻繁に使用されます。

XMLHttpRequest という名前ではあるものの、 XML だけでなく、あらゆる種類のデータを受け取るために使用することができます。

通信においてサーバーからのイベントデータやメッセージデータの受信を含む必要があるのであれば、 Server-sent event の EventSource インターフェイスを使用することも検討してください。全二重の通信では、 WebSocket の方が良いかもしれません。

Event

参考：event

CustomEvent
CloseEvent
ErrorEvent
DragEvent
ClipboardEvent
UIEvent
- KeyboardEvent
- TouchEvent
- InputEvent
- MouseEvent
  - PointerEvent

Event インターフェイスは DOM で発生するイベントを表します。

ユーザーの操作によって発生するイベント（マウスボタンのクリック、キーボードを叩くなど）もありますし、非同期タスクの進捗を表すための API によって生成されるイベントもあります。要素の HTMLElement.click() の呼び出しや、イベントを定義し、 EventTarget.dispatchEvent() を使用して指定されたターゲットに送信するなどのようにプログラムから起動されるものもあります。

イベントには様々な型があり、イベントによっては基本の Event インターフェイスを基にした他のインターフェイスを使用することもあります。。 Event 自体は、すべてのイベントで共通のプロパティやメソッドを持っています。

多くの DOM 要素は、これらのイベントを受け入れる（または「待ち受けする」）ように設定することができ、それに応じてコードを実行してイベントを処理する（または「取り扱う」）ことができます。イベントハンドラーはふつう、様々な HTML 要素（<button>, <div>, <span>, など）に EventTarget.addEventListener() を使用して結び付けられ（または「装着され」）、これが一般に古い HTML のイベントハンドラー属性を使用する方法を置き換えています。さらに、このようなハンドラーは正しく追加されたら、必要に応じて removeEventListener() を使用して切り離すことができます。

History

参考：history

History インターフェイスで、ブラウザーのセッション履歴、つまり現在のページが読み込まれたタブまたはフレームで訪問したページを操作することができます。

Location

参考：location

Location インターフェイスは、関連付けられたオブジェクトの場所 (URL) を表します。変更が行われると、関連するオブジェクトに反映されます。 Document インターフェイスおよび Window インターフェイスにはこのような関連付けられた Location があり、それぞれ Document.location および Window.location でアクセスできます。

Navigator

参考：navigator

Navigator.geolocation
Navigator.storage

Navigator インターフェイスは、ユーザーエージェントの状態や身元情報を表します。これにより、スクリプトがこれらの問い合わせを行ったり、アクティビティを実行するために自分自身を登録したりすることができます。

Navigator オブジェクトは、読み取り専用の window.navigator プロパティを使用して取得できます。

Storage

参考：storage

Web Storage API の Storage インターフェイスは、特定のドメインのセッションストレージまたはローカルストレージへのアクセス機能を提供して、例えば保存されているデータアイテムを追加、変更、削除することができます。

ドメインのセッションストレージを操作したい場合は、Window.sessionStorage メソッドを呼び出してください。ドメインのローカルストレージを操作したい場合は、Window.localStorage を呼び出してください。

CSSRuleList、CSSRule、StyleSheetList、StyleSheet

参考：cssrulelist

参考：cssrule

参考：stylesheetlist

参考：stylesheet

CSSRule インターフェイスは、1 つの CSS ルールを表します。 CSSRule からプロパティを継承しているルールを表す型がいくつかあります。

StyleSheetインターフェースを実装するオブジェクトは、単一のスタイルシートを表します。CCSスタイルシートは、より特殊化されたCSSStyleSheetインターフェースを実装します。

console

参考：console

console オブジェクトは、ブラウザーのデバッグコンソール（例えば Firefox のウェブコンソール）へのアクセスを提供します。このオブジェクトの詳細な動作はブラウザーによって異なりますが、一般的に共通の機能セットが提供されています。

console オブジェクトには任意のグローバルオブジェクトからアクセスできます。閲覧スコープの Window や、特定の種類のワーカーを表す WorkerGlobalScope の console プロパティを通してアクセスできます。これは Window.console として公開されていますが、単に console として参照できます。

Screen

参考：screen

Screen インターフェイスは画面を表し、通常は、現在のウィンドウが描画されている画面であり、 window.screen を使用して取得されます。

なお、ブラウザーはブラウザーのウィンドウの中心がどの画面にあるかを検出することで、報告する現在の画面がどれかを判断します。

Geolocation

参考：geolocation

Geolocation インターフェイスは、端末の位置をプログラムから取得することができるオブジェクトを表します。ウェブコンテンツが端末の位置情報にアクセスすることができるようにします。これにより、ウェブサイトやアプリがユーザーの位置に応じてカスタマイズされた結果を提供できるようになります。

このインターフェイスを持つオブジェクトは、 Navigator オブジェクトの navigator.geolocation プロパティを使って得ることができます。

あ

7. KnotTextでのECMAScriptの分類

参考：MDN Web DocsでのECMAScriptの分類

7-1. グローバルオブジェクトのプロパティ(JavaScriptの実行環境がWebブラウザーの場合)

7-1-1. グローバルオブジェクトの値プロパティ

window.globalThis
window.Infinity
window.NaN
window.undefined

7-1-2. グローバルオブジェクトの関数プロパティ

window.isFinite()
window.isNaN()
window.parseFloat()
window.parseInt()
URIハンドリング関数
- window.decodeURI()
- window.decodeURIComponent()
- window.encodeURI()
- window.encodeURIComponent()

7-1-3. グローバルオブジェクトのコンストラクタープロパティ

コンストラクターとは、「オブジェクトを作成する能力を持たせた」関数で、「new」演算子によってオブジェクトインスタンスを作成することができる。

プリミティブデータ型のラッパーオブジェクト
真偽値	window.Boolean()
文字列	window.String()
数値	window.Number()
数値	window.BigInt()
シンボル	window.Symbol()

オブジェクトのためのオブジェクト
window.Object()

関数のためのオブジェクト
window.Function()
関数のより高度なオブジェクト	window.GeneratorFunction()
	window.Generator()
	window.AsyncFunction()
	window.Promise()

配列のためのオブジェクト
window.Array()
配列のより高度なオブジェクト	window.ArrayBuffer()
	window.DataView()
	window.SharedArrayBuffer()
型付き配列のためのオブジェクト	window.Int8Array()	window.Int16Array()
	window.Uint8Array()	window.Uint16Array()
	window.Uint8ClampedArray()
	window.Int32Array()	window.BigInt64Array()
	window.Uint32Array()	window.BigUint64Array()
	window.Float32Array()	window.Float64Array()

日付・時刻のためのオブジェクト
window.Date()

正規表現のためのオブジェクト
window.RegExp()

エラーのためのオブジェクト
window.Error()	window.EvalError()
	AggregateError
	InternalError
	window.RangeError()
	window.ReferenceError()
	window.SyntaxError()
	window.TypeError()
	URIError

Keyed Collections 特殊なデータ集合
マップ	window.Map()	window.WeakMap()
セット	window.Set()	window.WeakSet()

Managing Memory
window.WeakRef()

Reflection
window.Proxy()

7-1-4. グローバルオブジェクトのその他のプロパティ

Atomics
window.Atomics()

JSON
window.JSON()

Math
window.Math()

Reflect
window.Reflect()

7-2. ECMAScriptの演算子「計算・論理・代入」

7-2-1. ECMAScriptの演算子「計算」

加算	減算	乗算	除算	剰余算	累乗	グループ化
+	-	*	/	%	**	( )

正の数	負の数
+A	-A

インクリメント	デクリメント
A++	A--
++A	--A

7-2-2. ECMAScriptの演算子「論理」

否定
!

より大きい	以上	以下	より小さい(未満)
<	<=	>=	>

		型も含めて厳密に比べる
等しい	==	===
等しくない	!=	!==

AND	OR	Null合体演算子
&&	\|\|	??

三項演算子（簡略版ifステートメント）
(condition ? ifTrue : ifFalse)

7-2-3. ECMAScriptの演算子「代入」

代入	計算とともに代入
=	+=
	-=
	*=
	/=
	%=
	**=

代入	条件に合えば代入
=	&&=
	\|\|=
	??=

7-3. ECMAScriptのステートメント

block ステートメント		ブロックを作る
if ステートメント(else)		条件を作る
イテレーションステートメント	do-while ステートメント	必ず1回は実行されるwhileステートメント
	while ステートメント	条件を満たすまで繰り返す
	for ステートメント	指定した回数まで繰り返す
	for-in ステートメント	オブジェクトのためのforステートメント
	for-of ステートメント	配列状のオブジェクト全般のためのforステートメント
	for-await-of ステートメント	Promiseオブジェクトのためのfor-ofステートメント
continue ステートメント		繰り返しの処理をスキップして次の繰り返しへ進む
break ステートメント		繰り返し・ラベル・switchステートメントの処理を中断してステートメントから抜け出す
switch ステートメント(case, default)		条件に一致するcaseを実行する
throw ステートメント		関数の中で例外を発生させ、catchが存在すればcatchに移行する。
try ステートメント(catch, finally)		catchのためのfinallyでtryする？

7-4. オブジェクトのためのパーツ

instanceof	オブジェクトが自身のプロトタイプにコンストラクタのprototype プロパティを持っているか判別する
new	new 演算子を使用すると、開発者はユーザー定義のオブジェクト型やコンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを作成することができる
delete	オブジェクトからプロパティを削除する
in	指定されたプロパティが指定されたオブジェクトにある場合にtrueを返す
super	オブジェクトの親の関数を呼び出すために使用できる
プロパティアクセッサー	オブジェクトのプロパティにアクセスする2種類の方法(ドット表記法、ブラケット表記法)
オブジェクトリテラル	Object initializerによって作成するオブジェクト

7-5. 配列のためのパーツ

配列リテラル	[a, b] = [1, 2]　代入　= [] 配列をつくる配列リテラル「配列」オブジェクト配列初期化 Array()でも可

7-6. 関数のためのパーツ

function	キーワード　いわゆるexpression　関数を作成する
return ステートメント
this	[関数] キーワード
function*	[ジェネレータオブジェクトを返す、ジェネレータ関数を定義]
yield(yield*)	ジェネレータ関数キーワード
async function	キーワード非同期関数
await	Promiseオブジェクト非同期関数内のみ
class(extends)	いわゆるexpression ECMAScript 2015~のclass定義

7-7. その他のパーツ

use strictモード
,(comma) 演算子	それぞれの演算対象を（左から右に）評価し、最後のオペランドの値を返します。これにより、複数の式が評価される複合式を作成することができ、複合式の最終値はそのメンバー式の一番右端の値となります。これは、for ループに複数の引数を提供する場合によく使用されます。
typeof 演算子	対象の値のデータ型を返す
void 演算子	必ずundefinedを返す
?.(Optional chaining) 演算子	接続されたオブジェクトチェーンの深くに位置するプロパティの値を、チェーン内の各参照が正しいかどうかを明示的に確認せずに読み込むことを可能にします。
labeled ステートメント	ラベル付け？
import
export