.getAttribute is not a function error getAttributeについて少し考えてみました。

最近SVGプログラミングを勉強しているのですが、SVGDOMオブジェクトの内部属性を操作するために属性を取得する必要がよくあり、その際にgetAttribute()を使っています。

getAttribute()を使ってデータを取り出すことができたのですが、ページのコンソールでエラーが報告されています。

jsのコードはこんな感じです。

// Get all the data in the XML file to be fetched
var SVGElement = document.getElementById('geo_svg');

//fetch all polygon polygons from the SVG's XML
var polygonElements = SVGElement.getElementsByTagName('polygon');

// take out the data in each ploygen array
for(var x in polygonElements){
        //print the points property of each polygon
	console.log(polygonElements[x].getAttribute("points"));

実行後、コンソールに印刷されるのは次のようなものです。

上ではポイントセットの座標が正常に取得されていることがわかりますが、下ではエラーが報告されます。

Uncaught TypeError: polygonElements[x].getAttribute is not a function
    at findCoordinate (init?projTbmId=1&tabPageId=jerichotabiframe_1:1596)
    at Object.success (init?projTbmId=1&tabPageId=jerichotabiframe_1:1573)
    at l (jquery-1.8.3.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.8.3.min.js:2)
    at T (jquery-1.8.3.min.js:2)
    at XMLHttpRequest.r (jquery-1.8.3.min.js:2)

なぜデータを出してもエラーが報告されるのか、長い間考えていました。Webでデバッグをみても解決しませんでした。

そこで、データの種類を出力してみました。

console.log(typeof(polygonElements[x]));

最後に、このクエリオブジェクトは、数値、オブジェクト、関数の3つのデータ型を持っていることがわかります。

そして、オブジェクトかどうかの判定を加え、オブジェクトならgetAttribute()が利用でき、そうでないなら利用できないようにしています。

if(typeof(polygonElements[x])=="object")

このステートメントを追加すると、自動的に非オブジェクトデータ型をフィルタリングします。バグの解決に最適

このように属性を取る関数の場合、オブジェクトかどうかの判定を頻繁に行う必要があります。コードの堅牢性を高めることが重要なんだ。

入力が終わったら終了です。