~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年6月4日水曜日

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 (第2版)


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


スポンサーリンク

コメントを投稿

コメント投稿機能について