HTML DOMのcloneNode()メソッドとは？使い方とサンプルコードを解説
HTML DOMのcloneNode()メソッドは、呼び出し対象のノードのコピーを作成し、その複製を返すメソッドです。このメソッドを使うことで、指定したノードが持つすべての属性と値をまとめて複製できます。
構文
cloneNode()メソッドの基本構文は以下の通りです。
yourNode.cloneNode([deep])
ここで「deep」は省略可能なパラメータです。値に「true」を設定すると、対象ノードだけでなく、その子ノードや属性・値もすべて一緒に複製されます。逆に「false」を設定すると、対象ノード自身とその属性・値のみがコピーされ、子ノードは複製されません。
サンプルコード
それでは、HTML DOMのcloneNode()メソッドの具体的な使用例を見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<title>CLONE NODE</title>
<style>
h1{color:green;}
h2{ color:blue; }
</style>
</head>
<body>
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
<button onclick="CloneEle()"> CLONE </button>
<script>
function CloneEle() {
var x= document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「CLONE」ボタンをクリックすると、div要素が複製されて画面に追加されます。
コードの解説
このサンプルでは、まずdiv要素を作成し、その中に<h1>要素と<h2>要素を配置しています。それぞれの見出しには独自のスタイルが適用されています。
h1{color:green;}
h2{ color:blue; }
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>次に、「CLONE」というボタンを作成しています。ユーザーがこのボタンをクリックすると、関数CloneEle()が実行される仕組みです。
<button onclick="CloneEle()"> CLONE </button>
CloneEle()関数の内部処理は以下の通りです。まずgetElementById()メソッドを使ってid「DIV1」のdiv要素を取得し、変数xに代入します。続いて、cloneNode(true)を引数「true」付きで呼び出すことで、div要素とその子要素全体を複製し、変数cloneに格納します。最後に、appendChild()メソッドを使って複製したノードをdocument.bodyに追加しています。
function CloneEle() {
var x= document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}このようにcloneNode(true)を使えば、子要素ごと完全な形でノードを複製できるため、動的にDOM要素を追加したい場合に非常に便利なメソッドです。
-
HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説
HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで
-
HTML DOMのfocus()メソッドとは？基本構文と使い方を実例付きで解説
HTML DOMのfocus()メソッドは、指定したHTML要素にフォーカスを設定するために使用されるメソッドです。ただし、すべてのHTML要素にフォーカスを適用できるわけではありません。たとえば、<p>タグのようにフォーカスを受け付けない要素も存在します。また、要素からフォーカスを解除したい場合は、blur()メソッドを使用します。 focus()メソッドの主な活用シーン ページ読み込み時やフォーム表示時に、最初の入力欄へ自動的にカーソルを合わせる バリデーションエラーが発生した際に、該当する入力フィールドへフォーカスを移動する モーダルウィンドウを開いたときに、特定のボタンや