高速な CSS セレクタエンジン「Sizzle」「Peppy」を試す - WebOS Goodies
最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、本日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲
Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit
JavaScript読み込みブロック回避でページ表示を高速化する方法 | エンタープライズ | マイコミジャーナル
スクリプトが読み込まれるまで画像の読み込みがブロックされている - 同ブログより抜粋 WebページパフォーマンスツールであるYSlowの主要開発者でありYahoo! Exceptional Performanceの開発者であるStoyan Stefanov氏がNon-blocking JavaScript Downloadsというタイトルで、ページの読み込み速度を向上させるテクニックを簡潔にまとめている。これはブロックが発生するJavaScriptの読み込みを並列化することでページの読み込み時間を短縮しようというもの。Webページの読み込み高速化に効果的な手法なのでWebデベロッパは一度目を通しておきたい。 JavaScriptの読み込み中はほかの読み込み処理がブロックされる。これをDOM経由で動的にロードするように書き換えてやれば並列して読み込まれるようになる。Non-blocking
IFRAME の内容を動的生成する正しい方法 - WebOS Goodies
先日 Firebug Lite ブックマークレットを公開しましたが、動的生成した IFRAME に HTML を流し込むとブラウザが読み込み状態のままになってしまう（ロード中アニメーションなどが再生されっぱなしになる）という問題がありました。 IFRAME の動的生成はいろいろと応用範囲が広いので、なんとかこの問題は解決しておきたいところです。そこでいろいろと試行錯誤して、なんとか回避方法を見つけることができました。本日はそれをご紹介しようと思います。 さっそく種明かししてしまいましょう。実は答えはいとも簡単でした。 document.write で HTML を流し込む前後で document.open と document.close をきちんと呼ぶ必要があるようです。こんな感じですね。 var iframe = document.createElement('IFRAME'); do
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
DOMの基本。正しいHTMLとドキュメントツリーを理解しよう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。 ドキュメントツリーとは DOMスクリプティングでは、HTMLに関する正しい知識が求められます。まずは正しいHTMLとはなんなのかを理解していただきます。そして、DOMスクリプティングでは欠
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
javascript - 決定版 - DOM時代のdocument.write() : 404 Blog Not Found
2007年11月18日15:20 カテゴリLightweight Languages javascript - 決定版 - DOM時代のdocument.write() というわけでさらに添削。 404 Blog Not Found:javascript - 添削 - DOM時代のdocument.write() 追々記: それでも、一時的に戻すというのがやはり気に食わない。別の実装を考えよう.... 追記アリ 例によってFirefox, Safari, Operaで検証。IEの検証よろしく。 /*@cc_on @*/ /* if IE, do nothing (error 8004004, whatever that is) */ /*@if (@_jscript_version > 0) @else @*/ document.getCurrentScript = function(){
HTMLのドキュメントから繰り返し部分をみつける - bits and bytes
RSSを生成していないページからRSSを生成するなんでもRSS 0.1bは、公開されているJSAI2005: なんでもRSS - HTML文書からのRSS自動生成によると、日付情報を目印にしてそのHTMLドキュメントの構造を推測して、各エントリ(item要素)のタイトルと本文を単語の統計的に処理して決定し、フィードを生成していると書かれています。 ウェブ上にあるHTMLドキュメントは Ask.jp ： "xml" Search results. のように、RSSのitem要素に相当する部分に日付が含まれていないものもあります。 その中でも、大量のデータを複数のページにわけて表示しているHTMLドキュメントを対象に、ドキュメント中に含まれる繰り返し部分のXPathを生成するブログラムをjavascriptで作りました。 アプローチ 大量のデータを複数のページわけて表示しているドキュメントを
(new Hatena).blog() - DOM 要素の集合のイテレーション
Update: id:reinyannyan:20060411:p1 に続きます getElementsByTagName の様なメソッドで得られた、配列ではない要素集合を配列のように扱いたい時に、prototype.js では "$A" という関数によってまず配列化する、という方法を用います。 これは非常に素晴らしい、便利な方法なんですが、集合の規模が大きくなると、それだけ配列化によるオーバーヘッドも大きなものになってしまいます。 そこで、仮にこのようなものを作ってみました。 // DOM Iterator var Domi = { each: function (collection, yield) { for (var i = 0; i < collection.length; i++) yield(collection[i]); } };べつに配列が欲しいわけじゃない、単純に ea
第6回 イベントハンドラから脱却しよう
今回はイベントについて学んでいきましょう。JavaScriptによるアプリケーションを作成するうえでは，イベントは欠かすことができない要素です。 ここでは，旧来より使われてきたイベントハンドラのおさらいと，イベントハンドラの問題点を考察します。そして，イベントハンドラに置き換わるW3C DOMイベントモデルの基礎を学んでいきます。 イベントとは イベントとは，ブラウザ上で発生した出来事全般のことを表します。例えば，ブラウザに表示された画面上でマウスをクリックしたり，テキストボックスに文字を入力するといったように，閲覧者が何か操作したときにイベントが発生します。また，HTMLがブラウザに読み込まれたり，別のページに移動したという現象もイベントとして認識されます。 まずはじめに，旧来より使われてきたイベントハンドラについておさらいしましょう。 イベントハンドラ イベントをJavaScriptで
[JavaScript]MarkUpBuilder - DOMの生成
JavascriptでのDOM生成について、調べていたところ、マークアップビルダ、存在しないメソッドの記事を見つけて、SpiderMonkey以外のJavascript実装のブラウザでも汎用的に使えるように、実装してみました。 Prototype.jsに依存しています。 var MarkupBuilder = Class.create(); MarkupBuilder.DOM = ["ul", "ol", "li", "td", "tr", "thead", "tbody", "tfoot", "table", "th", "tbody", "input", "span", "p", "a", "div", "img", "textarea", "label", "script", "iframe"] MarkupBuilder.cache = null; MarkupBuilder.UA
CSSデバッギングツール１０選:phpspot開発日誌
Man with no blog : CSS Debugging Tools - Gary Barber Seems lately that we are now starting to get a good spread of CSS and JavaScript (DOM Scripting) debugging tools available. CSSデバッギングツール１０選。 便利な各種ブラウザ用CSSデバッギングツールがまとまっていました。 XRay - ブックマークレット登録後、ページ内をクリックで情報を表示 YSlow - 先日Yahoo!がリリースしたパフォーマンス測定＆アドバイスツール (for Firefox) Dust-Me Selectors - 不要なCSSを調査して表示してくれるFirefox拡張 Web Developer - おなじみ、CSS用に便利機能を提
JavaScript-DOMのチートシート:phpspot開発日誌
DOM JavaScript Cheat Sheet - Wait till I come! I’ve just put together a small DOM cheatsheet for some developers here and thought why not share it and CC it in case it can be handy for you, too JavaScript-DOMのチートシートがPDFで公開されています。 DOMを使う際に便利かもしれません。 なお、javascriptistでも、「DOM-HTMLのリファレンス」を公開しています。 関連エントリ フリーフォントのチートシート SQLインジェクションに関するチートシート Prototype.js 1.5.0 のチートシート １ページに情報が集約されたCSSチートシート「CSS Cheat S
XPathを使った要素の取得[XML DOM関数] - bnote
ここでは、XMLからXPathを使って要素を取得する方法を見てみます。 サンプルとしてlivedoorのお天気情報サービス(Livedoor Weather Web Service / LWWS)を 使用しています。 http://weather.livedoor.com/forecast/webservice/rest/v1?city=84&day=today XPathとは、XML文書の中の特定の要素を指し示す記述方法で、基本的な記述はUNIXのファイル システムに似ています(ロケーションパス)。文書木構造の頂点となるルートノードを「/」で あらわし、以下、「/」で区切って要素をたどっていきます。 このロケーションパスは、XPathの主要な部分ですがもっと奥が深いです。 パスを指定して要素を取得 XPathで要素を指定して要素オブジェクトを取得するには、xpath_new_contex
The Ultimate getElementsByClassName - Robert's talk
New version released, with major updates Tuesday, May 27th, 2008. NOTE: The code below is outdated. A completely rewritten version of getElementsByClassName has been released, taking into account all new available web browser features and possibilities, to offer you the best performing and most flexible implementation. Read about the new version or go and download it straight away. Updated on Tues
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
乐山厩荒商贸有限公司
JavaScriptでDOMレンジを扱う：CodeZine
aruko.net - このウェブサイトは販売用です！ - aruko リソースおよび情報
youmos.com