blob: 28896c90fd704b2c651515ed0be7da3e4f2d0b40 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
title: ChildNode.replaceWith()
slug: orphaned/Web/API/ChildNode/replaceWith
tags:
- API
- DOM
- Method
- Node
- Reference
translation_of: Web/API/ChildNode/replaceWith
original_slug: Web/API/ChildNode/replaceWith
---
<div>{{APIRef("DOM")}}</div>
<p><code><strong>ChildNode.replaceWith()</strong></code> は親の子リストの <code>ChildNode</code> を、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットに置換します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">[Throws, Unscopable]
void ChildNode.replaceWith((Node or DOMString)... nodes);
</pre>
<h3 id="Parameters" name="Parameters">パラメーター</h3>
<dl>
<dt><code>nodes</code></dt>
<dd>{{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットで置換します。</dd>
</dl>
<h3 id="Exceptions" name="Exceptions">例外</h3>
<ul>
<li>{{domxref("HierarchyRequestError")}}: ノードは階層の指定の位置には挿入できません。</li>
</ul>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Using_replaceWith" name="Using_replaceWith"><code>replaceWith()</code> の使用</h3>
<pre class="brush: js notranslate">var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.replaceWith(span);
console.log(parent.outerHTML);
// "<div><span></span></div>"
</pre>
<h3 id="ChildNode.replaceWith_is_unscopable" name="ChildNode.replaceWith_is_unscopable"><code>ChildNode.replaceWith()</code> はスコーピングに非対応</h3>
<p><code>replaceWith()</code> メソッドは <code>with</code> 文でのスコーピングに対応していません。詳細は {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
<pre class="brush: js notranslate">with(node) {
replaceWith("foo");
}
// ReferenceError: replaceWith is not defined </pre>
<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
<p>以下のポリフィルで、 Internet Explorer 9 以降でも <code>replaceWith()</code> メソッドが利用できます。</p>
<pre class="brush: js notranslate">function ReplaceWithPolyfill() {
'use-strict'; // For safari, and IE > 10
var parent = this.parentNode, i = arguments.length, currentNode;
if (!parent) return;
if (!i) // if there are no arguments
parent.removeChild(this);
while (i--) { // i-- decrements i and returns the value of i before the decrement
currentNode = arguments[i];
if (typeof currentNode !== 'object'){
currentNode = this.ownerDocument.createTextNode(currentNode);
} else if (currentNode.parentNode){
currentNode.parentNode.removeChild(currentNode);
}
// the value of "i" below is after the decrement
if (!i) // if currentNode is the first argument (currentNode === arguments[0])
parent.replaceChild(currentNode, this);
else // if currentNode isn't the first
parent.insertBefore(currentNode, this.nextSibling);
}
}
if (!Element.prototype.replaceWith)
Element.prototype.replaceWith = ReplaceWithPolyfill;
if (!CharacterData.prototype.replaceWith)
CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
if (!DocumentType.prototype.replaceWith)
DocumentType.prototype.replaceWith = ReplaceWithPolyfill;</pre>
<h2 id="Specification" name="Specification">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
<p>{{Compat("api.ChildNode.replaceWith")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{domxref("ChildNode")}} と {{domxref("ParentNode")}}</li>
<li>{{domxref("Node.replaceChild()")}}</li>
<li>{{domxref("NodeList")}}</li>
</ul>
|
