Explore DOM EventsThere are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
クライアントサイドJavaScriptでのビューの作り方4つ - id:anatooのブログ
追記: 指摘により、UIオブジェクト型を追加した(thx @kanreisa)。 クライアントサイドJavaScriptでのビューの作り方を大別すると、3つ4つある。 DOM操作型 テンプレートエンジン型 UIオブジェクト型 データバインディング型 ここでいうビューの作り方とは、有り体にいうとJavaScriptからどうやってDOM要素を生成したりするかどうか。イベントリスナーの登録とかも含む。 DOM操作型 昔ながらのやり方。jQueryとか使って直接DOM操作してビューを作る。 // 例えば、<div class='hoge'>fugafuga</div> みたいなDOMを表示する var myView = $("<div class='hoge'/>"); myView.text('fugafuga'); // body以下に挿入 $(body).append(myView); 長所
IPAから『DOM Based XSS』に関するレポート出ました
DOM Based XSSに関しては、IPA「安全なウェブサイトの作り方」でも、拙著でもごく簡単にしか触れておらず、まとまった解説が要望されていましたが、本日（2013年1月29日）にIPAから「IPA テクニカルウォッチ『DOM Based XSS』に関するレポート」が公開されました。 同冊子の目次は下記の通りです。 はじめに 1. DOM Based XSSの概要 2. IPAに報告されたDOM Based XSSの脆弱性 3. DOM Based XSSの事例 4. DOM Based XSSの対策方法 コラム おわりに IPAのレポートと言うことで、DOM based XSSの届出の状況も説明されています。以下にグラフを引用します。 一見して「急増」していることと、昨年の10月から12月の3ヶ月で92件も届出があったということで、対策が急務となっている状況が見て取れます。これは、こ
contenteditable + DOMCharacterDataModifiedでIME入力(変換)中のイベントも拾う | MemeTodo
2011年7月2日土曜日 contenteditable + DOMCharacterDataModifiedでIME入力(変換)中のイベントも拾う IME入力(変換)中のイベントも拾う - jsdo.it - share JavaScript, HTML5 and CSS タイトル通りでそれ以上でもそれ以下でもないです。 FirefoxとChromeで動作確認できた。 IEは9からDOMCharacterDataModifiedをサポートしてるらしいです。 Operaはよく分からない DOMCharacterDataModified event JavaScript DOMCharacterDataModifiedはMutation Events の一つらしいですが、これ系はいつも情報が少ない… 使い道があるのかも微妙 一応元ネタ Experimentation Harness 関係しそ
JavaScript連載第6回 - os0x.blog
これでできる！ クロスブラウザJavaScript入門の第6回はJavaScriptとHTMLとDOMの基本#1です。 今回は正直に言ってかなり苦戦しました。。DOM周りは書くことがありすぎてなかなかまとめきれないし、その前にHTMLについて書いておきたいこともあってと。 script要素といえば、昔はlanguage属性というのがあって…とかは今更書くことでもないかなとか。でも、language属性書いているHTMLって結構見かけるんですよね…。まあ、あっても何か問題が起こるわけではないし、language属性とかが書いてあったらそこからいわゆる「不吉な匂い」を嗅ぎ取ることができるので、ある意味では有用です。 「不吉な匂い」を醸しだすパーツを独断と偏見で挙げてみると、 language属性 (不必要な)eval document.all(最近ではクローキングされているとはいえ、条件分岐に
John Resig - getElementsByClassName Speed Comparison
Mark Finkle suggested that I do some speed testing, now that a native implementation of getElementsByClassName has landed in the Mozilla trunk (destined for Firefox 3). So I went around and dug up all of the different, existing, implementations that I could find. Currently, implementations fall into one of three categories (with some straddling more than one): Pure DOM This usually involves a call
ppBlog official
こんにちは、martinです。日本に帰国して1年が経ちました。昨年は２月から新しい職場で働き始めたり、9月６日に第１子が生まれたりとバタバタな一年でして、まるでppBlogの開発・サポートが出来ませんでしたが、今年はなるべく時間を作ってppBlogをいじれたらと思っています。 世界中の皆さんにとって、良い年でありますように。 久しぶりのカキコ。 静的リンクでの挙動を変えています。URLのパスに日付情報などを含ませるように。まだ、いじっている段階なので、色々と不具合があるだろうけれど、まぁ気にしないと。 日付情報がある以外には、現状、PermaLink用の英数文字からなる記事タイトルを別に指定できたのですが、これはそのまま取っておくとして、そうでない場合は、記事のタイトルがそのままブラウザのアドレスバーに表示されるような感じにしてます（静的リンクが有効な場合ですが）。今時のブラウザならエンコ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
document.matchesSelector 相当の機能を実装してみた - latest log
より効率的なコードに差し替えました http://dev.w3.org/2006/webapi/selectors-api2/#matchesselector と id:javascripter さんの記事 Selectors APIのmatchesSelectorと、動的なページでのイベント処理 via http://d.hatena.ne.jp/javascripter/20091018/1255889085 を参考に uu.match(expr, ctx, rtype = 0) な関数を書いてみました。 // uu.match - document.matchesSelector like function function uumatch(expr, // @param String: "css > expr" ctx, // @param NodeArray/Node: matc
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
IE 6.0 - Javascript - Benchmark - W3C DOM vs. innerHTML
Section 8F of the book discusses innerHTML and when it's preferable to "real" W3C DOM methods. This is a test page intended to find out which method of generating large amounts of content is fastest in the browsers. Of course the results differ significantly from browser to browser. Each of the test scripts creates a 50x50 table, all of whose cells are filled with one character, *. Then the time y
IE6 はノードに追加したオレオレプロパティが消せない(delete document.body.hoge が出来ない) - latest log
オレオレ要素が消せない → オレオレプロパティが消せない 余談だけどそれは「属性（アトリビュート）」またはJS的に「プロパティ」と呼ぶものだと思う。「要素」だとHTML要素のことだと思ってしまう。 by Yuichirou たしかに。 Yuichirou さん ありがとう! 本文 document.body.hoge = {}; delete document.body.hoge; // IE6 でエラーになる, IE8 は大丈夫delete ではなく、こうします。 document.body.hoge = {}; document.body.hoge = void 0;document.body に限らず、Node だとダメなようです。IE7でどうなるかは試してません。 IE以外のブラウザは、どちらの方法でもオレオレプロパティを削除できます。 追記 『試したのはIE6だけですが、remo
HTML5入門：アニメーションの実装方法３種
HTML5・CSS3のような新しい技術の問題点は、HTML4やらFlashなどの枯れた技術と違ってノウハウ・ライブラリ・ツールとかがまだ十分にそろっていない事。普及のタイミングもまだはっきりとしていないこの段階で手を出せない・出しにくいと感じている人が多いのも良く理解できる。 私から見れば、逆に「こんな楽しい状況は滅多にない」わけで、商売になるかならないかは二の次にしていろいろと試したくなる。 今日作ったのは、HTML5+CSS3上で可能になる（ただし現在ではWebkit独自の拡張を含む）３つのアニメーション・テクニックの比較（左に貼付けたものがそれ、Safari/Chromiumだとすべて動く。Firefox/OperaだとDOMとCanvasのみ（ただし別ウィンドウで開かないとCanvasが動かないークロス・ドメインセキュリティのバグか？））。 詳しくはソース（参照）を見ていただければ
Event Driven JavaScript - os0x.blog
document.createEventとdispatchEvent、addEventListenerを使ってイベントドリブンに書いたJavaScriptがオレブーム(ただし、IE非対応*1 )なので、軽く紹介してみたいと思います。 具体的には、AutoPatchWork (Google Chrome Dev用のextension)をイベントドリブンで実装しています。 AutoPatchWork.jsが2009/06/11 21:00時点のソース(id:nanto_viのコメントをうけて#を.に変更済み)。シンプルさを重視しているので、324行と短めです(CSSは別ファイルですが)。 window.addEventListener('scroll', check_scroll, false); window.addEventListener('AutoPatchWork.request',
onloadの代わりにDOMContentLoadedを使ってみる - へぼいいいわけ
onloadイベントだとDOMの構築が完了しても画像を読み込み終わるまで待ってしまうので、代わりにDOMContentLoadedイベントを使って処理させてみます。IEにはDOMContentLoadedがないのでdocument.documentElement.doScroll("left")を監視してDOM構築が終わるまで再帰しています。 参考 window.onloadの代替スクリプトその２ jQuery 1.2.6 2330行目くらい そーす ※一部修正しました。 // DOM構築完了時の処理 function load(){ /* なんかいろいろ */ }; // ユーザーエージェント var userAgent = navigator.userAgent.toLowerCase(); // ページの構築が完了したらloadを呼び出す (function(){ if(docume
ドキュメントオブジェクトモデルの使い方
これは以下のように見える DOM ツリーを持っています。 なお、上位のツリーは上記の文書の DOM ツリーと似ていますが、同じではありません。実際の DOM ツリーはホワイトスペースを温存するからです。 ウェブブラウザーが HTML 文書を解釈するとき、ブラウザーは DOM ツリーを構築し、文書を表示するために使用します。 文書 API で何ができるのか 文書 API、 DOM API とも呼ばれますが、これによって何でも好きなように DOM ツリーを変更できます。これは、任意の HTML や XML 文書をゼロから作成したり、与えられた HTML や XML 文書の内容を変更したりすることができることを意味します。ウェブページの作者は、文書の DOM を JavaScript を使ってグローバルオブジェクトの document プロパティにアクセスすることで編集することができます。この
childNodesの罠 - ホットリンク研究開発室のblog
yukiinu2ndです。また間が空いてしまいました……。 #文章にまとめるのは難しいです。 今回は、JavaScriptについて勉強をしている方から相談を受けた(というより自ら首を突っ込んだ)際にはまってしまったことについて紹介します。 その方、何でもJavaScriptからchildNodesなどを使ってDOM操作をすることで動的に要素を操作する、というサンプルを動かしていたのですがうまく動かないと困っていました。 childNodesはノードオブジェクトのプロパティであり、 var kodomotachi = document.getElementById("oya").childNodes; alert(kodomotachi[0].innerHTML);とするとkodomotachiにid属性が「oya」である要素の子ノードの配列が返ります。 上記のようにその要素の持つ子ノードの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
