Document.getElementsByTagNameNS() - タグ名と名前空間から要素を取得する

2017/10/07

getElementsByTagNameNS()は、Documentのメソッドです。タグ名と名前空間を指定して要素を取得します。

概要

名前

getElementsByTagNameNS

所属

IDL

HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);

仕様書

https://dom.spec.whatwg.org/#dom-document-getelementsbytagnamens

説明

第1引数(namespace)には、対象の名前空間URIを指定します。

第2引数(localName)には、対象のタグ名を指定します。

返り値は、要素の集合であるHTMLCollectionです。

チュートリアル

getElementsByTagNameNS()は、名前空間URIとタグ名を指定して要素を取得します。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
	<circle cx="50" cy="50" r="50" fill="red"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
	<circle cx="50" cy="50" r="50" fill="blue"/>
</svg>

var elements = document.getElementsByTagNameNS( "http://www.w3.org/2000/svg", "svg" ) ;	// HTMLCollection

elements[0] ;	// <svg>...</svg>
elements[1] ;	// <svg>...</svg>

デモ

Document.getElementsByTagNameNS()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
	div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
	<circle cx="25" cy="25" r="25" fill="red"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
	<circle cx="25" cy="25" r="25" fill="blue"/>
</svg>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "result" ) ;
var elements = document.getElementsByTagNameNS( "http://www.w3.org/2000/svg", "svg" ) ;

console.log( elements ) ;
element.textContent = elements + "\n\n" ;

element.textContent += elements[0].outerHTML + "\n" ;
element.textContent += elements[1].outerHTML + "\n" ;
</script>
</body>
</html>