2012年3月30日金曜日

jQueryでgetElementByIdを書くときの注意

HTML5のcanvas機能を使おうと思って、以下のように書いてみたけど動かなかったのです。 そんなオブジェクトないからそんなメソッドありません、て感じのエラー付きで。 var canvas = $('#drawCanvas');
var context = canvas.getContext('2d');
で、こう書いてみたらちゃんと動く。 var canvas = getElementById('drawCanvas');
var context = canvas.getContext('2d');
なんで? getElementById('drawCanvas')はjQueryなら$('#drawCanvas')じゃないの? と思ってぐぐったら、こういうことでした。
jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで返ってくるような生のElementオブジェクトは取れない。
生のElementを取ろうと思った場合は「$("#id")[0]」と書くか「$("#id").get(0)」と書けば良いらしい。
jQueryでdocument.getElementByIdと等価を取る : mwSoft blog

で、こう書いてみたら確かに動いた。 var canvas = $('#drawCanvas')[0];
var context = canvas.getContext('2d');
先日スクロールバーの操作の所でなんで[0]が要るのかわからなくて悩んでたのも、これが原因だったんですね。すっきりした!

0 件のコメント:

コメントを投稿