【PHP8.x】Dom\HTMLDocument::createElementNS()メソッドの使い方

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

作成日: 2025年09月11日更新日: 2025年11月07日

基本的な使い方

createElementNSメソッドは、名前空間URIと修飾名で指定された要素ノードを生成するメソッドです。Dom\HTMLDocumentクラスに属し、HTMLドキュメント内で新しい要素を作成するために使用されます。このメソッドは、createElementメソッドと似ていますが、名前空間をサポートしている点が異なります。名前空間を使用することで、XMLやXHTMLなどのドキュメントにおいて、要素の所属を明確にすることができます。

createElementNSメソッドは、引数として名前空間URIと修飾名を受け取ります。名前空間URIは、要素が属する名前空間を一意に識別するURIです。修飾名は、要素のローカル名（接頭辞を取り除いた名前）と、必要に応じて名前空間接頭辞をコロンで区切ったものです。

例えば、$dom->createElementNS('http://www.w3.org/1999/xhtml', 'html:div')のように呼び出すことで、XHTML名前空間に属する<div>要素を作成できます。作成された要素は、まだドキュメントツリーに追加されていません。要素をドキュメントに追加するには、appendChildなどのメソッドを使用する必要があります。

createElementNSメソッドは、要素の属性を初期化しません。属性は、別途setAttributeNSなどのメソッドを使用して設定する必要があります。また、createElementNSメソッドは、指定された名前空間URIが存在しない場合でも、エラーを発生させずに要素を作成します。ただし、名前空間URIが無効な場合や、修飾名の形式が正しくない場合は、予期しない結果になる可能性があります。

構文(syntax)


1Dom\HTMLDocument::createElementNS(string $namespace, string $qualifiedName): ?DOMElement

引数(parameters)

?string $namespace, string $qualifiedName

?string $namespace: 要素が属するXML名前空間のURIを指定する文字列。省略可能（null許容）。
string $qualifiedName: 作成する要素の修飾名（接頭辞:ローカル名）を指定する文字列。

戻り値(return)

Dom\Element

名前空間を指定して新しいHTML要素を作成し、その要素オブジェクトを返します。

サンプルコード

PHPで名前空間要素を作成する


1<?php
2
3/**
4 * Dom\HTMLDocument::createElementNS を使用して、HTMLドキュメント内に名前空間を持つ要素（例: SVG）を作成し、出力する関数。
5 */
6function createNamespaceElementInHtmlDocument(): void
7{
8    // 新しいHTML5ドキュメントを作成します。
9    // Dom\HTMLDocumentはHTML5のDOCTYPEを自動的に設定し、基本的なHTML構造を提供します。
10    $document = new Dom\HTMLDocument();
11
12    // ドキュメントの<body>要素を取得します。
13    // 要素が存在しない場合のためにnullチェックを行います。
14    $body = $document->getElementsByTagName('body')->item(0);
15    if (!$body) {
16        echo "エラー: <body>要素が見つかりませんでした。\n";
17        return;
18    }
19
20    // SVG要素の名前空間URIを定義します。
21    // createElementNSを使用する際、このURIが要素と関連付けられます。
22    $svgNamespace = 'http://www.w3.org/2000/svg';
23
24    // Dom\HTMLDocument::createElementNS を使用して、SVG要素を作成します。
25    // 第1引数に名前空間URI、第2引数に要素のタグ名を指定します。
26    $svgElement = $document->createElementNS($svgNamespace, 'svg');
27    $svgElement->setAttribute('width', '100');
28    $svgElement->setAttribute('height', '100');
29    $svgElement->setAttribute('viewBox', '0 0 100 100'); // SVGの表示領域を定義
30
31    // SVG内に円要素を作成します。これも同じSVG名前空間に属します。
32    $circleElement = $document->createElementNS($svgNamespace, 'circle');
33    $circleElement->setAttribute('cx', '50'); // 中心X座標
34    $circleElement->setAttribute('cy', '50'); // 中心Y座標
35    $circleElement->setAttribute('r', '40'); // 半径
36    $circleElement->setAttribute('stroke', 'blue'); // 線色
37    $circleElement->setAttribute('stroke-width', '3'); // 線幅
38    $circleElement->setAttribute('fill', 'lightblue'); // 塗りつぶし色
39
40    // 円をSVG要素に追加します。
41    $svgElement->appendChild($circleElement);
42
43    // 作成したSVG要素をHTMLドキュメントの<body>要素に追加します。
44    $body->appendChild($svgElement);
45
46    // 最終的なHTMLドキュメントの内容をHTML形式で出力します。
47    // これにより、ブラウザで表示できる完全なHTML文字列が生成されます。
48    echo $document->saveHTML();
49}
50
51// 関数を実行して、サンプルコードの動作を確認します。
52createNamespaceElementInHtmlDocument();
53
54?>

Dom\HTMLDocument::createElementNSメソッドは、PHPでHTMLドキュメント内に名前空間を持つ要素を作成する際に使用されます。このメソッドは特に、HTMLの標準要素とは異なるSVG（Scalable Vector Graphics）やMathML（Mathematical Markup Language）のような、特定のXMLベースの技術の要素を組み込む場合に役立ちます。

このメソッドには二つの引数があります。最初の引数である$namespaceには、作成したい要素が属する名前空間のURI（URL形式の識別子）を指定します。これにより、その要素がどの技術のルールに従うかが明確になります。二番目の引数である$qualifiedNameには、作成したい要素のタグ名（例えば「svg」や「circle」）を文字列で指定します。メソッドは新しく作成されたDom\Elementオブジェクトを返します。この戻り値を使って、要素の属性を設定したり、子要素を追加したりすることができます。

サンプルコードでは、まず新しいHTMLドキュメントを作成し、要素を追加するための<body>要素を取得しています。次に、SVG要素の名前空間URIを定義し、createElementNSメソッドを用いて<svg>要素を作成します。同様に、そのSVG要素の中に描かれる円を表す<circle>要素も、同じSVG名前空間を指定して作成しています。それぞれの要素には、幅、色、半径といった表示に関する属性が設定されます。作成した円はSVG要素の子要素として、SVG要素はHTMLドキュメントの<body>の子要素として追加されます。最終的にsaveHTML()メソッドにより、これらの要素が適切に組み込まれた完全なHTMLドキュメントの内容がHTML形式で出力されます。これにより、ブラウザで正しく表示されるSVG画像を含むHTMLが生成されます。

createElementNSは、SVGやMathMLのようにHTMLとは異なるXML名前空間に属する要素を作成する際に用います。通常のHTML要素を作成する場合はcreateElementを利用するため、この違いを理解することが重要です。第1引数に指定する名前空間URIは、要素を正しく識別するために各仕様で定められた正確な値を設定してください。誤ったURIは、ブラウザでの表示やXMLパーサーによる処理に影響を与える可能性があります。

Dom\HTMLDocumentクラスはHTML5文書の操作に特化しており、基本的なHTML構造を自動生成する点が特徴です。一般的なXML文書を扱う場合は、より汎用的なDom\Documentクラスの使用を検討すると良いでしょう。ドキュメントから既存の要素を取得する際は、getElementsByTagNameなどの結果がnullになる可能性を考慮し、必ず存在チェックを行ってから操作することが安全なコーディングにつながります。作成した要素は、appendChildメソッドで適切な親要素に追加しないと、最終的なHTML出力には反映されませんのでご注意ください。

PHP DomDocument createElementNSでSVG要素を作成する


1<?php
2
3/**
4 * Dom\HTMLDocument::createElementNS の使用例を示します。
5 * この関数は、HTML ドキュメント内に SVG 要素（名前空間を持つ要素）を動的に作成し、
6 * その内容を HTML 文字列として返します。
7 *
8 * Dom\HTMLDocument は PHP 8.0 で導入された新しい DOM 拡張の一部で、
9 * HTML5 の仕様に準拠したドキュメントをより適切に扱えます。
10 */
11function createHtmlWithSvgUsingNamespace(): string
12{
13    // 新しい HTML ドキュメントをインスタンス化します。
14    // ここでは、基本的な HTML5 構造を持つドキュメントをロードします。
15    $document = new Dom\HTMLDocument();
16    $document->loadHTML('<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title>SVG Example</title></head><body></body></html>');
17
18    // ドキュメントの body 要素を取得します。
19    $body = $document->getElementsByTagName('body')->item(0);
20
21    // body 要素が見つからなければ処理を中断（通常は発生しない）
22    if ($body === null) {
23        return "Failed to find body element.";
24    }
25
26    // SVG 要素の名前空間 URI を定義します。
27    // createElementNS は、XML または HTML の中で名前空間を持つ要素を作成する際に使用されます。
28    // SVG は、HTML に埋め込まれる際にもその名前空間を保持します。
29    $svgNamespace = 'http://www.w3.org/2000/svg';
30
31    // createElementNS を使用して SVG 要素を作成します。
32    // 第一引数: 名前空間URI (?string $namespace)
33    // 第二引数: 要素の修飾名 (string $qualifiedName, ここでは "svg")
34    $svgElement = $document->createElementNS($svgNamespace, 'svg');
35    $svgElement->setAttribute('width', '120');
36    $svgElement->setAttribute('height', '120');
37    $svgElement->setAttribute('viewBox', '0 0 120 120'); // SVGの描画領域を設定
38
39    // SVG ドキュメント内に円を作成します。これも名前空間を持つ要素です。
40    $circleElement = $document->createElementNS($svgNamespace, 'circle');
41    $circleElement->setAttribute('cx', '60'); // 中心X座標
42    $circleElement->setAttribute('cy', '60'); // 中心Y座標
43    $circleElement->setAttribute('r', '50');  // 半径
44    $circleElement->setAttribute('fill', '#ff4500'); // 塗りつぶし色 (Orangered)
45    $circleElement->setAttribute('stroke', 'black'); // 枠線色
46    $circleElement->setAttribute('stroke-width', '2'); // 枠線幅
47
48    // SVG 要素に円要素を追加します。
49    $svgElement->appendChild($circleElement);
50
51    // 作成した SVG 要素を HTML の body に追加します。
52    $body->appendChild($svgElement);
53
54    // ドキュメント全体を HTML 文字列として出力します。
55    return $document->saveHTML();
56}
57
58// 関数を実行し、生成された HTML を出力します。
59echo createHtmlWithSvgUsingNamespace();

Dom\HTMLDocument::createElementNSは、PHP 8で導入された新しいDOM拡張の一部であるDom\HTMLDocumentクラスのメソッドです。このメソッドは、HTMLドキュメント内に名前空間を持つ新しい要素を動的に作成する際に使用されます。特に、SVG（Scalable Vector Graphics）やMathML（Mathematical Markup Language）のように、HTMLとは異なるXMLベースの仕様に基づく要素を埋め込む場合に重要です。

第一引数?string $namespaceには、作成する要素の名前空間URIを指定します。例えば、SVG要素を作成する場合は'http://www.w3.org/2000/svg'というURIを設定します。このURIによって、その要素がどのXML名前空間に属するかが定義されます。第二引数string $qualifiedNameには、作成する要素のタグ名、例えば'svg'や'circle'などを指定します。

このメソッドは、新しく作成された要素を表すDom\Elementオブジェクトを返します。返されたオブジェクトに対しては、setAttributeメソッドで属性を追加したり、appendChildメソッドで子要素を追加したりするなどの操作が可能です。

サンプルコードでは、Dom\HTMLDocumentインスタンスを作成し、HTMLドキュメントのbody内にSVG要素を埋め込む例を示しています。$svgNamespace変数にSVGの名前空間URIを定義し、createElementNSの第一引数に渡すことで、ブラウザが正しくSVGとして認識できる要素を作成しています。その後、同様にSVGの名前空間を指定してcircle要素を作成し、その属性を設定してからSVG要素の子要素として追加しています。このように、createElementNSは、名前空間を意識した柔軟なドキュメント操作を可能にします。通常のHTML要素を作成するcreateElementとは異なり、名前空間が関わる要素作成に特化している点が特徴です。

createElementNS は、SVGのように名前空間を持つ要素をHTMLドキュメント内に作成する際に利用します。通常のHTML要素は createElement で十分ですが、名前空間を持つ要素には、第一引数に要素が属する名前空間のURIを正しく指定することが重要です。このURIを間違えると、ブラウザで要素が適切に解釈されず、期待通りに表示されない可能性があります。

また、サンプルコードで使用している Dom\HTMLDocument クラスはPHP 8.0以降で導入された新しいDOM拡張であるため、それより古いPHPバージョンでは動作しない点にご注意ください。この関数を使いこなすことで、HTMLの枠を超えたSVGなどのリッチなコンテンツをWebページに動的に組み込むことができるようになります。