recursal/MDN huggingface dataset:
WebSocket: binaryType プロパティ
===========================

**`WebSocket.binaryType`** プロパティは、この WebSocke 接続によって受信されているバイナリーデータの型を制御します。

値
-

文字列です。

`"blob"`

バイナリーデータに `Blob` オブジェクトを使用します。これが既定値です。

`"arraybuffer"`

バイナリーデータに `ArrayBuffer` オブジェクトを使用します。

例
-


```js
// WebSocket 接続を作成
const socket = new WebSocket("ws://localhost:8080");

// バイナリーの型を "blob" から "arraybuffer" に変更
socket.binaryType = "arraybuffer";

// メッセージを待ち受け
socket.addEventListener("message", (event) => {
  if (event.data instanceof ArrayBuffer) {
    // バイナリーフレーム
    const view = new DataView(event.data);
    console.log(view.getInt32(0));
  } else {
    // テキストフレーム
    console.log(event.data);
  }
});
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-binarytype① |

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

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

`open` イベントは、 `WebSocket` のコネクションが開かれたときに発生します。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
// WebSocket の接続を作成
const socket = new WebSocket("ws://localhost:8080");

// 接続が開かれた場合
socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onopen |

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

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

関連情報
----

* WebSocket: close イベント
* WebSocket: error イベント
* WebSocket: message イベント
* WebSocket クライアントアプリケーションを書く
WebSocket: WebSocket() コンストラクター
===============================

**`WebSocket()`** コンストラクターは、新しい `WebSocket` オブジェクトを返します。

構文
--


```js
new WebSocket(url)
new WebSocket(url, protocols)
```

### 引数

`url`

接続先の URL です。この URL は WebSocket サーバーが応答するものでなければなりません。

`protocols` 省略可

単一のプロトコル文字列、またはプロトコル文字列の配列のいずれか。これらの文字列はサブプロトコルを示すために使用され、単一のサーバーで複数の WebSocket サブプロトコルを実装することもできます（たとえば、単一のサーバーで指定した `protocol` に応じて異なる種類のやりとりを処理できるようにしたい場合があります）。

省略された場合は、空配列、すなわち `[]` が既定で使用されます。

### 例外

`SyntaxError` `DOMException`

次のような場合に発生します。

* `url` の解釈に失敗した場合
* `url` のスキームが `ws` または `wss` 以外であった場合
* `url` にフラグメントがあった場合
* `protocols` の何れかの値が複数回現れている、または WebSocket プロトコル仕様で定義された `Sec-WebSocket-Protocol` (en-US) フィールドの値を構成する要素の要件に一致しない場合。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-websocket① |

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

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

関連情報
----

* RFC 6455 （WebSocket プロトコル仕様書）
WebSocket: send() メソッド
======================

**`WebSocket.send()`** メソッドは、 WebSocket 接続を介してサーバーに送るために指定されたデータを、格納するために必要なバイト数だけ `bufferedAmount` の値を増加させながらキューに入れます。もしデータが送信できなかった場合（例えば、バッファリングが必要だが、バッファが一杯であるなどの理由で）、ソケットは自動的に閉じられます。
 接続が `CONNECTING` 状態のときに `send()` を呼び出すと、ブラウザーは例外を発生させます。接続が `CLOSING` または `CLOSED` の状態のときに `send()` を呼び出すと、ブラウザーはデータを暗黙に破棄します。

構文
--


```js
send(data)
```

### 引数

`data`

サーバーに送信するデータです。以下の何れかの型のデータを指定します。

`string`

テキスト文字列。文字列は UTF-8 形式でバッファーに追加され、 `bufferedAmount` の値は UTF-8 の文字列を表すのに必要とされるバイト数だけ増えます。

`ArrayBuffer`

型付きの配列オブジェクトで使用される基本的なバイナリーデータを送信することができます。このバイナリーデータのコンテンツは，必要なバイト数だけ `bufferedAmount` の値を増やして、バッファーのキューに入れられます。

`Blob`

`Blob` を指定すると、バイナリーフレームで送信される blob の生データをキューに入れます（`Blob.type` は無視されます）。
 `bufferedAmount` の値は、その生データのバイトサイズだけ増えます。


`TypedArray` または `DataView`

JavaScript の型付き配列オブジェクトをバイナリーフレームとして送信することができます。このバイナリーデータのコンテンツは，必要なバイト数だけ `bufferedAmount` の値を増やして、バッファのキューに入れられます。


### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

`WebSocket.readyState` が `CONNECTING` である場合に発生します。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-send① |

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

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

`error` イベントは、 `WebSocket` の接続がエラーによって閉じられた（例えば一部のデータを送信できなかった）ときに発生します。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
// WebSocket の接続を生成
const socket = new WebSocket("ws://localhost:8080");

// 発生しうるエラーを待ち受けする
socket.addEventListener("error", (event) => {
  console.log("WebSocket error: ", event);
});
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onerror |

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

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

関連情報
----

* WebSocket: close イベント
* WebSocket: message イベント
* WebSocket: open イベント
* WebSocket クライアントアプリケーションを書く
WebSocket: protocol プロパティ
=========================

**`WebSocket.protocol`** は読み取り専用のプロパティで、サーバーが選択したサブプロトコル名を返します。これは `WebSocket` オブジェクトが作成されるときに、引数の `protocols` で指定された文字列のいずれかになりますが、接続が確立されていない場合は、空文字列となります。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-protocol① |

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

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

**`WebSocket.readyState`** は読み取り専用のプロパティで、 `WebSocket` の「現在」の接続状態を返します。

値
-

以下のいずれかの `unsigned short` 値です。

| 値 | 状態 | 説明 |
| --- | --- | --- |
| `0` | `CONNECTING` | ソケットの作成が完了した。コネクションは開かれていない。 |
| `1` | `OPEN` | コネクションが開かれ、通信の準備ができている。 |
| `2` | `CLOSING` | コネクションが閉じる過程にある。 |
| `3` | `CLOSED` | コネクションが閉じられたか、開くことができなかった。 |

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-readystate① |

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

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

`message` イベントは、 `WebSocket` を通してデータを受け取ったときに発生します。

構文
--

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


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

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

イベント型
-----

`MessageEvent` です。 `Event` から継承しています。

Event

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

*以下に示したプロパティに加え、親インターフェイスである `Event` から継承したプロパティも利用できます。*

`data` 読取専用 

メッセージ送信者から送信されたデータです。このプロパティの型は、WebSocket メッセージの種類と `WebSocket.binaryType` の値によって変わります。

* メッセージの種類が "text" の場合、このフィールドは文字列です。
* メッセージの種類が "binary" 型の場合、このプロパティの型はこのソケットの `binaryType` から推測することができます。
    + `ArrayBuffer`: `binaryType` が `"arraybuffer"` の場合
    + `Blob`: `binaryType` が `"blob"` の場合、これは関連付けられたメディア型がありません（`Blob.type` は `""` です）.

`origin` 読取専用 

文字列で、メッセージ送信者のオリジンを表します。

`MessageEvent` インターフェイスのその他のプロパティは存在しますが、 WebSocket API には関係ないため、既定値のままにしています。

* `lastEventId` 読取専用
* `source` 読取専用
* `ports` 読取専用
例
-


```js
// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Listen for messages
socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onmessage |

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

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

関連情報
----

* WebSocket: close イベント
* WebSocket: error イベント
* WebSocket: open イベント
* WebSocket クライアントアプリケーションを書く
WebSocket: url プロパティ
====================

**`WebSocket.url`** は読み取り専用のプロパティで、コンストラクターによって解決された `WebSocket` の絶対 URL を返します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-url① |

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

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

**`WebSocket.close()`** メソッドは、 `WebSocket` の接続、もしくは接続試行（存在した場合）を閉じます。接続がすでに `CLOSED` だった場合、このメソッドは何もしません。

**メモ:** 接続を閉じるプロセスはクロージングハンドシェイクで始まり、 `close()` メソッドはそのクロージングハンドシェイクを開始する前に以前に送信したメッセージを破棄しません。たとえユーザーエージェントがまだそれらのメッセージを送信するのに忙しい場合でも、ハンドシェイクはメッセージが送信されてから開始されます。

構文
--


```js
close()
close(code)
close(code, reason)
```

### 引数

`code` 省略可

整数の WebSocket 接続クローズコードの値で、閉じられた理由を示します。

* 指定されていない場合、接続のクローズコードが自動的に設定されます。通常のクローズの場合は `1000` に、そうでなければ `1001`-`1015` の範囲の他の標準値に、接続が閉じられた実際の理由を示すコードが設定されます。
* 指定された場合、この `code` 引数の値は、接続のためのクローズコードの自動設定を上書きし、代わりにカスタムコードを設定します。
 この値は整数でなければなりません。 `1000` か、あるいは `3000` から `4999` までの範囲で選択したカスタムコードでなければなりません。 `code` 値を指定する場合は、 `reason` 値も指定しなければなりません。

`reason` 省略可

独自の WebSocket 接続が閉じた理由を提供する文字列（閉じたことについて簡潔で人間が読める散文的な説明）。この値は 123 バイト以下でなければなりません（UTF-8 でエンコードされます）。

**メモ:** UTF-8 は 2 から 4 バイトを使用するため、 ASCII 以外の文字をエンコードすると、 123 文字の `reason` 値に ASCII 以外の文字が入っていると、 123 バイトの制限を超える可能性があります。

`reason` の値を指定する場合は、 `code` の値も指定してください。

### 返値

なし (`undefined`)。

### 例外

`InvalidAccessError` `DOMException`

`code` が `1000` と等しい整数でも、 `3000`–`4999` の範囲の整数でもない場合に発生します。

`SyntaxError` `DOMException`

UTF-8 でエンコードされた `reason` が 123 バイトよりも長かった場合。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-close① |

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

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

関連情報
----

* RFC 6455 （WebSocket プロトコル仕様書）
WebSocket: close イベント
=====================

`close` イベントは、 `WebSocket` の接続が閉じられたときに発生します。

構文
--

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


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

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

イベント型
-----

`CloseEvent` です。 `Event` から継承しています。

Event

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

*下記に示したプロパティに加えて、親インターフェイスである `Event` からのプロパティが利用できます。*

`code` 読取専用 

サーバーが送信したクローズコードを `unsigned short` で返します。

`reason` 読取専用 

サーバーが接続を閉じた理由を示す文字列を返します。これは、特定のサーバーとサブプロトコルに固有のものです。

`wasClean` 読取専用 

接続がきれいに閉じられたか否かを示す論理値を返します。

例
-

接続が閉じられる時が分かれば、 UI を更新させたり、閉じた接続についてのデータを保存したりすることができます。以下の例では `exampleSocket` と呼ばれる変数が開かれた `WebSocket` を参照しており、このハンドラーが、ソケットが閉じられた場面を扱います。


```js
exampleSocket.addEventListener("close", (event) => {
  console.log("The connection has been closed successfully.");
});
```


同じことを、イベントハンドラープロパティを用いて行うこともできます。


```js
exampleSocket.onclose = (event) => {
  console.log("The connection has been closed successfully.");
};
```

仕様書
---

| Specification |
| --- |
| WebSockets Standard # dom-websocket-onclose |

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

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

関連情報
----

* WebSocket: error イベント
* WebSocket: message イベント
* WebSocket: open イベント
* WebSocket クライアントアプリケーションを書く
WebSocket: bufferedAmount プロパティ
===============================

**`WebSocket.bufferedAmount`** は読み取り専用のプロパティで、 `send()` の呼び出しによってキューに入れられてはいますが、まだネットワークに送信されていないデータのバイト数を返します。この値は、一度キューに入れられたデータすべてが送信されると 0 にリセットされます。なお、接続が閉じられたときは、 0 にリセットされません。 `send()` を呼び出し続けると、この値は大きくなっていきます。

値
-

`unsigned long` です。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-bufferedamount① |

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

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

**`WebSocket.extensions`** は読み取り専用のプロパティで、サーバーによって選択された拡張機能を返します。現在は、空文字列か、接続によってネゴシエートされた拡張機能のリストのみを返します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| WebSockets Standard # ref-for-dom-websocket-extensions① |

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

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

`MessageChannel` インターフェースの **`port2`** 読み取り専用プロパティは、メッセージチャンネルの第 2 ポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。

**注:** この機能は Web Worker 内で利用可能です

構文
--
```

channel.port2;
```

### 値

チャンネルの第 2 ポートを表す `MessagePort` オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。

例
-

次のコードブロックでは、`MessageChannel.MessageChannel` コンストラクタを使用して作成された新しいチャンネルを知ることができます。`<iframe>` が読み込まれると、`MessagePort.postMessage` にメッセージを添えて `MessageChannel.port2` を `<iframe>` へ渡します。すると、`handleMessage` ハンドラが `<iframe>` から返送されたメッセージに (`MessagePort.onmessage` を使用して) 返答し、これを段落に挿入します。


```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-messagechannel-port2-dev |

ブラウザの実装状況
---------

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

関連情報
----

* Using channel messaging
MessageChannel()
================

`MessageChannel` インターフェースの `MessageChannel()` コンストラクタは、2 つの新しい `MessagePort` オブジェクトを持つ新しい `MessageChannel` オブジェクトを返します。

**注:** この機能は Web Worker 内で利用可能です

構文
--
```

var channel = new MessageChannel();
```

### 戻り値

新たに作成された `MessageChannel` オブジェクト。

例
-

次のコードブロックでは、`MessageChannel.MessageChannel` コンストラクタを使用して作成された新しいチャンネルを知ることができます。`<iframe>` が読み込まれると、`MessagePort.postMessage` にメッセージを添えて `MessageChannel.port2` を `<iframe>` へ渡します。すると、`handleMessage` ハンドラが `<iframe>` から返送されたメッセージに (`MessagePort.onmessage` を使用して) 返答し、これを段落に挿入します。


```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


完全に動作する例は、Github 上の channel messaging basic demo を参照してください (実際のデモも実行できます)。

仕様
--

| Specification |
| --- |
| HTML Standard # dom-messagechannel-dev |

ブラウザの実装状況
---------

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

関連情報
----

* Using channel messaging
MessageChannel.port1
====================

**`port1`** は `MessageChannel` インターフェースの読み取り専用プロパティで、メッセージチャンネルの最初のポートを返します。このポートは、チャンネルの元となるコンテキストに付属します。

**注:** この機能は Web Worker 内で利用可能です

構文
--
```

channel.port1;
```

### 値

チャンネルの最初のポートを表す `MessagePort` オブジェクト。これはチャンネルの元となるコンテキストに付属するポートです。

例
-

次のコードブロックでは、 `MessageChannel()` コンストラクターを使用して作成された新しいチャンネルが見られます。 `<iframe>` が読み込まれると、 `MessageChannel.port2` を `<iframe>` へ、メッセージを通して `MessagePort.postMessage` を使用して渡します。すると、 `handleMessage` ハンドラーが `<iframe>` から返送されたメッセージに (`MessagePort.onmessage` を使用して) 返答し、これを段落に挿入します。メッセージが到着したとき、 `handleMessage` メソッドが `port1` に関連付けられて待ち受けします。


```js
var channel = new MessageChannel();
var para = document.querySelector("p");

var ifr = document.querySelector("iframe");
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-messagechannel-port1-dev |

ブラウザーの対応
--------

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

関連情報
----

* Using channel messaging
Attr: ownerElement プロパティ
========================

**`ownerElement`** は `Attr` インターフェイスの読み取り専用プロパティで、この属性が所属する要素 (`Element`) を返します。

値
-

この属性が所属する要素 (`Element`)、またはこの属性が要素に結びついていない場合は `null` です。

例
-

次の例では、適切なボタンをクリックすると、 2 つの最初の要素の要素の修飾名が表示されます。

### HTML コンテンツ


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>Show value for &lt;svg&gt;</button>
  <button>Show value for &lt;label&gt;</button>
</p>

<p>
  Qualified name of the owner element of the attribute <code>xml:lang</code>:
  <output id="result">None.</output>
</p>
```

### JavaScript コンテンツ


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.ownerElement.tagName.toLowerCase();
  });
  i++;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-attr-ownerelement |

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

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

**`localName`** は `Attr` インターフェイスのプロパティで、属性の*修飾名*の*ローカル部分*、すなわち属性の名前からその前の名前空間を外したものを返します。例えば、修飾名が `xml:lang` であった場合、要素が名前空間に対応していればローカル名は `lang` となります。

ローカル名は、属性の作成時に大文字であっても小文字であっても、常に小文字になります。

**メモ:** HTML は SVG と MathML の要素に対して、固定された一連の名前空間のみに対応しています。これらは `xml` （`xml:lang` 属性）、 `xlink` （`xlink:href`, `xlink:show`, `xlink:target`, `xlink:title` 属性）、`xpath` です。

つまり、 HTML 要素の属性のローカル名は常にその修飾名と等しくなります。コロンは通常の文字として扱われます。 XML では、 SVG や MathML のように、コロンは接頭辞の終わりを表し、それ以前は名前空間となります。ローカル名は、修飾名と異なる場合があります。

値
-

属性の修飾名のローカル部分を表す文字列です。

例
-

次の例では、適切なボタンをクリックすると、 2 つの最初の要素の最初の属性のローカル名が表示されます。 `<svg>` 要素は XML であり、名前空間に対応しているので、ローカル名 (`lang`) は修飾名 `xml:lang` と異なるものになります。 `<label>` 要素は HTML であり、名前空間に対応していないため、ローカル名と修飾名が共に `xml:lang` となります。

### HTML コンテンツ


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>&lt;svg&gt; の場合の値を表示</button>
  <button>&lt;label&gt; の場合の値を表示</button>
</p>

<p>
  <code>xml:lang</code> 属性のローカル部分:
  <output id="result">なし。</output>
</p>
```

### JavaScript コンテンツ


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.localName;
  });
  i++;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-attr-localname |

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

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

関連情報
----

* `Attr.name` プロパティはこの属性の修飾名を返し、 `Attr.prefix` は名前空間接頭辞を返します。
* `Element.localName()` プロパティは `Element` のローカル名を返します。
Attr: specified プロパティ
=====================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`specified`** は `Attr` インターフェイスのプロパティで、常に `true` を返します。

値
-

常に `true` を返します。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-attr-specified |

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

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

**`name`** は `Attr` インターフェイスの読み取り専用プロパティで、属性の*修飾名*、すなわち属性名に、名前空間接頭辞があればそれが前に付いたものが返されます。例えば、ローカル名が `lang` で名前空間接頭辞が `xml` であった場合、返される修飾名は `xml:lang` になります。

修飾名は、属性が作成されたときの大文字小文字に関わらず、常に小文字になります。

値
-

この属性の修飾名を表す文字列です。

例
-

次の例では、適切なボタンをクリックすると、 2 つの最初の要素の最初の属性の修飾名が表示されます。

### HTML コンテンツ


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>&lt;svg&gt; の場合の値を表示</button>
  <button>&lt;label&gt; の場合の値を表示</button>
</p>

<p>
  <code>xml:lang</code> 属性の修飾名:
  <output id="result">なし。</output>
</p>
```

### JavaScript コンテンツ


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.name;
  });
  i++;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-attr-name |

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

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

関連情報
----

* `Attr.localName` プロパティはこの属性の修飾名のローカル名の部分を返し、 `Attr.prefix` は名前空間接頭辞を返します。
* `Element.tagName()` プロパティは `Element` の修飾名を返します。
Attr: namespaceURI プロパティ
========================

**`namespaceURI`** は `Attr` インターフェイスの読み取り専用プロパティで、この属性の名前空間 URI を返し、この要素が名前空間にない場合は `null` を返します。

 名前空間 URI は `Attr` の作成時に設定され、変更することができません。
 名前空間付きの属性は、 `Element.setAttributeNS()` で作成することができます。


**メモ:** 属性は、装着されている要素から名前空間を継承しません。
 属性に明示的に名前空間が与えられなかった場合は、名前空間なしになります。


ブラウザーは名前空間の検証そのものは行いませんし、強制もしません。必要な検証を行うのは JavaScript アプリケーションに任されています。また、名前空間接頭辞は一度特定の属性ノードに関連づけられると、変更することができないので注意してください。

値
-

文字列で、この属性の名前空間 URI が入ります。この要素が名前空間にない場合は `null` を返します。

例
-

 次の例は、HTML 要素と SVG 要素の場合で、接頭辞つきの属性の結果を示しています。
 HTML は名前空間を扱わないので、この場合、常に `null` を返します。
 SVG 要素の場合は、 XML の名前空間 URI である `http://www.w3.org/XML/1998/namespace` を返します。

### HTML コンテンツ


```html
<svg xml:lang="en-US" class="struct" height="1" width="1">Click me</svg>
<label xml:lang="en-US" class="struct"></label>

<p>
  <button>&lt;svg&gt; の値を表示</button>
  <button>&lt;label&gt; の値を表示</button>
</p>

<p>
  <code>xml:lang</code> 属性の名前空間 URI:
  <output id="result">なし。</output>
</p>
```

### JavaScript コンテンツ


```js
const elements = document.querySelectorAll(".struct");
const buttons = document.querySelectorAll("button");
const outputEl = document.querySelector("#result");

let i = 0;
for (const button of buttons) {
  const element = elements[i];
  button.addEventListener("click", () => {
    const attribute = element.attributes[0];
    outputEl.value = attribute.namespaceURI;
  });
  i++;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-attr-namespaceuri |

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

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

関連情報
----

* `Attr.name` プロパティはこの属性の修飾名を返し、 `Attr.localName` プロパティはこの属性の修飾名のローカル名の部分を返し、 `Attr.prefix` は名前空間接頭辞を返します。
* `Element.namespaceURI` プロパティは `Element` について同等のものです。
* `Element.setAttributeNS()` メソッドは、指定された属性を指定された名前空間で作成します。
Attr: value プロパティ
=================

**`value`** は `Attr` インターフェイスのプロパティで、この属性の値が入ります。

値
-

文字列で、この属性の値を表します。

例
-

次の例では、属性 `test` の現在の値を表示しています。ボタンをクリックすると別の値に変更され、再度読み込むと表示値が更新されます。

### HTML コンテンツ


```html
<label test="初期値"></label>

<button>クリックすると、test に <code>"新しい値"</code> を設定します。…</button>

<p>
  現在の <code>test</code> 属性の値:
  <output id="result">なし。</output>
</p>
```

### JavaScript コンテンツ


```js
const element = document.querySelector("label");
const button = document.querySelector("button");
const result = document.querySelector("#result");

const attribute = element.attributes[0];
result.value = attribute.value;

button.addEventListener("click", () => {
  attribute.value = "新しい値";
  result.value = attribute.value;
});
```

### 結果

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-attr-value |

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

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