[B! DOM] Cherenkovのブックマーク

Cherenkov id:Cherenkov

DOMに関するCherenkovのブックマーク (83)

Explore DOM Events
There are many categories of events including user events such as 'click' and system events such as 'DOMContentLoaded'.
Cherenkov 2021/05/19
線が伸びて吹いた。頭の中でやれ。currentTargetとtargetの違いを覚えとけ

dom

javascript

webservice

tool
リンク
beforeunload イベントの挙動を調べる
think49 @think49 @think49 beforeunload は unload より前に発火するから "before" と認識していたけど、ソースが見つからない。どこにあるんだろう…？ 2010-12-22 18:35:35
Cherenkov 2012/10/12
beforeunload

dom

event

html5

javascript
リンク
全画面 API - Web API | MDN
This feature is not Baseline because itdoes not work in some of the most widely-used browsers. Learn moreSee full compatibilityReport feedback 全画面 API は、特定の要素 (Element) ︵およびその子孫︶を全画面モードで表示したり、必要なくなったときに全画面モードを抜けたりする方法を追加します。これによって、要求されたコンテンツ — オンラインゲームなど — がユーザーの画面全体で表示され、全画面モードが終了するまで、ブラウザーのユーザーインターフェイス要素や他のアプリケーションをすべて画面から排除することができます。 API の使い方についての詳細は、全画面 API ガイドをご覧ください。メモ: この API の対応はブラウザーによ
Cherenkov 2012/10/10
全画面表示のAPI FullScreen API

html5

JavaScript

dom

api
リンク
どんな要素でも全画面表示に出来るFullscreen APIをブログの記事に使ってみる　※動作サンプル有
どんな要素でも全画面表示に出来る FullscreenAPIというものがありまして、主に動画で使われている事が多いですが、今回はブログコンテンツのリーダビリティに貢献させる目的で使って見ます。動画コンテンツに主に使われている印象のAPIなので目にする機会が多くはありませんが、動画だけでなく、どんな要素にも使えますので、ブログやドキュメントなどのテキストコンテンツに使ってみたらリーダビリティの高い状態にユーザー側でスイッチできるので素敵かな、と思った次第です。さっさとサンプル見せろ、という方は下にスクロールしてください。 W3Cでの仕様はまだEditors’ Draft状態ですけど、最近ちょくちょく使っているところを見かけるようになりました。 HTML5と同時に動きが若干活発化してる印象でしたので、少し触ってみました。このAPIの詳細はWWW WATCHさんで詳しく書かれていま
Cherenkov 2012/10/10
全画面表示のAPI FullScreen API

html5

JavaScript

dom

api
リンク
なんでもフルスクリーンにする FullScreen API - techlog
HTML5 Advent Calendarの2日目です。本当は3日目の担当だったけど、代打(?)で2日目も書いている。もちろん3日目の記事も書く。﹁HTML5 Advent Calendar﹂はこんな感じの取り組み。まだ空きがあるので、よかったらどうぞ。今年は、HTML5もAdvent Calendarやります！本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは﹁HTML5﹂になります。HTML5に関することならなんでもOKです！このイベントに参加した順番が、そのままブログを公開する日付とします。是非、みなさん一緒にわいわい
Cherenkov 2012/10/10
全画面表示のAPI FullScreen API

html5

JavaScript

dom

api
リンク
MutationObserver - Web APIs | MDN
// Select the node that will be observed for mutations const targetNode = document.getElementById("some-id"); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type
Cherenkov 2012/10/07
DOM Mutations Eventsの代替

dom

event

javascript
リンク
DOM mutation events replacement
Cherenkov 2012/10/07
DOM Mutations Eventsの代替

dom

event

javascript
リンク
DOM MutationObserver – reacting to DOM changes without killing browser performance. – Mozilla Hacks - the Web developer blog
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 em ail 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
Cherenkov 2012/10/07
DOM Mutations Eventsの代替

dom

event

javascript
リンク
getUserMedia が実装されました！
原文: getUserMedia is ready to roll! (on July 13, 2012 by Anant Narayanan) 今年の4月に、私たちは WebRTC 活動についての記事 (和訳) を投稿しましたが、今日はエキサイティングな最新情報をお届けします。getUserMedia が mozilla-central にコミットされました！この API は、Firefox の最新の Nightly バージョンで使えるようになったので、最終的にリリースビルドでも使えるようになります。 getUserMedia は、Web ページが動画や音声の入力を取得できるようにする DOM API です。つまり、Web カメラやマイクからの入力したデータを Web ページが扱えるようになります。私たちは、これが Web ページとアプリケーションの全く新たな可能性の扉を開くこと
Cherenkov 2012/08/26
「getUserMedia は、Web ページが動画や音声の入力を取得できるようにする DOM API です。つまり、Web カメラやマイクからの入力したデータを Web ページが扱えるようになります」

firefox

DOM

webrtc
リンク
innerHTMLで挿入するhtmlにもjqueryを実行させたい。…
innerHTMLで挿入するhtmlにもjqueryを実行させたい。あらかじめJavaScriptのソースに、 $(function() { $('#divHoge').hoge(); }); を記述しておき、JavaScriptのinnerHTMLで <div id="divHoge"></div> を挿入した時にhoge()を実行させたいのですが、innerHTMLで普通に挿入すると実行されないようです。実行する方法はあるでしょうか？
Cherenkov 2012/04/21
innerHTMLで動的に追加される要素自体にも、追加時にDOMNodeInsertedが発火する

dom

event

javascript

jQuery

live

on

tutorial

cherenkov
リンク
ページの表示・非表示状態を取得するPage Visibility API - へっぽこプログラマーの日記
HTML5 Advent Calendarの1日目です。本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。ここでは、﹁HTML5﹂がテーマになります。他にも面白い記事が公開される予定ですので興味のある方は是非チェックしてみてください。 http://atnd.org/events/21987 私は、とりあえず1日目なので軽く、堅くPage VisibilityAPIというマイナーな仕様について解説したいと思います！ Page VisibilityAPIとは Page VisibilityAPIは、ページの表示状態を取得するAPIです。document.h
Cherenkov 2012/03/28
Page Visibility API

html5

javascript

event

dom

api
リンク
Fullscreen API を簡単に試してみた
Web ページ内の任意の要素をフルスクリーン表示可能にする FullscreenAPI ですが、お勉強ついでに簡単に試してみました。ちょっと前、先月の話題になってしまうのですが、Web ページ内の任意の要素をフルスクリーン表示可能にする FullscreenAPI に関連して、Mozilla が公開している Gecko:FullScreenAPI が更新されて Firefox Nightly で使えるようになったり、W3C からも Fullscreen︵Editor's Draft︶が公開されたりと色々動きが活発になってきましたので、いい機会ということで、お勉強ついでに簡単に試してみました。例えば HTML5で追加された video 要素は、今まで Flash などのアドオンに頼ってきた動画の Web ページへの埋め込み、再生を HTML 側で対応することを可能にしましたが、
Cherenkov 2011/12/12
HTML5

API

javascript

dom

browser
リンク
Nightly の XMLHttpRequest で text/html がパース可能に！ - hogehoge @teramako
Bug 651072 - Support HTML parsing in XMLHttpRequest per XMLHttpRequest Level 2 Nightlyに入ったー function getDocument (aURL, aCallback) { var xhr = new XMLHttpRequest; xhr.open("GET", aURL, true); xhr.responseType = "document"; xhr.onreadystatechange = function() { if (xhr.readyState === xhr.DONE /* 4 */ && xhr.status === 200) { aCallback(xhr.response); } }; xhr.send(null); } getDocument("http://www.ex
Cherenkov 2011/12/12
xhr.responseType = "document";が加わってresponseTextをゴニョゴニョしてDOMを組み立てなくてもよくなった

javascript

xhr

Firefox

dom
リンク
Locking the Throneroom 2.0
The Image that called me - Active Content Injection with SVG FilesMario Heiderich
Cherenkov 2011/12/06
xss

DOM

javascript

HTML
リンク
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
Cherenkov 2011/11/25
DOM

reference

JavaScript

まとめ
リンク
今、知っておきたいJavaScript
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。その大きな理由の一つが、DOM︵Document Object Model︶に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI︵Application ProgrammingInterface︶です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
Cherenkov 2011/04/12
javascript

DOM

HTML

tutorial
リンク
Google Code Archive - Long-term storage for Google Code Project Hosting.
Code Archive Skip to content Google About Google Privacy Terms
Cherenkov 2011/02/09
window.getSelection createContextualFragment document.createRange

W3C

DOM

IE

javascript

library
リンク
HTML5の新要素をinnerHTMLで生成できないバグを回避する - latest log
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
Cherenkov 2011/02/07
タグがぶっこわれる

IE

HTML5

DOM

javascript

security
リンク
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',
Cherenkov 2011/01/22
イベントドリブン

addEventListener

javascript

AutoPagerize

dom

tips
リンク
Node.compareDocumentPositionが素晴らしい - hogehoge @teramako
と呟いていたら、 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
Cherenkov 2011/01/08
ある要素が別の要素に含まれるかどうかを調べる子孫判定

dom

javascript

tips
リンク
1 2 3 4 5 次のページ