なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
Web Componentsを構成する4つの仕様 ー Web Components基礎編
我々Web開発者がWeb Componentsという言葉を耳にしてから、もう2年程経ったでしょうか。Web Componentsが変えるWeb開発の未来という記事に、「今のWeb開発がどのような課題を抱えているか、それをWeb Componentsがどう解決するか」を書きました。これを踏まえて、本連載ではWeb Componentsの仕様から実装、PolymerやX-TagといったWeb Componentsを支えるライブラリなどの周辺知識まで解説していきます。 Web Componentsを支える4つの仕様 連載第1回目となる本記事では、Web Componentsを支える4つの仕様について解説します。Web Componentsは以下の4つの独立した仕様から構成されます。 Custom Elements – 独自のカスタム要素をユーザーが定義することを可能にする Shadow DOM
DOM操作の最適化によるJavaScriptチューニング（後編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ 前回は、DOM操作が遅い原因と仕組みについて簡単に説明し、チューニングのサンプルをいくつか解説しました。その中で、innerHTMLを利用したコードをサンプルにあげていますが、innerHTMLを利用する場合、いくつかの
七章第四回 ノードをまとめて扱う：DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net
七章第四回 ノードをまとめて扱う：DocumentFragmentこのページの最終更新日：2018年7月29日 今回解説するのは、DocumentFragmentというものです。これは、題名の通り、複数のノードをまとめて扱うのに必要なものです。 実はこれはノードの一種です。つまり、「テキストノード」とか「要素ノード」とかと同じように、「DocumentFragment」という種類のノードがあるのです。 ノードの一種だから、appendChildなどで子ノードを追加したり、あるいはcloneNodeでDocumentFragment自身をコピーしたりもできます。 このDocumentFragmentはどういった意味を持つノードなのかということですが、典型的な説明としては「小型のdocumentのようなものである」とされます。 つまり、DocumentFragmentは、ひとつの独立した木構造
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
五章第三回 CSSの操作 — JavaScript初級者から中級者になろう — uhyohyo.net
五章第三回 CSSの操作このページの最終更新日：2017年8月24日 前回は、CSSがどのような構造をしているのか説明しました。今回は、その構造をいじることについて解説します。 CSSRuleの追加と削除まず、CSSRuleを子に持つCSSStyleSheetやCSSMediaRuleに、CSSRuleそのものを追加したり、あるいは削除したりする方法を解説します。 CSSStyleSheet（やCSSMediaRule）は、insertRuleとdeleteRuleという2つのメソッドを持っています。その名の通り、insertRuleは新しいCSSRuleを追加、deleteRuleは今あるCSSRuleを除去するメソッドです。 insertRuleまずinsertRuleの使い方から見ていきます。insertRuleは2つの引数を持ち、ひとつめの引数は追加するルール、ふたつめの引数は追加
五章第二回 CSSの構造 — JavaScript初級者から中級者になろう — uhyohyo.net
五章第二回 CSSの構造このページの最終更新日：2018年7月29日 ご存知の通り、CSSは独自の文法を持っおり、したがって独自の構造を持っています。今回から、その構造と操作について解説します。 CSSStyleSheetCSSを構成するさまざまな要素はDOMでは全てオブジェクトで表されます。まずは、そのうちCSSStyleSheetという種類のオブジェクトについて解説します。 CSSStyleSheetは、CSSそのもので最も大きなまとまりで、 <!doctype html> <html> <head> <title>test</title> <style type="text/css"> body { background-color: aqua; } div { background-color: white; } p { background-color: yellow; } </
Allan Jardine | Reflections | Visual Event
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I've created Visual Event to help track events which are subscribed to DOM nodes. Update: Visual Event 2 is now available and released as open source. Introduction When working with
Javascript cssRules - とみぞーノート
1. 概要 Javascriptからスタイルシート内のルールを変更する処理のまとめ。スタイルシートそのものを変更したい場合は「Javascript 動的なCSSの適用」を参照。 2. スタイルシート関連のオブジェクト Javascriptからスタイルシートのルールを操る際に関係するオブジェクトを図1にまとめる。FireFoxとIEで若干扱いが異なるので注意が必要。 2.1 stylesheet オブジェクト まずドキュメント内のスタイルシートを扱うstylesheetオブジェクトがある。stylesheetオブジェクトはドキュメントが読み込んでいるCSSファイルや<style>タグで指定したCSS毎に存在する。 ドキュメント内のstylesheetオブジェクトは全てdocument.styleSheetsに格納されており、document.styleSheets[0]のようにして参照できる
javascript(DOM?): なんで insertBefore はあるのに insertAfter はないの? : hiromemo
javascript(DOM?): なんで insertBefore はあるのに insertAfter はないの? program ・ 2005-09-06 17:18 同じこと考える人はいるもんだな DOMNode.insertAfter (17 January 2004) This function should have been defined in DOM Level 1, since I need it very often. Couldn't find a better place to put it, since it's not really javascript. This function insertes the DOMNode newChild after the refChild element. function DOMNode_insertAfter(ne
W3C - W3Cの仕様書等の文書の日本語訳集
注意 日本語翻訳集は w3c-translators@w3.org メーリングリスト上で報告された日本語翻訳文書へのリンクを集めたものです． リンクされた翻訳はボランティアによって行われたものです． またこれらの翻訳には誤りが含まれる可能性もあります． 正式なものはあくまでも英語版ですので， この点をご理解頂いた上でご利用下さい． またコピーライトに関する情報を含め，W3Cの文書の翻訳に関しての一般的な情報や， 翻訳の際のヘルプは， http://www.w3.org/Consortium/Translation/にあるW3C翻訳ページ(英語版) をご覧下さい． TR集 勧告 ・ 勧告案 ・ 勧告候補 ・ 草案 ・ 技術ノート その他の文書等 FAQ集 ・ その他 TR集 勧告 HTML 4 (勧告) http://www.asahi-net.or.jp/~bd9y-ktu/html4re
JavaScript Reference
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
prototype.jsの開発メモとGecko DOM ReferenceのHTMLヘルプ
未だにちょくちょくみてしまうprototype.jsの簡単なリファレンスであるDeveloper Notes for prototype.jsの日本語版とThe Document Object Model in Mozillaで配布されているGecko DOM ReferenceのZIP version (古い奴)をHTMLヘルプにしてみた。HTMLヘルプはちょっと作ってみちゃったりすると、HDD上にあるありとあらゆるHTMLのドキュメントをHTMLヘルプにしたい欲求に駆られてしまう・・・のは僕だけですか、そうですか。 prototype.jsの開発メモ Gecko DOM Reference prototype.jsの開発メモの方はHTMLに手を入れて、メソッドやプロパティにidを振り、キーワードでジャンプできるようにした。HTMLヘルプ向けにCSSもちょっと調整。チェックしきれてない説
DOM Level 2/3 標準技術をMSIEで使う(XML読み込みとXPath) @ ぽかぽかWeb研究室
XML 文書読み込みの準備 XML 文書を読み込んで DOM オブジェクトとして扱うためには、 MSIE では ActiveXObject, Mozilla では createDocument() メソッドを使い、 XML 文書を格納するための「箱」を用意する必要があります。 本来はMSIE/Mozilla いずれでも document.implementation.createDocument が使えるようにすれば良いのですが、 イベント定義の時と同様の方法は使えないため、ここでは、次善策として、 document.Implementation.createDocument() メソッドが使えるようにしたいと思います。 注意 MSXML 2.5 以前(WinIE 5.5SP2以前に同梱)では XPath がフルサポートされていないため、(関数を用いた)複雑なXPathを使おうとするとスク
DOM Level 2 標準技術をMSIEで使う(イベント、基本操作) @ ぽかぽかWeb研究室
はじめに HTML/XML文書を動的に制馭するするためにはDOMが用いられることが多いわけですが、ことに X(HT)ML を取り扱う上では、どうしても DOM Level 1 の範囲だけでは力不足です。また、イベント制馭は Level 1では定義されていません。 MSIE では、基本的には DOM Level 1 までのサポートに留まっています。それ以外の振舞は独自規格で賄われているのが現状で、このことが、「処理系に依存しない記述」を妨げる原因にもなっています。 Mozilla/Netscape では、 (XHTML文書も含めて)XMLとして認識された文書では、名前空間が重要な役割を果たします。例えば、 XHTML の要素を正しく作成するためには createElementNSが必要になりますが、これは MSIE では認識されません。 具体的な方法 ここでは、 JavaScript(ECM
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DOM 要素の実際に使用されているスタイルを取得 - Qiita
社å´å£«è©¦é¨å¡¾ 社å´å£«è©¦é¨å¦æ ¡ 社å´å£«è©¦é¨å¯¾ç 社å´å£«è©¦é¨åå¼·æ³ ç¤¾å´å£«è©¦é¨åèæ¸ at usrb.in
どら猫本舗のリファレンスカウンター
http://www.interq.or.jp/student/exeal/dss/index2.html