recursal/MDN huggingface dataset:
PerformanceObserver: takeRecords() メソッド
=======================================

**`takeRecords()`** は `PerformanceObserver` インターフェイスのメソッドで、パフォーマンスオブザーバーに格納されている`パフォーマンス項目`の現在のリストを空にして返します。

構文
--


```js
takeRecords()
```

### 引数

なし。

### 返値

`PerformanceEntry` オブジェクトのリストです。

例
-

### 記録を取る

次の例は、現在のパフォーマンス項目のリストを `records` に格納し、パフォーマンスオブザーバーを空にします。


```js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // Process "mark" and "measure" events
  });
});
observer.observe({ entryTypes: ["mark", "measure"] });
const records = observer.takeRecords();
console.log(records[0].name);
console.log(records[0].startTime);
console.log(records[0].duration);
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver-takerecords |

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

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

**`disconnect()`** は `PerformanceObserver` インターフェイスのメソッドで、パフォーマンスオブザーバーがパフォーマンス項目イベントを受け取らないようにするために使用されます。

構文
--


```js
disconnect()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

### パフォーマンスオブザーバーの停止

次の例では、パフォーマンスオブザーバーを切断して、パフォーマンス項目イベントの受信を無効にしています。


```js
const observer = new PerformanceObserver((list, obj) => {
  list.getEntries().forEach((entry) => {
    // "measure" イベントを処理
    // …
    // それ以降のパフォーマンスイベントを無効化
    observer.disconnect();
  });
});
observer.observe({ entryTypes: ["mark", "measure"] });
```

仕様書
---

| Specification |
| --- |
| Performance Timeline # dom-performanceobserver-disconnect |

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

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

**`DOMImplementation.createDocument()`** メソッドは、 `XMLDocument` を作成して返します。

構文
--


```js
createDocument(namespaceURI, qualifiedNameStr)
createDocument(namespaceURI, qualifiedNameStr, documentType)
```

### 引数

`namespaceURI`

作成する文書の名前空間 URI を格納した文字列です。文書が名前空間に属さない場合は `null` です。

`qualifiedNameStr`

作成する文書の修飾名（オプションで接頭辞とコロンにローカルルート要素名を加えたもの）を格納した文字列です。

`documentType` 省略可

作成する文書の `DocumentType` です。既定値は `null` です。

### 返値

なし (`undefined`)。

例
-


```js
const doc = document.implementation.createDocument(
  "http://www.w3.org/1999/xhtml",
  "html",
  null,
);
const body = document.createElementNS("http://www.w3.org/1999/xhtml", "body");
body.setAttribute("id", "abc");
doc.documentElement.appendChild(body);
alert(doc.getElementById("abc")); // [object HTMLBodyElement]
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domimplementation-createdocument② |

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

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

関連情報
----

* 所属先の `DOMImplementation` インターフェイス
DOMImplementation: hasFeature() メソッド
====================================

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

**`DOMImplementation.hasFeature()`** メソッドは、指定された機能に対応しているかどうかを示す論理値を返します。これは非推奨です。現代のブラウザーはすべて `true` を返します。

 どのような機能を報告するかは、実装にばらつきがありました。
 最新版の仕様では、このメソッドは機能が正確で使用できる場合は、常に `true` を返すように決定されました。

構文
--


```js
hasFeature(feature, version)
```

### 引数

`feature`

機能名を表す文字列です。

`version`

機能を定義する仕様のバージョンを表す文字列です。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| DOM Standard # dom-domimplementation-hasfeature |

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

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

関連情報
----

* 所属先の `DOMImplementation` インターフェイス
DOMImplementation: createHTMLDocument() メソッド
============================================

**`DOMImplementation.createHTMLDocument()`** メソッドは、新しい HTML 文書 (`Document`) を作成します。

構文
--


```js
createHTMLDocument()
createHTMLDocument(title)
```

### 引数

`title` 省略可

新しい HTML 文書に与えるタイトルを含む文字列です。

### 返値

新しい HTML の `Document` オブジェクトです。

例
-

この例では、新しい HTML 文書を作成し、現在の文書内の `<iframe>` に挿入しています。

この例の HTML は次の通りです。


```html
<body>
  <p>
    Click <a href="javascript:makeDocument()">here</a> to create a new document
    and insert it below.
  </p>
  <iframe id="theFrame" src="about:blank" />
</body>
```


JavaScript による `makeDocument()` は次の通りです。


```js
function makeDocument() {
  let frame = document.getElementById("theFrame");

  let doc = document.implementation.createHTMLDocument("New Document");
  let p = doc.createElement("p");
  p.textContent = "This is a new paragraph.";

  try {
    doc.body.appendChild(p);
  } catch (e) {
    console.log(e);
  }

  // Copy the new HTML document into the frame

  let destDocument = frame.contentDocument;
  let srcNode = doc.documentElement;
  let newNode = destDocument.importNode(srcNode, true);

  destDocument.replaceChild(newNode, destDocument.documentElement);
}
```


4～12 行目のコードは、新しい HTML 文書を作成し、その文書へのコンテンツの挿入を処理するものです。4 行目で `createHTMLDocument()` を用いて、`<title>` が `"New Document"` である新しい HTML 文書を作成しています。5 行目と 6 行目で単純なコンテンツを持つ新しい段落要素を作成し、8～12 行目で新しい段落を新しい文書に挿入する処理をしています。

16 行目はフレームの `contentDocument` を取り出しています。これは新しいコンテンツを注入する文書内のものです。次の 2 行は、新しい文書のコンテンツを新しい文書のコンテキストにインポートする処理です。最後に、20 行目で実際にフレームのコンテンツを新しい文書のコンテンツに置き換えます。

ライブサンプルを見る

返される文書は、以下の HTML であらかじめ構成されたものになります。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
  </head>
  <body>
    …
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domimplementation-createhtmldocument① |

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

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

関連情報
----

* 所属先の `DOMImplementation` インターフェイス
DOMImplementation: createDocumentType() メソッド
============================================

**`DOMImplementation.createDocumentType()`** メソッドは `DocumentType` オブジェクトを返します。これは文書作成時に `DOMImplementation.createDocument` で使用したり、`Node.insertBefore()` や `Node.replaceChild()` などのメソッドで文書中に置いたりすることができます。

構文
--


```js
createDocumentType(qualifiedNameStr, publicId, systemId)
```

### 引数

`qualifiedNameStr`

修飾名の入った文字列です。例えば `svg:svg` です。

`publicId`

`PUBLIC` 識別子の入った文字列です。

`systemId`

`SYSTEM` 識別子の入った文字列です。

### 返値

`DocumentType` です。

例
-


```js
const dt = document.implementation.createDocumentType(
  "svg:svg",
  "-//W3C//DTD SVG 1.1//EN",
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd",
);
const d = document.implementation.createDocument(
  "http://www.w3.org/2000/svg",
  "svg:svg",
  dt,
);
alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN
```

仕様書
---

| Specification |
| --- |
| DOM Standard # ref-for-dom-domimplementation-createdocumenttype① |

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

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

関連情報
----

* 所属先の `DOMImplementation` インターフェイス
AudioSinkInfo: type プロパティ
=========================

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

`AudioSinkInfo` インターフェイスの読み取り専用プロパティ **`type`** は、この音声出力デバイスの種類を返します。

値
-

文字列です。現在の値は `none` のみです。

仕様書
---

| Specification |
| --- |
| Web Audio API # dom-audiosinkinfo-type |

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

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

関連情報
----

* SetSinkId test example
* `AudioContext.setSinkId()`
* `AudioContext.sinkId`
* `sinkchange`
DataTransfer.setDragImage()
===========================

ドラッグが発生すると、ドラッグ対象（`dragstart` イベントが発生した要素）から半透明の画像が生成され、ドラッグ中にマウスポインターに沿って移動します。この画像は自動的に作成されるので、自分で作成する必要はありません。ただし、カスタム画像が必要な場合は、**`DataTransfer.setDragImage()`** メソッドを使用して、使用するカスタム画像を設定することができます。画像は通常、 `<image>` 要素になりますが、 `<canvas>` やその他の可視要素であっても構いません。

メソッドの `x` 座標と `y` 座標は、マウスポインターに対する画像の相対的な表示方法を定義します。これらの座標は、マウスカーソルがあるべき画像のオフセットを定義します。例えば、ポインターが中心に来るように画像を表示するには、画像の幅と高さの半分の値を使用します。

このメソッドは `dragstart` イベントハンドラー内で呼び出す必要があります。

構文
--


```js
setDragImage(imgElement, xOffset, yOffset);
```

### 引数

`imgElement`

ドラッグのフィードバック画像に使用する画像 `Element` 要素です。

もし `Element` が img 要素であれば、ドラッグデータストアのビットマップを （その要素に固有のサイズで）その要素の画像に設定します。そうでなければ、ドラッグデータストアのビットマップを、与えられた要素から生成された画像に設定します（そのための正確なメカニズムは現在のところ指定されていません）。

注: もし `Element` が既存の `HTMLElement` であれば、ドラッグフィードバック画像として表示するために、ビューポートに表示されている必要があります。あるいは、この目的のために、画面外にあるような新しい DOM 要素を作成することができます。

`xOffset`

`long` で、画像内の水平方向のオフセットを示します。

`yOffset`

`long` で、画像内の垂直方向のオフセットを示します。

### 返値

なし (`undefined`)。

例
-

この例では、`setDragImage()` メソッドの使用方法を示します。この例では `example.gif` という名前の画像ファイルを参照していることに注意しましょう。そのファイルが存在する場合はそのファイルがドラッグ画像として使用され、そのファイルが存在しない場合はブラウザーが既定のドラッグ画像を使用します。

デモ


```js
<!DOCTYPE html>
<html lang=en>
<title>Example of DataTransfer.setDragImage()</title>
<meta name="viewport" content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart\_handler(ev) {
 console.log("dragStart");
 // ドラッグのフォーマットとデータを設定します。データにはイベントターゲットの ID を使用します。
 ev.dataTransfer.setData("text/plain", ev.target.id);
 // 画像を作成してドラッグ画像に使用する
 // 注意: "example.gif" を既存の画像に変更しないと画像が作成されず、
 // デフォルトのドラッグ画像が使用されます。
 const img = new Image();
 img.src = 'example.gif';
 ev.dataTransfer.setDragImage(img, 10, 10);
}

function dragover\_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
}

function drop\_handler(ev) {
 console.log("Drop");
 ev.preventDefault();
 // ドロップ対象のIDであるデータを取得します。
 const data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
</script>
<body>
<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
 <div>
   <p id="source" ondragstart="dragstart\_handler(event);" draggable="true">
     この要素を選択し、ドロップゾーンにドラッグしてから放すと要素が移動します。</p>
 </div>
 <div id="target" ondrop="drop\_handler(event);" ondragover="dragover\_handler(event);">ドロップゾーン</div>
</body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-setdragimage-dev |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
DataTransfer.setData()
======================

**`DataTransfer.setData()`** メソッドは、ドラッグ操作の `drag data` に指定したデータと型を設定します。与えられた型のデータが存在しない場合、このデータはドラッグデータストアの末尾に加えられ、このような `types` リストの最後の項目は新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、`types` リストの並び順は変更されません。

データ型は、例えば `text/plain` や `text/uri-list` です。

構文
--


```js
setData(format, data);
```

### 引数

`format`

文字列で、ドラッグオブジェクトに追加するドラッグデータの型を表します。

`data`

文字列で、ドラッグオブジェクトに追加するデータを表します。

### 返値

なし (`undefined`)。

例
-

この例は、`DataTransfer` オブジェクトの `getData()` メソッドおよび `setData()` メソッド、`clearData()` メソッドの使い方を紹介します。


```js
<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer's setData(), getData() and clearData()</title>
<meta content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #source {
    color: blue;
    border: 1px solid black;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart\_handler(ev) {
 console.log("dragStart");
 // Change the source element's background color to signify drag has started
 ev.currentTarget.style.border = "dashed";
 // Set the drag's format and data. Use the event target's id for the data
 ev.dataTransfer.setData("text/plain", ev.target.id);
}

function dragover\_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
}

function drop\_handler(ev) {
 console.log("Drop");
 ev.preventDefault();
 // Get the data, which is the id of the drop target
 const data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
 // Clear the drag data cache (for all formats/types)
 ev.dataTransfer.clearData();
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>: <code>setData()</code>, <code>getData()</code>, <code>clearData()</code></h1>
 <div>
   <p id="source" ondragstart="dragstart\_handler(event);" draggable="true">
     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
 </div>
 <div id="target" ondrop="drop\_handler(event);" ondragover="dragover\_handler(event);">Drop Zone</div>
</body>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-setdata-dev |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
DataTransfer.files
==================

**`files`** は `DataTransfer` オブジェクトのプロパティで、ドラッグ操作中のファイルのリストです。操作にファイルが含まれていない場合、リストは空になります。

この機能を利用して、ユーザーのデスクトップからブラウザーにファイルをドラッグすることができます。

**メモ:** `DataTransfer` オブジェクトの `files` プロパティは、 `drop` イベントの中からのみアクセスできます。それ以外のどのイベントでも、 `files` プロパティは空になります。その基礎となるデータストアが保護モードになるからです。

返値
--

ドラッグ操作中のファイルのリストで、 1 つのリスト項目が 1 つのファイルを表します。操作にファイルが含まれていない場合、リストは空になります。

例
-

このインターフェイスには 2 つのライブ例があります。

* Firefox 専用: https://jsfiddle.net/9C2EF/
* すべてのブラウザー: https://jsbin.com/hiqasek/
仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-files-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
DataTransfer.getData()
======================

**`DataTransfer.getData()`** メソッドは、指定した型のドラッグデータを（文字列として）受け取ります。ドラッグ操作がデータを含んでいない場合、このメソッドは空文字列を返します。

データ型は、例えば `text/plain` や `text/uri-list` です。

構文
--


```js
getData(format);
```

引数
--

`format`

文字列で、受け取るデータの型を表します。

### 返値

文字列で、 `format` で指定した型のドラッグデータを表します。ドラッグ操作にデータがなかったり、 `format` で指定した型のデータがなかったりした場合、このメソッドは空文字列を返します。

### 注意事項

* データの利用可能性
    + HTML5 Drag and Drop 仕様書では、「ドラッグデータストアモード」が規定されています。
     これは、 **`DataTransfer.getData()`** が期待した値を返さないという、予期しない動作をする可能性があります。すべてのブラウザーがこの制限を強制しているわけではないからです。
     `dragstart` と `drop` イベントの処理中は、安全にデータにアクセスすることができます。それ以外のイベントでは、データは利用できないものと考えてください。それでも、項目とその形式を列挙することは可能です。
例
-

この例は、`DataTransfer` オブジェクトの `getData()` メソッドおよび `setData()` メソッドの使い方を紹介します。

### HTML コンテンツ


```html
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <span id="drag" draggable="true" ondragstart="drag(event)"
 >drag me to the other box</span
 >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
```

### CSS コンテンツ


```css
#div1,
#div2 {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
```

### JavaScript


```js
function allowDrop(allowdropevent) {
  allowdropevent.target.style.color = "blue";
  allowdropevent.preventDefault();
}

function drag(dragevent) {
  dragevent.dataTransfer.setData("text", dragevent.target.id);
  dragevent.target.style.color = "green";
}

function drop(dropevent) {
  dropevent.preventDefault();
  const data = dropevent.dataTransfer.getData("text");
  dropevent.target.appendChild(document.getElementById(data));
  document.getElementById("drag").style.color = "black";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-getdata-dev |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
DataTransfer.dropEffect
=======================

**`DataTransfer.dropEffect`** プロパティは、ドラッグ＆ドロップ操作中にユーザーに与えられるフィードバック（通常は視覚的）を制御します。これは、ドラッグ中に表示されるカーソルに影響します。例えば、ユーザーがターゲットのドロップ要素の上にカーソルを置くと、ブラウザーのカーソルが、どの種類の操作が発生するかを示すことができます。

`DataTransfer` オブジェクトを作成すると、 `dropEffect` には文字列の値が設定されます。取得時には、現在の値を返します。設定時、新しい値が以下の値のいずれかであれば、プロパティの現在の値が新しい値に設定され、それ以外の値は無視されます。

`dragenter` および `dragover` イベントでは、ユーザーがどのような操作を要求しているかに基づいて、`dropEffect` が初期化されます。これをどのように決定するかはプラットフォームによって異なりますが、通常、ユーザーは alt キーなどの修飾キーを押して、希望する操作を調整することができます。`dragenter` と `dragover` イベントのイベントハンドラー内では、ユーザーが要求している操作とは異なる操作が必要な場合、`dropEffect` を修正する必要があります。

`drop` および `dragend` イベントでは、 `dropEffect` に希望した動作が設定されます。これは、 `dropEffect` が前回の `dragenter` または `dragover` イベントの後に有していた値となります。例えば `dragend` イベントにおいて、望ましい dropEffect が "move" であれば、ドラッグされたデータをソースから削除する必要があります。

値
-

文字列で、ドラッグ操作の効果を表します。取りうる値は以下の通りです。

`copy`

新しい場所にソースアイテムのコピーが作成されます。

`move`

アイテムを新しい場所に移動します。

`link`

新しい場所のソースにリンクが確立されます。

`none`

アイテムはドロップしない場合があります。

`dropEffect` に他の値を代入しても効果はなく、古い値が保持されます。

例
-

この例では、`dropEffect` と`effectAllowed` プロパティを使用しています。

### HTML


```html
<div>
  <p id="source" ondragstart="dragstart\_handler(event);" draggable="true">
    この要素を選択し、ドロップゾーンにドラッグして放すと、要素が移動します。
  </p>
</div>
<div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
  ドロップゾーン
</div>
```

### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}
```

### JavaScript


```js
function dragstart\_handler(ev) {
  console.log(
    "dragStart: dropEffect = " +
      ev.dataTransfer.dropEffect +
      " ; effectAllowed = " +
      ev.dataTransfer.effectAllowed,
  );

  // この要素の id をドラッグ ペイロードに追加し、ドロップ ハンドラーが
  // どの要素をツリーに追加するかを知ることができるようにします。
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function drop\_handler(ev) {
  console.log(
    "drop: dropEffect = " +
      ev.dataTransfer.dropEffect +
      " ; effectAllowed = " +
      ev.dataTransfer.effectAllowed,
  );
  ev.preventDefault();

  // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function dragover\_handler(ev) {
  console.log(
    "dragOver: dropEffect = " +
      ev.dataTransfer.dropEffect +
      " ; effectAllowed = " +
      ev.dataTransfer.effectAllowed,
  );
  ev.preventDefault();
  // dropEffect を移動するように設定します。
  ev.dataTransfer.dropEffect = "move";
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-dropeffect-dev |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
DataTransfer.effectAllowed
==========================

**`DataTransfer.effectAllowed`** プロパティは、ドラッグ操作で許可される効果を指定します。**コピー**操作は、ドラッグされるデータを現在の位置からドロップ位置にコピーすることを示すために使用されます。**移動**操作は、ドラッグされるデータを移動することを示すために使用され、**リンク**操作は、ソース位置とドロップ位置の間に何らかの形の関係または接続を作成することを示すために使用されます。

このプロパティは、 `dragstart` イベントで設定して、ドラッグソースのドラッグ効果を設定する必要があります。 `dragenter` および `dragover` のイベントハンドラー内では、このプロパティは `dragstart` イベントで割り当てられた値に設定されるため、 `effectAllowed` を使用してどの効果が許可されているかを決定することができます。

イベント `dragstart` 以外のイベントで `effectAllowed` に値を代入しても何の効果もありません。

値
-

文字列で、許可されているドラッグ操作を表します。可能な値は以下の通りです。

`none`

アイテムをドロップすることができません。

`copy`

ソースアイテムのコピーを新しい場所に作成することができます。

copyLink

コピーやリンク操作が許可されています。

copyMove

コピーや移動操作が許可されています。

link

ソースから新しい場所へのリンクを確立することができます。

linkMove

リンクや移動の操作が許可されています。

move

アイテムを新しい場所に移動することができます。

all

すべての操作が許可されています。

uninitialized

効果が設定されていない場合の既定値で、 all と同等です。

`effectAllowed` に他の値を代入しても効果はなく、古い値が保持されます。

Internet Explorer では、値を小文字に変更します。従って、 `linkMove` は `linkmove` になります。

例
-

### effectAllowed の設定

この例では、 `dragstart` ハンドラーの中で `effectAllowed` を `"move"` に設定しています。

#### HTML


```html
<div>
  <p id="source" draggable="true">
    この要素を選択し、ドロップゾーンにドラッグしてから放すと要素を移動します。
  </p>
</div>
<div id="target">ドロップゾーン</div>
<pre id="output"></pre>
<button id="reset">Reset</button>
```


#### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

#output {
  height: 100px;
  overflow: scroll;
}
```


#### JavaScript


```js
function dragstartHandler(ev) {
  log(`dragstart: effectAllowed = ${ev.dataTransfer.effectAllowed}`);

  // この要素の ID をドラッグのデータに追加し、ドロップハンドラーがどの要素を
  // ツリーに追加すればよいかを知ることができるようにします。
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function dropHandler(ev) {
  log(`drop: effectAllowed = ${ev.dataTransfer.effectAllowed}`);

  ev.preventDefault();
  // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

function dragoverHandler(ev) {
  log(`dragover: effectAllowed = ${ev.dataTransfer.effectAllowed}`);
  ev.preventDefault();
}

const source = document.querySelector("#source");
const target = document.querySelector("#target");

source.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

function log(message) {
  const output = document.querySelector("#output");
  output.textContent = `${output.textContent}\n${message}`;
  output.scrollTop = output.scrollHeight;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-effectallowed-dev |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
DataTransfer.items
==================

`DataTransfer` インターフェイスの `items` プロパティは読み取り専用で、ドラッグ操作でのデータ転送項目のリストです。リストには操作中の項目ごとに 1 つの項目が含まれており、操作に項目がなかった場合はリストは空になります。

値
-

ドラッグ操作でドラッグされる項目を表す `DataTransferItem` オブジェクトを含む `DataTransferItemList` オブジェクトで、ドラッグされるオブジェクトごとに 1 つのリスト項目があります。ドラッグ操作にデータがない場合、リストは空になります。

例
-

### ドラッグされた項目の記録

この例では、`items` を使って、ドラッグした項目の情報を記録します。

#### HTML


```html
<ul>
  <li id="source1" draggable="true">
    項目 1 をドロップゾーンにドラッグしてください
  </li>
  <li id="source2" draggable="true">
    項目 2 をドロップゾーンにドラッグしてください
  </li>
</ul>
<div id="target">ドロップゾーン</div>

<pre id="output"></pre>
<button id="reset">リセット</button>
```


#### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#target {
  border: 1px solid black;
}

#output {
  height: 100px;
  overflow: scroll;
}
```


#### JavaScript


```js
function dragstartHandler(ev) {
  log(`dragstart: target.id = ${ev.target.id}`);
  // この要素の ID をドラッグの内容に追加し、ドロップハンドラーがどの
  // 要素をツリーに追加すればよいかを知ることができるようにします。
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function dropHandler(ev) {
  ev.preventDefault();
  // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  // 各項目の "kind" と "type" を表示する
  if (ev.dataTransfer.items != null) {
    for (const item of ev.dataTransfer.items) {
      log(`kind = ${item.kind}, type = ${item.type}`);
    }
  }
}

function dragoverHandler(ev) {
  ev.preventDefault();
  // dropEffect を move に設定する
  ev.dataTransfer.dropEffect = "move";
}

const source1 = document.querySelector("#source1");
const source2 = document.querySelector("#source2");
const target = document.querySelector("#target");

source1.addEventListener("dragstart", dragstartHandler);
source2.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

function log(message) {
  const output = document.querySelector("#output");
  output.textContent = `${output.textContent}\n${message}`;
  output.scrollTop = output.scrollHeight;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-datatransfer-items-dev |

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

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

関連情報
----

* ドラッグ＆ドロップ
* ドラッグ操作
* 推奨されるドラッグ型
* 複数の項目のドラッグ＆ドロップ
* DataTransfer test - Paste or Drag
DataTransfer()
==============

**`DataTransfer`** のコンストラクターは、新しい `DataTransfer` オブジェクトのインスタンスを作成します。

構文
--


```js
new DataTransfer();
```

### 引数

なし。

仕様書
---

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

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

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