JavaScript:classNameに入っているのはstringだけじゃなかった!：svgタグのclassNameにはSVGAnimatedStringが入っていた

2014年6月4日水曜日

イントロダクション

コードを調べてみると、以下の node.className.split にて「undefined is not a function」が発生していました。

// クラス名があるときのみ処理を実施

if (node.className) {

var classNames = node.className.split(/\s+/);

if 文にて、node.className が存在していることは確認しています。

ということは、node.className に string ではない何かが入っているのではないかと考え、条件付きブレークポイントを張り引っかかった値をチェックしてみました。

条件付きブレークポイント：

node.className.split == undefined

引っかかった値：
node.className = SVGAnimatedString
　animVal: ""
　baseVal: ""
　__proto__: SVGAnimatedString

どうやら、node.className に SVGAnimatedString 型のデータが入っているようです。

このときの node は svg でした。

つまり最近投稿に使用した svg データの className が string 型ではないため、split が undefined になっていたようです。

ちなみに、そのときに引っかかった svg データの投稿は「SVGだと、画像内の文字列を選択・検索できるのが便利！」の svg です。

className が存在している場合に、string 型ではないケースは想定していませんでした。

className に string 型以外のデータが入っているケースがあることが分かったので、以下のように node.className.split が存在することを確認してから使用するようにしました。

// クラス名があり、文字列分割可能なときのみ処理を実施

if (node.className) {

if (node.className.split) {

var classNames = node.className.split(/\s+/);

ちなみに、SVGAnimatedString 型は SVG の基本 DOM インターフェースの一つのようです。

基本データ型と基本インタフェース – SVG 1.1 （第２版）

本現象の検証は Chrome バージョン 35.0.1916.114 m にて行いました。