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

イントロダクション

私の Blogger のページに設置している投稿の表示形式を選択できる部品ですが、なぜかうまく動いていないことに気が付きました。

コードを調べてみると、以下の 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 （第２版）

http://www.hcn.zaq.ne.jp/___/SVG11-2nd/types.html#InterfaceSVGAnimatedString

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