Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【PHP8.x】DOMElement::cloneNode()メソッドの使い方

cloneNodeメソッドの使い方について、初心者にもわかりやすく解説します。

作成日: 更新日:

基本的な使い方

cloneNodeメソッドは、DOMツリー内に存在するノードの複製を作成するメソッドです。このメソッドは、DOMElementクラスのインスタンスに対して呼び出され、HTMLやXMLドキュメント内の要素を効率的に複製する際に使用されます。

このメソッドは、ブール型の引数$deepを受け取ります。$deeptrueを指定すると、現在のノードだけでなく、そのすべての子ノードや属性も再帰的に複製されます。これを「ディープコピー」と呼びます。一方、$deepfalseを指定すると、現在のノード自身のみが複製され、子ノードは複製されません。これを「シャローコピー」と呼びます。ディープコピーは元のノードと全く同じ構造を持つ新しいノードツリーを作成したい場合に、シャローコピーは子要素を含まない新しいノードが必要な場合に適しています。

cloneNodeメソッドは、複製された新しいDOMNodeオブジェクトを返します。この複製されたノードは、元のノードとは独立した新しいインスタンスであり、元のドキュメントツリーには自動的には追加されません。実際にドキュメントに組み込むには、appendChildinsertBeforeなどのDOM操作メソッドを使って明示的に追加する必要があります。この機能により、既存のDOM構造を再利用し、ウェブページの動的なコンテンツ生成や更新を柔軟に実現できます。

構文(syntax)

1<?php
2// DOMElement のインスタンスを作成
3$originalElement = new DOMElement('div');
4
5// cloneNode メソッドを呼び出す
6// 引数 $deep に true を指定すると、子ノードも含めて再帰的にクローンされます
7$clonedElement = $originalElement->cloneNode(true);

引数(parameters)

bool $deep = false

  • bool $deep = false: trueを指定すると、ノードとそのすべての子孫ノードを再帰的にコピーします。false(デフォルト)を指定すると、ノード自身のみがコピーされ、子ノードはコピーされません。

戻り値(return)

DOMNode|false

DOMElementオブジェクトのディープコピーを返します。コピーに失敗した場合はfalseを返します。

サンプルコード

PHP DOMElement::cloneNodeの挙動と使い方

1<?php
2
3// DOMDocumentオブジェクトを作成します。
4// HTML文書を扱うための基盤となります。
5$dom = new DOMDocument();
6// HTMLのパース中に発生する警告(例: HTML5ではないことに関する警告)を抑制し、出力を見やすくします。
7libxml_use_internal_errors(true); 
8
9// 処理対象となるHTMLの文字列を定義します。
10$html = <<<HTML
11<html>
12<head><title>PHP DOMElement::cloneNode サンプル</title></head>
13<body>
14    <div id="originalDiv">
15        <p>これは元の要素内の最初の段落です。</p>
16        <span>子要素のテキスト</span>
17    </div>
18    <div id="container">
19        <h2>複製されたノードの追加例</h2>
20        <!-- cloneNodeで作成されたノードはここに挿入されます -->
21    </div>
22</body>
23</html>
24HTML;
25
26// HTML文字列をDOMDocumentにロードします。
27$dom->loadHTML($html);
28
29// 複製したいDOMElementを取得します。
30// XPathを使って、IDが"originalDiv"のdiv要素を検索します。
31$xpath = new DOMXPath($dom);
32$originalDiv = $xpath->query('//div[@id="originalDiv"]')->item(0);
33
34// 複製元の要素が正しく取得できたか確認します。
35if ($originalDiv instanceof DOMElement) {
36    echo "--- 元の要素のHTML ---" . PHP_EOL;
37    // saveHTML()メソッドにノードを渡すと、そのノードのHTMLフラグメントを返します。
38    echo $dom->saveHTML($originalDiv) . PHP_EOL . PHP_EOL;
39
40    // 1. cloneNode(false) の場合 (浅い複製):
41    // 要素自体のみを複製し、その子ノード(<p>, <span>など)は複製しません。
42    $clonedDivShallow = $originalDiv->cloneNode(false);
43    echo "--- 浅く複製された要素 (deep=false) のHTML ---" . PHP_EOL;
44    // 出力例: <div id="originalDiv"></div> (子ノードが含まれていないことに注目)
45    echo $dom->saveHTML($clonedDivShallow) . PHP_EOL . PHP_EOL;
46
47    // 2. cloneNode(true) の場合 (深い複製):
48    // 要素とそのすべての子ノードを再帰的に複製します。
49    $clonedDivDeep = $originalDiv->cloneNode(true);
50    // 複製されたノードのIDを変更して、オリジナルと区別しやすくします。
51    // 同じIDが複数存在するとHTMLとして不適切になる可能性があります。
52    $clonedDivDeep->setAttribute('id', 'clonedDivDeep');
53    echo "--- 深く複製された要素 (deep=true) のHTML ---" . PHP_EOL;
54    // 出力例: <div id="clonedDivDeep"><p>...</p><span>...</span></div> (子ノードも含まれていることに注目)
55    echo $dom->saveHTML($clonedDivDeep) . PHP_EOL . PHP_EOL;
56
57    // 複製された深いノードをDOMツリー内の別の場所に実際に挿入してみます。
58    // IDが"container"のdiv要素を取得します。
59    $container = $xpath->query('//div[@id="container"]')->item(0);
60
61    if ($container instanceof DOMElement) {
62        // cloneNodeで作成されたノードは、まだ既存のDOMツリーに属していません。
63        // appendChild()などを使って既存のドキュメントに挿入することで、そのドキュメントの一部になります。
64        $container->appendChild($clonedDivDeep);
65        echo "--- 複製された深いノードをDOMツリーに追加後のドキュメント全体 ---" . PHP_EOL;
66        // ドキュメント全体のHTMLを出力して、変更が反映されたことを確認します。
67        echo $dom->saveHTML() . PHP_EOL;
68    } else {
69        echo "エラー: 複製ノードを追加するためのコンテナ要素が見つかりませんでした。" . PHP_EOL;
70    }
71
72} else {
73    echo "エラー: 複製元の要素(ID: originalDiv)が見つかりませんでした。HTMLを確認してください。" . PHP_EOL;
74}
75
76// libxmlエラーの抑制を解除します。(他のXML/HTML処理が続く場合は重要です)
77libxml_use_internal_errors(false);
78
79?>

PHPのDOMElement::cloneNodeメソッドは、HTMLやXML文書をプログラムで操作する際に、特定の要素(ノード)を複製するために利用されます。このメソッドは、呼び出し元のDOMElementオブジェクトをコピーし、新しいDOMNodeオブジェクトとして返します。

引数$deepには真偽値(trueまたはfalse)を指定します。デフォルトはfalseです。$deepfalseに設定すると、要素自体は複製されますが、その要素が持つ子ノード(テキストやさらに内包されるタグなど)は複製されません。これを「浅い複製」と呼びます。一方、$deeptrueに設定すると、要素自身だけでなく、その内部にあるすべての子ノードまで含めて、完全に再帰的に複製されます。これを「深い複製」と呼びます。

複製されたノードは、元のドキュメントとは独立した新しいオブジェクトです。そのため、そのままではDOMツリーには追加されません。複製後にappendChild()などのメソッドを使って、既存のDOMツリー内の適切な場所に明示的に挿入することで、そのドキュメントの一部として実際に利用できるようになります。メソッドの戻り値は、複製に成功した場合は新しいDOMNodeオブジェクト、失敗した場合はfalseです。このサンプルコードでは、cloneNode(false)による浅い複製とcloneNode(true)による深い複製の結果の違いを視覚的に示し、複製したノードを実際のドキュメントに追加する一連の流れを具体的に説明しています。

DOMElement::cloneNodeは、DOM要素を複製するメソッドです。引数$deepfalseの場合、要素自身のみが複製され、その子要素は含まれません。一方、trueを指定すると、要素とそのすべての子要素が再帰的に複製されます。この深い複製と浅い複製の違いを理解することが最も重要です。

複製されたノードは新しいオブジェクトであり、元のドキュメントツリーにはまだ属していません。そのため、複製したノードを実際にドキュメントに組み込むには、appendChildなどのメソッドを使って明示的に追加する必要があります。

また、複製元の要素と同じIDを持つノードが複数存在すると、HTMLとして不適切な状態になることがあります。複製後は、必要に応じて複製したノードのIDを変更するように注意してください。メソッドの戻り値がfalseになる可能性もあるため、エラーハンドリングも考慮しましょう。

PHP DOMElement::cloneNode で要素を複製する

1<?php
2
3/**
4 * DOMElement::cloneNode メソッドの使用例を示します。
5 * HTML要素を複製し、DOMツリーに追加する手順を、初心者にもわかりやすく解説します。
6 */
7function demonstrateDomElementCloneNode(): void
8{
9    // 1. DOMDocument オブジェクトを作成し、HTMLコンテンツをロードします。
10    // formatOutput を true に設定すると、出力されるHTMLが整形され、読みやすくなります。
11    $dom = new DOMDocument();
12    $dom->formatOutput = true;
13    
14    // 複製対象となる要素を含むHTML文字列を定義します。
15    // getElementById を確実にするため、<!DOCTYPE html> から始まる完全なHTML構造を模倣します。
16    $htmlContent = '
17<!DOCTYPE html>
18<html>
19<head>
20    <title>PHP DOMElement cloneNode Example</title>
21    <meta charset="UTF-8">
22</head>
23<body>
24    <h1>DOMElement::cloneNode のデモンストレーション</h1>
25    
26    <div id="originalContainer">
27        <p id="originalParagraph">これはオリジナルの段落です。</p>
28        <ul>
29            <li>元のリストアイテム 1</li>
30            <li>元のリストアイテム 2</li>
31        </ul>
32        <!-- このコメントもDOMノードの一部です -->
33    </div>
34    
35    <hr>
36    
37</body>
38</html>';
39    
40    // HTMLをDOMにロードします。
41    // libxml_use_internal_errors を使うことで、HTMLのパースに関する警告を抑制できます。
42    libxml_use_internal_errors(true);
43    $dom->loadHTML($htmlContent);
44    libxml_use_internal_errors(false);
45
46    echo "--- 元のHTML構造 ---\n";
47    echo $dom->saveHTML() . "\n\n";
48
49    // 2. 複製したい元の要素(この例では ID が "originalContainer" の div)を取得します。
50    // getElementById は指定されたIDを持つ要素を検索します。
51    $originalContainer = $dom->getElementById('originalContainer');
52
53    if (!$originalContainer) {
54        echo "エラー: ID 'originalContainer' を持つ要素が見つかりませんでした。\n";
55        return;
56    }
57
58    // 3. cloneNode メソッドを使って要素を複製します。
59    // 引数 $deep に true を指定すると、元の要素だけでなく、その全ての子孫ノード(子要素、テキスト、コメントなど)も深く複製されます。
60    // false を指定した場合、元の要素のみが複製され、子ノードは含まれません。
61    $clonedContainer = $originalContainer->cloneNode(true);
62
63    // 4. 複製したノードに変更を加えて、元のノードと区別できるようにします。
64    // ID を変更し、これが複製であることを明確にします。
65    $clonedContainer->setAttribute('id', 'clonedContainer');
66    
67    // 複製された子ノード(段落)にも変更を加えます。
68    // getElementsByTagName は DOMElement 内でも使用でき、指定されたタグ名を持つ子要素を NodeList として返します。
69    $clonedParagraph = $clonedContainer->getElementsByTagName('p')->item(0);
70    if ($clonedParagraph) {
71        $clonedParagraph->nodeValue = 'これは複製された段落です。元のコンテンツとは異なります。';
72    }
73
74    // 5. 複製したノードをDOMツリーの適切な位置に追加します。
75    // ここでは、<body>タグの最後に複製されたコンテナを追加します。
76    $body = $dom->getElementsByTagName('body')->item(0);
77    if ($body) {
78        // 視認性向上のための改行ノードと、複製ノードを追加します。
79        $body->appendChild($dom->createTextNode("\n    ")); // HTML整形のため、インデント用の改行とスペースを追加
80        $body->appendChild($clonedContainer);
81        $body->appendChild($dom->createTextNode("\n"));
82    } else {
83        echo "エラー: HTML構造に <body> タグが見つかりませんでした。\n";
84        return;
85    }
86    
87    echo "--- cloneNode(true) で複製・追加後のHTML構造 ---\n";
88    echo $dom->saveHTML() . "\n";
89}
90
91// 関数を実行し、デモンストレーションを開始します。
92demonstrateDomElementCloneNode();
93

このPHPのサンプルコードは、DOMElement::cloneNodeメソッドを使ってHTML要素を複製し、DOMツリーに組み込む方法を示しています。まず、DOMDocumentオブジェクトにHTMLコンテンツを読み込み、操作の準備をします。次に、IDが"originalContainer"であるdiv要素を取得し、この要素を複製対象とします。

DOMElement::cloneNodeメソッドは、指定された要素を複製する際に使用します。引数$deeptrueを指定すると、元の要素だけでなく、その内部に含まれる全ての子要素、テキスト、コメントなどもまとめて複製(深い複製)します。falseを指定した場合は、要素自身のみが複製され、子ノードは含まれません(浅い複製)。このメソッドは複製されたDOMNodeオブジェクトを返しますが、複製に失敗した場合はfalseを返します。

サンプルでは、cloneNode(true)を使って"originalContainer"を深く複製し、複製された要素のIDを"clonedContainer"に変更しています。さらに、複製されたコンテナ内の段落のテキストも変更し、元の要素と区別できるようにしています。最後に、DOMDocument内のbody要素の末尾に、この複製・変更された要素を追加しています。これにより、元のHTML要素をテンプレートのように再利用し、新しいコンテンツとしてDOMツリーに配置する一連の流れを学ぶことができます。

DOMElement::cloneNodeメソッドは、指定された要素を複製します。引数$deeptrueを渡すと、子孫ノードも全て含めて複製されますが、falseの場合は要素自身のみが複製され、子孫は含まれません。この引数の違いを理解することが重要です。複製されたノードは、元のDOMツリーとは独立した存在であり、自動でDOMに追加されるわけではありません。そのため、appendChildなどのメソッドを使って、明示的にDOMツリーの適切な位置に追加する必要があります。また、複製されたノードは元のノードと同じIDや属性を持つため、DOMツリーに追加する前に必要に応じて一意の値に変更しないと、DOM内でID重複などの問題が発生する可能性がありますので注意してください。

関連コンテンツ

関連IT用語

関連プログラミング言語