Webのフロントエンドで仕事をしているみなさんに質問があります。あなたにとってWebのプログラミングは、HTMLというマークアップを読み書きすることですか。それともDOM（Document Object Model）というツリー構造の操作でしょうか。今回は、この2つの関係を考えてみたいと思います。 マークアップ主義とテンプレートエンジン HTMLを書くのは簡単です。テキストにいくつかタグを付け足せば最低限のHTMLはすぐにできあがります。プログラミングの必要なDOM操作と比べると、このわかりやすさはHTMLの大きな利点です。 Web開発がマークアップの読み書きだと答えた人の多くは、おそらくRuby 用のERBやJava のJSP（JavaServer Pages）、Python向けのJinjaなど、サーバサイドで動くテンプレートエンジンを使っていることでしょう。テンプレートエンジンはH
Is Shadow DOM something like the dark side of the DOM Tree? Actually it is! What’s inside? The above illustration perfectly shows what is Shadow DOM actually is. HTML5 video element is <video> tag and it is the only one you have. Really? Then, what about video player with all these user interface elements. What sorcery is this?! That is the dark side, these UI elements are basic HTML elements whic
Chrome の about:flags に “Shadow DOM を有効にする” という項目が出来ている。たぶん、バージョン 19 くらいから。 Shadow DOM というのは W3C WebApps Working Group の方で提案されている Web Components と呼ばれる、 HTML をうまく部品化する仕組みを構成する要素の一つで（言葉使いとかあってるか微妙。）ブラウザを通じて Web サイトのレンダリングを行った際に現れる見かけ上の文書ツリー。 あくまで見かけ上であり、実際には Shadow DOM はそれを保持している文書ツリーとは別の空間に存在していて、Shadow DOM には Shadow DOM のルート要素的なものがある。そのため文書ツリー側で定義したスタイルは適用されないし、Shadow DOM 内で定義したスタイルも文書ツリーには影響しないなどの
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. smaug The right link to the spec is http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers Also, the API will be un-prefix very soon. We want to
The following is a guest post by Henri Sivonen: In Firefox 8, we’ve added support for insertAdjacentHTML(). It’s an ancient feature of Internet Explorer that has recently been formalized in HTML5 and then spun out into the DOM Parsing specification. The bad news is that Firefox is the last major browser to implement this feature. The good news is that since other major browsers implement it alread
XSS with $(location.hash) demo Click this link. It works on IE, Firefox, Chrome, Opera. In Safari, location.hash is percent encoded, not work. why? $("#id") is css selector, $("<img>") is createElement, and $("#<img>") is createElement too. how to fix in your library var hash = "#" + location.hash.replace(/[^\w]/g, ""); if ($(hash).size()) { ... } or patch to jQuery - quickExpr = /^(?:[^<]*(<[\w\W
Yesterday, fellow Yahoo and SoundManager creator Scott Schiller expressed some confusion on Twitter over why getElementsByTagName("a") is faster than querySelectorAll("a") in nearly all browsers. There a JSPerf test comparing the two and you can that the speed comparison is fairly pronounced. In the browser I’m using right now, Firefox 3.6.8 on Windows XP, querySelectorAll("a") is a shocking 98% s
マウスイベントは、DOM level 3で定義されている。問題は、規格の定義が曖昧で、ブラウザの実装が救いがたいぐらい異なっているということだ。ここでは、マウスの位置を取得する方法を、完璧に解説しようと思う。とくに、canvasを使うにあたっては、マウスカーソルの位置を取得することは重要だ。 座標とは何か ここで私の言う座標とは、ある点を(0,0)と置いた場合の、その点からの位置(x,y)のことである。ただし、右下が正になる。これはコンピューターの世界では、一般的な座標系である。では、その基準となるべき「ある点」とはどこか。これが問題である。 次のようなコードを考える。 var mouse_event_listener = { handleEvent : function(event) { //ここにコードが記述される } } ; これは、DOM level 3 Eventに準拠するイベン
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
前回からの続きで。 DOMエミュレーションの戦略 一方で、本物のブラウザを使わずに何らかのJavaScript実行環境でDOMをエミュレートして、その上でテストを走らせよう、という戦略もある。 この分野の大御所はEnv.js(http://www.envjs.com/)ということになっているのだけど、Env.jsのイヤンなところは導入がめんどくさい所である。何がめんどくさいって、antでビルドしなくちゃいけない。テストのためにどの程度の環境構築コストをかけられるかは状況において違うだろうが、例えばJSをメインでやっているエンジニアが「ちょっとテスト環境整えたい」っていう時にantから入れて頑張るだろうか？Javaの経験や、こういうビルドツールの導入/利用の流れに慣れている人だと全然問題ないレベルなんだけど。 というわけで、Env.jsは結構力を入れて開発されたものではあるのだろうけど、僕に
don’t code today what you can’t debug tomorrow: PhantomJS: minimalistic headless WebKit-based JavaScript-driven tool http://ariya.blogspot.com/2011/01/phantomjs-minimalistic-headless-webkit.html PhantomJSはJavaScriptファイルを実行できるWebkitベースのコマンドラインツールです。 PhantomJSの面白い所はDOMやCanvasなど他のコマンドラインツールで触れにくい部分もネイティブにアクセスできるため、リッチアプリケーションなどのテストツールとして活用できそうです。 phantomjs somescript.js [argument [argument ...]] という感
An issue popped up on Twitter this past week that caused the web site to be generally unusable for many users. It appears as if attempts to scroll were unbearably slow and caused the site to be unresponsive. The Twitter team investigated and determined that if they reverted the version of jQuery that they used back to 1.4.2 from 1.4.4 the site would be responsive again. After more investigation th
Reflows & Repaints: CSS Performance making your JavaScript slow? I’ve been tweeting and posting to delicious about reflows and repaints, but hadn’t mentioned either in a talk or blog post yet. I first started thinking about reflows and repaints after a firey exchange with Mr. Glazman at ParisWeb. I may be stubborn, but I did actually listen to his arguments. 🙂 Stoyan and I began discussing wa
と呟いていたら、 id:caisui さんが と教えてくれた。 広範囲にイベントを取得して、イベント発生元がどの要素に含まれるかで処理を変えたい時があって、そんな時は親ノードを辿って調べるという面倒なことをしていた。これとはおさらばしたいということで、compareDocumentPositionについて調べてみた。 Node.compareDocumentPosition - MDC Doc Center The return value is a bitmask with the following values: DOCUMENT_POSITION_DISCONNECTED = 0x01; DOCUMENT_POSITION_PRECEDING = 0x02; DOCUMENT_POSITION_FOLLOWING = 0x04; DOCUMENT_POSITION_CONTAINS
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
nodejitsu.com 2010.9.24のエントリ jsdom + jQuery in 5 lines with node.js node.jsでスクレイピング jsdom使うと取得したhtmlへDOMが使えるようになる 慣れ親しんだjqueryのセレクターapi使ってスクレイピング request/http-agentモジュール使って標準モジュール（=http）だけで書くよりもコードすっきり という内容のエントリ サンプルコード修正しないと動かない 以下斜め読んだ内容 スクレイピング たいていの言語がライブラリ色々用意されてる Ruby hpricot nokogiri Python beautiful-soup scrapy Perl pQuery PHP PHP DOM バグなくhtml/css/javascriptをハンドリングするのが難しい サーバーサイドjsにおけるスクレ
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
The other day at LA RubyConf during the Johnson presentation, I showed a few slides which I don’t think were given the time that they deserve. Not that we didn’t have enough time, I just don’t think I made as big a deal about them as I should have. Those particular slides demonstrated HTML Document Object manipulation executed in JavaScript outside any web browser. Those particular slides, and tha
Ruby Weekly is a weekly newsletter covering the latest Ruby and Rails news. Harmony, from Martin Aumont, is a new Ruby DSL for executing JavaScript and DOM-using code from within Ruby apps. Why's that cool? Well, it enables you to build your own Ruby-level unit tests for JavaScript code within your Web applications - everything can be under one set of test suites! Harmony sounds like a significant
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く