作って納得! DOM 2 Events: Days on the Moon
ブラウザ上でのプログラミングで避けては通れないのがイベント処理。その仕組みは DOM Level 2 Events にて規定されています。しかし、とりあえず addEventListener メソッドを使ってはいるものの、それがどのような意味を持つか詳しくは知らないといったことはありませんか。そこでここでは、DOM 2 Events のイベントモデルを理解し、ブラウザが裏で何をしているのかを把握するために、実際にそのイベントモデルを実装してみることにします。具体的には、仕様書に定められたインターフェースを JavaScript で実装し、それらを組み合わせてイベントの発生をシミュレートしてみます。 Event インターフェース EventListener インターフェース EventTarget インターフェース DocumentEvent インターフェース DOMException イン
DOM Events とブラウザの実装: Days on the Moon
ブラウザ上でのイベント処理の仕組みは DOM 2 Events および DOM 3 Events 草案にて規定されています。しかし、DOM 2 Events で言及されていない部分など、細かい動作はブラウザごとに異なっていることもあります。そうした仕様と実装の差異を、「作って納得! DOM 2 Events」で触れなかったものも含めて、いくつかまとめてみました。 ターゲットフェーズで呼び出されるリスナ DOM 2 Events のイベントモデルにおいて、あるノードでイベントが発生すると、そのノードの祖先ノードのイベントリスナが呼び出されるキャプチャリングフェーズ、そのノード自身のイベントリスナが呼び出されるターゲットフェーズ、再び祖先ノードのイベントリスナが呼び出されるバブリングフェーズと、3 段階にわたってイベントが伝播していきます。このうちターゲットフェーズでは、addEventLis
DOM Elementオブジェクトをテキストダンプしてデバッグ - hogehoge @teramako
DOM APIを使用して作ったDOMツリー、うまく生成されているか見てみたい事は多々ある。少なくともオイラはある。簡単にテキスト表示してくれると嬉しいなぁと常々思っていたのだが発見した。 Firefox（というかMozilla系かな）限定だろうけどXMLSerializerがあるのだ。 使い方は簡単。 var serializer = new XMLSerializer(); //略 var root = document.createElement('div'); var anchor = document.createElement('a'); var aText = document.createTextNode('はてな'); anchor.setAttribute('href','http://www.hatena.ne.jp/'); anchor.appendChild( aT
第7回 Ajax活用のためのDocument Object Model入門
前回，前々回と，Yahoo! ウェブ検索Webサービスを利用するサンプルを通じて，AjaxでXMLデータを利用する方法について紹介しました。XMLを利用することで，サイト検索結果のような複合的な情報（構造化データ）を，使用するプラットフォームを意識することなく，やり取りできます。前回，XMLデータをクライアントサイドで受け取れることを確認したところで，今回はより詳らかにXMLデータ読み込みの部分を見ていくことにしましょう。 XML操作の標準API「Document Object Model」 DOM（Document Object Model）とは，その名の通り，XML文書内に登場するタグや属性，テキストといった構成要素を汎用的に操作するためのオブジェクト群のことを言います。DOMを利用することで，与えられたXML文書から必要な情報を取り出したり，データを編集/追加/削除したり，といった操
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
