recursal/MDN huggingface dataset:
Element: pointerup イベント
=======================

`pointerup` イベントは、ポインターがアクティブではなくなったときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("pointerup", (event) => {});

onpointerup = (event) => {};
```

イベント型
-----

`PointerEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

PointerEventイベントプロパティ
---------

*このインターフェイスは `MouseEvent` および `Event` からプロパティを継承しています。*

`PointerEvent.pointerId` 読取専用 

イベントを発生させたポインターの固有の識別子です。

`PointerEvent.width` 読取専用 

ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用 

ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用 

ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用 

ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用 

Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用 

X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用 

ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用 

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用 

このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

例
-

`addEventListener()` を使用した例です。


```js
const para = document.querySelector("p");

para.addEventListener("pointerup", (event) => {
  console.log("Pointer up");
});
```


`onpointerup` イベントハンドラープロパティを使用した例です。


```js
const para = document.querySelector("p");

para.onpointerup = (event) => {
  console.log("Pointer up");
};
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointerup-event |
| Pointer Events # dom-globaleventhandlers-onpointerup |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`
Element: ariaHasPopup プロパティ
===========================

**`ariaHasPopup`** は `Element` インターフェイスのプロパティで、`aria-haspopup` (en-US) 属性の値を反映し、要素によって発生させることができるメニューやダイアログなどの対話型ポップアップ要素の型と利用できるかどうかを示します。

値
-

以下のいずれかの値を持つ文字列です。

`"false"`

この要素にはポップアップがありません。

`"true"`

この要素にはメニューであるポップアップがあります。

`"menu"`

この要素にはメニューであるポップアップがあります。

`"listbox"`

この要素にはリストボックスであるポップアップがあります。

`"tree"`

この要素にはツリーであるポップアップがあります。

`"grid"`

この要素にはグリッドであるポップアップがあります。

`"dialog"`

この要素にはダイアログであるポップアップがあります。


**警告:** 様々な `aria-haspopup` 値への対応は、属性を指定する要素によって異なる可能性があることに注意してください。`aria-haspopup` を使用する際には、ARIA 仕様に準拠し、必要なブラウザーや支援技術でテストした際に期待通りの動作をするようにしてください。

例
-

この例では、ID が `animal` の要素の `aria-haspopup` 属性は "`true`" に設定されています。`ariaHasPopup` を使用して、値を "`listbox`" に更新します。これは `listbox` ポップアップを呼び出すコンボボックスとして有益な値です。


```html
<div class="animals-combobox">
  <label for="animal">Animal</label>
  <input
 id="animal"
 type="text"
 role="combobox"
 aria-autocomplete="list"
 aria-controls="animals-listbox"
 aria-activedescendant=""
 aria-expanded="false"
 aria-haspopup="true" />
  <ul id="animals-listbox" role="listbox" aria-label="Animals">
    <li id="animal-cat" role="option">Cat</li>
    <li id="animal-dog" role="option">Dog</li>
  </ul>
</div>
```



```js
let el = document.getElementById("animal");
console.log(el.ariaHasPopup); // true
el.ariaHasPopup = "listbox";
console.log(el.ariaHasPopup); // listbox
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariahaspopup |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: before() メソッド
======================

**`Element.before()`** は一連の `Node` オブジェクトまたは文字列を、この `Element` の親の子リストの中、この `Element` の直前に挿入します。文字列は `Text` ノードと等価なノードとして挿入されます。

構文
--


```js
before(param1)
before(param1, param2)
before(param1, param2, /\* … ,\*/ paramN)
```

### 引数

`param1`, …, `paramN`

挿入する一連の `Node` オブジェクトまたは文字列です。

### 返値

なし (`undefined`)。

### 例外

`HierarchyRequestError` `DOMException`

ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。

例
-

### 要素の挿入


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span);

console.log(container.outerHTML);
// "<div><span></span><p></p></div>"
```

### テキストの挿入


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);

p.before("Text");

console.log(container.outerHTML);
// "<div>Text<p></p></div>"
```

### 要素とテキストの挿入


```js
let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p);
let span = document.createElement("span");

p.before(span, "Text");

console.log(container.outerHTML);
// "<div><span></span>Text<p></p></div>"
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-childnode-before① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Element.after()`
* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.insertAdjacentElement()`
* `NodeList`
Element: hasAttribute() メソッド
============================

**`Element.hasAttribute()`** メソッドは、指定した要素が指定した属性を持つかどうかを示す**論理値**を返します。

構文
--


```js
hasAttribute(name)
```

### 引数

`name`

属性の名前を示す文字列です。

### 返値

論理値です。

例
-


```js
const foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
  // do something
}
```

メモ
--

DOM メソッドは要素の属性を取り扱います。

| 名前空間に無関係、最も一般的に使用されるメソッド | 名前空間に限定される変数(DOM Level 2) | `Attr` ノードを直接扱う DOM レベル 1 のメソッド(ほとんど使用されない) | `Attr` ノードを直接扱う DOM レベル 2 名前空間に限定されるメソッド(ほとんど使用されない) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-hasattribute① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: ariaKeyShortcuts プロパティ
===============================

**`ariaKeyShortcuts`** は `Element` インターフェイスのプロパティで、`aria-keyshortcuts` 属性の値を反映し、要素をアクティブにしたりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。

値
-

文字列です。

例
-

この例では、IDが `skip-link` の要素の `aria-keyshortcuts` 属性には "Alt+Shift+A" が設定されています。`ariaKeyShortcuts` を使用して、値を "Alt+Shift+M" に変更します。


```html
<a id="skip-link" href="#content" aria-keyshortcuts="Alt+Shift+A">
  Skip to content
</a>
```



```js
let el = document.getElementById("saveChanges");
console.log(el.ariaKeyShortcuts); // "Alt+Shift+A"
el.ariaKeyShortcuts = "Alt+Shift+M";
console.log(el.ariaKeyShortcuts); // "Alt+Shift+M"
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariakeyshortcuts |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: insertAdjacentText() メソッド
==================================

**`insertAdjacentText()`** は `Element` インターフェイスのメソッドで、与えられたテキストノードを、メソッドを実行した要素に対する相対的な位置に挿入します。

構文
--


```js
insertAdjacentText(where, data)
```

### 引数

`where`

文字列で、メソッドを呼び出した要素から見た相対的な位置を表します。以下のいずれかでなければなりません。

* `'beforebegin'`: `element` 本体の前。
* `'afterbegin'`: `element` のすぐ内側の、最初の子要素の前。
* `'beforeend'`: `element` のすぐ内側の、最後の子要素の後。
* `'afterend'`:`element` 本体の後。

`data`

メソッドが呼び出された要素から相対的に指定された位置 `where` に挿入する新しいテキストノードを作成する文字列です。

### 返値

なし (`undefined`)。

### 例外

`SyntaxError` `DOMException`

`where` が理解できない値である場合に発生します。

### 位置名の図解


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**メモ:** `beforebegin` および `afterend` の位置が使えるのは、対象ノードがツリーの中にあって、親要素を持つ時に限られます。

例
-


```js
beforeBtn.addEventListener("click", () => {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", () => {
  para.insertAdjacentText("beforeend", textInput.value);
});
```


GitHub 上にあるデモ insertAdjacentText.html を見てください。（同時にソースコードも読んでください。）ここにはシンプルな段落が 1 つあります。フォーム要素に好きなテキストを入力してから、*Insert before* または *Insert after* ボタンを押すと、`insertAdjacentText()` が、入力したテキストを段落のテキストの前または後に挿入します。すでにあるテキストノードにテキストが追加されるのではなく、新しい追加テキストが含まれる別のテキストノードが生成されて、それが追加されることに注意してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-element-insertadjacenttext |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentHTML()`
Element: outerHTML プロパティ
========================

**`outerHTML`** は `Element` DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで、指定された文字列を解釈したノードの要素に置き換えることができます。

要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに `innerHTML` プロパティを使用してください。

値
-

`outerHTML` の値を読み取ると、 `element` およびその子孫を HTML にシリアライズしたものを含む文字列が返されます。 `outerHTML` の値を設定すると、その要素とそのすべての子孫を、指定された `htmlString` を解釈して構築された新しい DOM ツリーで置き換えます。

### 例外

`SyntaxError` `DOMException`

`outerHTML` に有効ではない HTML の文字列を使用して設定しようとした場合に発生します。

`NoModificationAllowedError` `DOMException`

`outerHTML` を `Document` の直接の子である要素、たとえば `Document.documentElement` に対して設定しようとした場合。

例
-

### 要素の outerHTML プロパティから値を取得

#### HTML


```html
<div id="d">
  <p>Content</p>
  <p>Further Elaborated</p>
</div>
```


#### Javascript


```js
const d = document.getElementById("d");
console.log(d.outerHTML);

// 文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// がコンソールウィンドウに書き出されます。
```

### outerHTML プロパティへ設置することでノードを置き換え

#### HTML


```html
<div id="container">
  <div id="d">これは div です。</div>
</div>
```


#### Javascript


```js
const container = document.getElementById("container");
const d = document.getElementById("d");

console.log(container.firstElementChild.nodeName); // "DIV" と出力

d.outerHTML = "<p>この段落は元の div を置き換えたものです。</p>";

console.log(container.firstElementChild.nodeName); // "P" と出力

// #d の div 要素は文書ツリーの一部ではなくなり、
// 新たな段落に置き換えられました。
```

メモ
--

要素が親ノードを持たない場合、その `outerHTML` プロパティに値を設定してもその要素や子孫は変更されません。以下に例を示します。


```js
const div = document.createElement("div");
div.outerHTML = '<div class="test">test</div>';
console.log(div.outerHTML); // output: "<div></div>"
```


また、文書の中で要素が置換された場合も、 `outerHTML` プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。


```js
const p = document.querySelector("p");
console.log(p.nodeName); // shows: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // still "P";
```


返値には HTML エスケープされた属性が入ります。


```js
const anc = document.createElement("a");
anc.href = "https://developer.mozilla.org?a=b&c=d";
console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>"
```

仕様書
---

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-outerhtml |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* DOM ツリーを XML 文字列にシリアライズ: `XMLSerializer`
* XML または HTML を DOM ツリーに解釈: `DOMParser`
* `HTMLElement.outerText`
Element: ariaSelected プロパティ
===========================

**`ariaSelected`** は `Element` インターフェイスのプロパティで、`aria-selected` (en-US) 属性の値を反映し、選択状態を持つ要素の現在の "selected" 状態を示します。

値
-

以下のいずれかの値を持つ文字列です。

`"true"`

この項目は選択されています。

`"false"`

この項目は選択されていません。

`"undefined"`

この項目は選択できません。

例
-

この例では、ID が `tab-id` の要素の `aria-selected` 属性は "true" に設定されています。`ariaSelected`を使用して値を "false" に更新します。


```html
<button role="tab" aria-selected="true" aria-controls="tabpanel-id" id="tab-id">
  Tab label
</button>
```



```js
let el = document.getElementById("tab-id");
console.log(el.ariaSelected); // true
el.ariaSelected = "false";
console.log(el.ariaSelected); // false
```

仕様書
---

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaselected |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ARIA: tab ロール
Element: contentvisibilityautostatechange イベント
==============================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`contentvisibilityautostatechange`** イベントは、`content-visibility: auto` が設定されている要素に対して、ユーザーとの関連、コンテンツをスキップを開始または停止するときに発行されます。

 要素が関係ない間（開始イベントと終了イベントの間）、ユーザーエージェントはレイアウトや描画を含む要素の描画をスキップし、ページの描画速度を大幅に向上させることができます。
 `contentvisibilityautostatechange` イベントは、アプリのコードがレンダリング処理（例えば `<canvas>` への描画）を不要なときに開始または停止する方法を提供します。

非表示になっても要素のコンテンツは意味づけされたままなので（例えば支援技術ユーザーにとって）、この指示は重要な意味づけされた DOM の更新をスキップするために使用すべきではありません。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("contentvisibilityautostatechange", (event) => {});
oncontentvisibilityautostatechange = (event) => {};
```


**メモ:** イベントオブジェクトの型は `ContentVisibilityAutoStateChangeEvent` (en-US) です。

例
-


```js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
  // …
}

// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
  // …
}
```

仕様書
---

| Specification |
| --- |
| CSS Containment Module Level 2 # content-visibility-auto-state-change |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `ContentVisibilityAutoStateChangeEvent` (en-US)
* CSS Containment
* The `content-visibility` property
* The `contain` property
Element: assignedSlot プロパティ
===========================

**`assignedSlot`** は `Element` インターフェイスの読み取り専用プロパティで、
 `HTMLSlotElement` を返します。これは、そのノードが挿入された `<slot>` 要素を表します。

値
-

`HTMLSlotElement` のインスタンス、または要素がスロットに割り当てられていない場合や、 `mode` が `closed` に設定されている場合は `null` です（詳しくは `Element.attachShadow` を参照してください）。

例
-

simple-template の例 (ライブで表示) では、`<my-paragraph>` という些細なカスタム要素の例を作りました。この要素にはシャドウルートが付けられ、次に `my-text` というスロットを含むテンプレートのコンテンツを使って入力されるようになっています。

文書内で `<my-paragraph>` が使用されると、スロットは `my-text` という値を持つ `slot` 属性を持つ要素内に含めることによって、 slotable 要素によって生成されることになります。以下はそのような例です。


```html
<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>
```


JavaScript ファイルでは、上に示した `<span>` への参照を取得し、`<span>` が挿入された元の `<slot>` 要素への参照をログに記録しています。


```js
let slottedSpan = document.querySelector("my-paragraph span");
console.log(slottedSpan.assignedSlot); // logs '<slot name="my-text">'
```

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-slotable-assignedslot |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element: pointermove イベント
=========================

`pointermove` はポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生します。

構文
--

このイベント名を `addEventListener()` などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("pointermove", (event) => {});

onpointermove = (event) => {};
```

イベント型
-----

`PointerEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

PointerEventイベントプロパティ
---------

*このインターフェイスは `MouseEvent` および `Event` からプロパティを継承しています。*

`PointerEvent.pointerId` 読取専用 

イベントを発生させたポインターの固有の識別子です。

`PointerEvent.width` 読取専用 

ポインターが接触するジオメトリーの幅（X 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.height` 読取専用 

ポインターが接触するジオメトリーの高さ（Y 軸の大きさ、CSS ピクセル単位）。

`PointerEvent.pressure` 読取専用 

ポインター入力の正規化された圧力で、範囲は `0` から `1` です。ここで `0` と `1` は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。

`PointerEvent.tangentialPressure` 読取専用 

ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）で、 `-1` から `1` の範囲であり、 `0` はコントロールの中立位置です。

`PointerEvent.tiltX` 読取専用 

Y-Z 平面と、ポインター（ペンスタイラスなど）の軸と Y 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.tiltY` 読取専用 

X-Z 平面と、ポインター（ペンスタイラスなど）の軸と X 軸の両方を含む平面との間の平面角度（度単位、 `-90` から `90` の範囲）。

`PointerEvent.twist` 読取専用 

ポインター（ペンスタイラスなど）の長軸を中心とした時計回りの回転の度数（`0` から `359` の範囲の値）。

`PointerEvent.pointerType` 読取専用 

イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。

`PointerEvent.isPrimary` 読取専用 

このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

使用上のメモ
------

このイベントは `PointerEvent` 型で、位置、移動距離、ボタンの状態など、ユーザーとポインティングデバイスとの対話について知る必要のあるすべての情報を提供します。

例
-

`addEventListener()` を使用した例です。


```js
const para = document.querySelector("p");

para.addEventListener("pointermove", (event) => {
  console.log("Pointer moved");
});
```


`onpointermove` イベントハンドラープロパティを使用した例です。


```js
const para = document.querySelector("p");

para.onpointermove = (event) => {
  console.log("Pointer moved");
};
```

仕様書
---

| Specification |
| --- |
| Pointer Events # the-pointermove-event |
| Pointer Events # dom-globaleventhandlers-onpointermove |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連イベント
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`
Element: querySelector() メソッド
=============================

**`querySelector()`** は `Element` インターフェイスのメソッドで、呼び出された要素の子孫要素の中で、指定されたセレクター群に一致する最初の要素を返します。

構文
--


```js
querySelector(selectors)
```

### 引数

`selectors`

その要素 (`Element`) の子孫要素と照合するセレクター群です。これは有効な CSS 構文でなければならず、そうでない場合は `SyntaxError` 例外が発生します。このセレクター群に一致する最初の要素が返されます。

### 返値

`baseElement` の子孫要素のうち、 `selectors` で指定されたセレクター群に一致するものを返します。照合の際には、 `baseElement` とその子孫を含む要素群の外にあるものも含めて、要素の階層全体を考慮します。言い換えると、 `selectors` はまず `baseElement` ではなく、文書全体に適用され、候補となる要素の初期リストが生成されます。その結果得られた要素が、 `baseElement` の子孫であるかどうかが調べられます。それらの残りの要素のうち、最初に一致したものが `querySelector()` メソッドによって返されます。

一致するものが見つからなかったら、返値は `null` になります。

### 例外

`SyntaxError` `DOMException`

指定された `selectors` が無効であった場合に発生します。

例
-

いくつかの例を検討してみましょう。

### 属性に特定の値を持つ特定の要素を探す

この最初の例では、 HTML 文書の本文内で type 属性がないか、 type 属性が "text/css" である要素のうち最初のものを返します。


```js
const el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);
```

### :scope 擬似クラスを使用して直接の子を取得

この例では `:scope` 擬似クラスを使用して、 `parentElement` 要素の直接の子を取得します。

#### HTML


```html
<div>
  <h6>ページタイトル</h6>
  <div id="parent">
    <span>愛は情け深い。</span>
    <span>
      <span>愛は忍耐強い。</span>
    </span>
    <span>
      <span>愛は見返りを求めない。</span>
    </span>
  </div>
</div>
```


#### CSS


```css
span {
  display: block;
  margin-bottom: 5px;
}
.red span {
  background-color: red;
  padding: 5px;
}
```


#### JavaScript


```js
const parentElement = document.querySelector("#parent");
let allChildren = parentElement.querySelectorAll(":scope > span");
allChildren.forEach((item) => item.classList.add("red"));
```


#### 結果

### 全体の階層数

この例では、 `selectors` を適用する際に、文書全体の階層を考慮することを示しています。そのため、位置を照合する際には、指定した `baseElement` 以外のレベルも考慮されることになります。

#### HTML


```html
<div>
  <h5>オリジナルコンテンツ</h5>
  <p>
    内部の段落
    <span>内部の span</span>
    内部の段落
  </p>
</div>
<div>
  <h5>出力</h5>
  <div id="output"></div>
</div>
```


#### JavaScript


```js
const baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  baseElement.querySelector("div span").innerHTML;
```


#### 結果

結果は次のようになります。

`"div span"` セレクターは、 `baseElement` の子ノードが `<div>` 要素を含んでいなくても、 `<span>` 要素に一致することに注目してください（これはまだ指定したセレクターに含まれています）。

### それ以外の例

`selectors` の適切な書式について、その他の例は `Document.querySelector()` を参照してください。

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* セレクターを使用した DOM 要素の特定
* CSS ガイドの属性セレクター
* MDN 学習領域の属性セレクター
* `Element.querySelectorAll()`
* `Document.querySelector()` および
 `Document.querySelectorAll()`
* `DocumentFragment.querySelector()` および
 `DocumentFragment.querySelectorAll()`
* セレクターを取る他のメソッド: `element.closest()` および
 `element.matches()`.
PerformanceLongTaskTiming.attribution
=====================================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`PerformanceLongTaskTiming` インターフェイスの **`attribution`** 読み取り専用プロパティは、`TaskAttributionTiming` インスタンスのシーケンスを返します。

構文
--
```

var taskAttributeTiming = PerformanceLongTaskTiming.attribution;
```

### 値

`TaskAttributionTiming` インスタンスのシーケンス。

仕様書
---

| Specification |
| --- |
| Long Tasks API # dom-performancelongtasktiming-attribution |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
MouseEvent: getModifierState() メソッド
===================================

**`MouseEvent.getModifierState()`** メソッドは、指定された修飾キーの現在の状態を返します。修飾キーが有効（すなわち、修飾キーが押されているかロックされている）ならば `true`、そうでなければ `false` を返します。

詳しくは `KeyboardEvent.getModifierState()` を参照してください。

構文
--


```js
getModifierState(key)
```

### 引数

`key`

 修飾キーの値です。
 値は修飾キーを表す `KeyboardEvent.key` 値のいずれか、または `"Accel"` 
非推奨
 である必要があります。
 これは大文字と小文字を区別します。


### 返値

論理値です。

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-getmodifierstate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 所属先の `MouseEvent`
* `KeyboardEvent.getModifierState`
MouseEvent: movementY プロパティ
===========================

**`movementY`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、直前の `mousemove` イベントとこのイベントのマウスポインターの Y 座標の差を示します。このプロパティの値は `currentEvent.movementY = currentEvent.screenY - previousEvent.screenY` のように計算されます。

**警告:** ブラウザーは `movementY` と `screenY` に仕様で定義されているものとは異なる単位を使用します。ブラウザーとオペレーティングシステムによって、 `movementY` の単位は物理ピクセルであったり、論理ピクセルであったり、 CSS ピクセルであったりします。

値
-

数値です。 `mousemove` 以外の `MouseEvent` では常に 0 です。

例
-

この例は `movementX` と `movementY` を使用して、マウスの移動量を記録します。

### HTML


```html
<p id="log">マウスを動かしてください。</p>
```

### JavaScript


```js
function logMovement(event) {
  log.innerText = `移動量: ${event.movementX}, ${event.movementY}\n${log.innerText}`;
}

const log = document.getElementById("log");
document.addEventListener("mousemove", logMovement);
```

### 結果

仕様書
---

| Specification |
| --- |
| Pointer Lock 2.0 # dom-mouseevent-movementy |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `MouseEvent.movementX`
* `MouseEvent`
* ポインターロック
MouseEvent: screenY プロパティ
=========================

**`screenY`** は `MouseEvent` インターフェイスの読み取り専用プロパティで、グローバル（スクリーン）座標における、マウスポインターの垂直方向の座標（オフセット）を示します。

値
-

`double` の浮動小数点値です。

これを定義する早期の版の仕様書では、ピクセル数を表す整数として定義していました。

例
-

この例では、 `mousemove` イベントが発行されるたびにマウスの座標を表示します。

### HTML


```html
<p>マウスを動かして、位置を確認してください。</p>
<p id="screen-log"></p>
```

### JavaScript


```js
let screenLog = document.querySelector("#screen-log");
document.addEventListener("mousemove", logKey);

function logKey(e) {
  screenLog.innerText = `
 Screen X/Y: ${e.screenX}, ${e.screenY}
 Client X/Y: ${e.clientX}, ${e.clientY}`;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-mouseevent-screeny |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `MouseEvent`
* `screenX`
* `clientX` / `clientY`