replaceWithとは
- ここで説明するreplaceWith とは次の語句からなるjavascriptのメソッドです。
- replace
- 読み: リプレイス
意味: 置き換える - with
- 読み: ウィズ、ウィス
意味: ～と
replaceWithメソッドの概要
このメソッドは、Node、もしくはChildNodeのオブジェクト、及びリストに関連付けられたノードを Node、またはDOMStringオブジェクトのセットに置き換えます。
ただし、メソッドの引数に与えたノードがDOMStringの場合、それはテキストノードと等価なノードとして置き換えられます。 つまり、String型のオブジェクトではテキストとしてしか認識されないということです。
構文
サンプルを見る前に構文を確認しておきます。
Node.replaceWith(Node or DOMstring, ...);サンプルコードと実行結果
このサンプルでは元にdiv要素で構成した親子要素があり、 実行ボタンをクリックすると、divの子要素がspan要素と置き換えられる仕様です。
サンプルコード: CSS
<style>
#idParent, .clsDivChildren, .clsSpanChildren{
display: block;
border: medium solid ##black;
margin: 0.5em;
padding: 0.5em;
width: fit-content;
}
#idParent{
background-color: ##lightgray;
}
.clsDivChildren{
background-color: ##lightpink;
}
.clsSpanChildren{
background-color: ##lightblue;
}
</style>
- 10: 親要素 (背景色: グレー)
- 13: 子要素 (背景色: ライトピンク)
- 16: 置換要素 (背景色: ライトブルー)
サンプルコード: HTML
<body>
<div id="idParent">
<div class ="clsDivChildren">子要素 class="clsDivChildren"</div>
<div class ="clsDivChildren">子要素 class="clsDivChildren"</div>
<div class ="clsDivChildren">子要素 class="clsDivChildren"</div>
</div>
< span class ="clsSpanChildren">置換要素 class="clsSpanChildren"< /span>
<p>
実行:<br>
<input type="button" value="ボタン" onclick="funcName()">
</p>
</body>
- 02: 親要素 (id="idParent")
- 03-05: 子要素 (class="clsDivChildren")
- 07: 置換要素 (class="clsSpanChildren")
- 10: ボタン (クリックするとスクリプトのfuncName()関数を実行します。)
サンプルコード: script
<script>
let nliDivChildren = document.querySelectorAll(".clsDivChildren");
let elmSpanChild = document.querySelector(".clsSpanChildren");
function funcName(){
for(let i = 0; i < nliDivChildren.length; i++){
nliDivChildren[i].replaceWith(elmSpanChild.cloneNode(true));
}
}
</script>
- 02: NodeListの取得 (nliDivChildren = clsDivChildrenのリスト)
- 03: Nodeの取得 (elmSpanChild = clsSpanChildren)
- 04-08: 関数の作成 (funcName()という関数を作成します。)
- 05-07: 繰り返し処理 (nliDivChildrenのアイテム数だけループします。)
- 06: 置換処理 (nliDivChildrenのアイテムを順次、elmSpanChildの複製に置き換えます。)
子要素 class="clsDivChildren"
子要素 class="clsDivChildren"
子要素 class="clsDivChildren"
実行: