プロパティ
windowオブジェクトは、多くのプロパティを持っています。 EventTarget インターフェースからプロパティを継承し、WindowOrWorkerGlobalScope と WindowEventHandlers ミキシンのプロパティを実装しています。
window.closed
このプロパティは読み取り専用で、参照するブラウザ ウィンドウが閉じているかどうかを表示します。 ウィンドウが閉じられている場合はtrue、そうでない場合はfalseとなる。 例えば、現在開いているウィンドウで:
console.log(window.closed)
を実行すると、ブラウザウィンドウは明らかに開いているので、falseと記録されるはずです。
window.console
consoleプロパティはブラウザコンソールへの情報ログに便利な多くのプロパティがあるオブジェクトです。 これは読み取り専用のオブジェクトです。 console のメソッドはデバッグに有用であり、エンドユーザーに情報を提示するために使用すべきではありません。 consoleオブジェクトは以下のメソッドを持っています。
-
console.assert()– 最初の引数がfalse -
console.clear()– コンソールをクリアする -
console.count()– このメソッドが呼び出された回数をログに記録する 与えられた label -
console.countReset()– 与えられた label -
console.debug()– ログレベル ‘debug’ -
console.dir()– 与えられた JavaScript オブジェクトのプロパティ一覧を表示するカウンタの値をリセットします。 -
console.dirxml()– 可能であれば、オブジェクトの HTML または XML 表現を表示します -
console.error()– コンソールにエラーメッセージをログに記録します。 文字列置換と追加の引数を使用して、ログメッセージをフォーマットすることができます。 -
console.group()– レベルごとにインデントされたコンソールメッセージのグループを作成します。groupEnd()でレベル外に移動できる。 -
console.groupCollapsed()– 項目が折りたたまれた状態でレベルごとにインデントされたコンソールメッセージのグループを作成する。groupEnd(). -
console.groupEnd()– 現在のインライングループを終了 -
console.info()– 情報メッセージをログに記録。 ログメッセージをフォーマットするために文字列置換と追加の引数を使用できます。 -
console.log()– 一般的な情報のログ収集に使用されます。 -
console.table()– 表形式でデータを記録し表示する -
console.time()– パラメータで指定した名前でタイマーを開始します。 -
console.timeEnd()– 指定されたタイマーを停止し、開始からの経過時間を秒単位で記録します。 -
console.timeLog()– 指定されたタイマーの値をコンソールに記録します。 -
console.trace()– スタックトレースを記録します。 -
console.warn()– コンソールに警告メッセージを記録します。 文字列置換と追加の引数を使用して、ログ メッセージをフォーマットできます。
window.customElements
customElementsプロパティは読み取り専用で、CustomElementRegistryオブジェクトへの参照を返し、新しいカスタム要素の登録や以前に登録したカスタム要素に関する情報の取得に使用されます。 カスタム要素は Web Components とも呼ばれます。
Web Components は、他の HTML 要素をカプセル化するカスタム要素を作成できるようにする標準です。 これは、さまざまな場所で HTML 要素のグループを再利用できるようにするために必要です。 これがないと、同じグループの HTML 要素を再利用する場合、異なる場所で繰り返さなければなりません。 定義されたカスタム要素は CustomElementRegistry に格納されるので、ブラウザは定義されたカスタム要素が実際に有効な要素であることを知ることができます。
カスタム要素を定義するには、次のコードのように customElements プロパティを使用します:
const customElementRegistry = window.customElements;
customElementRegistry.define('hello-element',
class extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({
mode: 'open'
});
const span = document.createElement('span');
span.setAttribute('class', 'wrapper');
span.innerHTML = 'Hello';
shadow.appendChild(span);
}
});
そして HTML ファイルに、:
<hello-element></hello-element>
上記のコードで、window.customElements オブジェクトの define メソッドを使用しました。 defineメソッドの第一引数には、要素名を渡しています。 そして2番目の要素には、HTMLElementクラスを渡しています。これは、JavaScriptでは実際にはオブジェクトです。 class の constructor メソッドでは、innerHTML に 'Hello' を設定した span 要素を作成し、Web Component のルートであるシャドウ ルートに追加しています。 上記のコードを実行すると、画面に Hello という文字が表示されるはずです。
define メソッドは 3 つの引数をとります。 1 つ目は name で、これはカスタム要素の名前を持つ文字列です。 2つ目の引数はHTMLElementコンストラクタで、コンストラクタ・クラスで、シャドウ・ルートに取り付けたいHTML要素を作成し、作成した要素を表示します。 第3引数は、要素の定義方法を制御するオプションの引数です。 サポートされているのは extends プロパティのみで、これは拡張する組み込み要素を指定するための文字列です。 これは、div , span , p.
のような組み込み要素をカスタマイズするカスタム要素を作成する際に便利です。