Custom Elements v1で独自のHTML要素を定義する
HTMLを書く上で一番よく見かける要素は何でしょうか。それはおそらくdiv要素でしょう。大量に散らばったdiv要素は、もはやHTMLではありふれた光景となっています。しかし見た目が美しくありませんし、マークアップ的にも推奨できる行為ではありません。 そこで現れたのがCustom Elementsです。Custom Elementを使用すれば、独自の要素を定義することができ、マークアップがわかりやすくなります。この記事では、Custom Elementsについて簡単に解説します。 Web ComponentsとCustom Elements Web Componentsは以下の4つからなる規格です。 Templates Shadow DOM Custom Elements HTML Imports 今回はこのうちCustom Elementsに焦点を当てていきます。 独自要素を定義するCus
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
window.onloadとjQueryの$(document).ready等の比較
Comparison of window.onload and jQuery's $(document).ready B! 39 0 0 0 JavaScriptでページを読み込み後に何かを行いたいときは window.onload = function()を使ったり、jQueryを使っていれば $(document).ready(function())を使ったりしますが、 これらはちょっと違うものです。 特にjQuery無しで$(document).ready(function)的な事をするのが ちょっと面倒ですがその辺について。 window.onload $(document).ready jQuery無しで$(document).readyな呼び出しをする onload時に行う物を複数登録する 実行される順序 window.onload window.onloadメソッドはonlo
MutationObserver - †MASAYOSHI†のオンラインメモ帳
DOMNodeInsertedは非推奨なのでMutationObserverを使うのが正しいあり方ではあるがどうもいまいち分かりにくい。と言う訳でちょっとネタがてらまとめておこうというエントリ。情報元は例によってMozillaさん。 まずはsampleを見てみよう。 // 対象ノードを選択 var target = document.querySelector('#some-id'); // オブザーバインスタンスを作成 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); // オブザーバの設定 var config = { attributes: true, childList
JavaScript 大量の要素をDOMに追加する際の、createDocumentFragmentの使い方。 - Qiita
;(function(){ var $ul = document.querySelector('#list'); // ul要素 var songs = ['終わらない歌', 'キスしてほしい', '僕の右手', '情熱の薔薇', '人にやさしく']; // もっと沢山要素がある想定でお願いします〜 // 低速バージョン // 毎回DOMツリーへの更新が発生 for(var cnt=0, len=songs.length; cnt<len; cnt++){ var $li = document.createElement('li'); var song = document.createTextNode(songs[cnt]); $li.appendChild(song); $ul.appendChild($li); // 配列の要素数分、毎回追加 } /* 高速化！ fragment 訳
JavaScript で DOM 要素の絶対座標を取得する方法 - tmlife
備忘録. スペニット的に使ってもらえれば幸いです. DOM 要素の絶値座標を取得する element.scrollTop とかだと親からの相対値になっちゃいます. getBoundingClientRect() を使えば絶対座標を取得できます. window.onload = function() { var element = document.getElementById('hoge'); // hoge というIDがついたやつを取得する var rect = element.getBoundingClientRect(); console.log(rect.left); // x座標(絶対座標) console.log(rect.top); // y座標(絶対座標) console.log(rect.width); // 幅 console.log(rect.height);
リアルな DOM はなぜ遅いのか - steps to phantasien
これは VirtualDOM Advent Calendar 2014 に勝手に参加する記事です。 あたたかい春の昼下がりのこと、あるブラウザベンダの社内を不穏な噂が駆け巡った。 「React.js なるライブラリ、どうも仮想 DOM というやつのせいで速いらしいぞ」 もうリアルな DOM はお役御免、ブラウザも商売上がったりか・・・。雇用に不安を覚える人(私)がいる一方、 そのアイデアをとりこんでブラウザの DOM を速く出来ないかと考える人たちもいた。 仮想 DOM はなぜ速いのか。誰かのつてを辿って React.js チームにおいでいただき、速さの秘密をテックトークしてもらう。 イミュータブルなデータ構造による単純化、非同期適用による処理のバッチ化、差分アルゴリズムによる副作用の最小化… いくつかのアイデアはブラウザからはどうにもならないが、たとえば非同期化なんかは形は違えどブラウザ
JavaScript loadイベントの実行順序 | TECHSCORE BLOG | TECHSCORE BLOG
こんにちは。寺岡です。 この記事は TECHSCORE Advent Calendar 2014 の 8 日目の記事です。 今回はJavaScript のload関連イベントにおける実行順序について書きます。 調査するきっかけ ある日、以下の要件を満たすリダイレクタを作成する必要に迫られました。 「リダイレクト実行時に、とある外部JavaScriptを実行しアクセス解析などを行いたい」 当初、あまり深く考えずに二つ返事で頷いてしまったのですが、検討を開始してみると色々考慮事項が多くて大変でした。 そして、未だにベストな解決ができた気がしていません。 本稿では三十路が迫ったおっさんエンジニアの苦悶の記録をお送りします。 リダイレクトを実行する方法のおさらい まずは、リダイレクト（的な動作）をさせる方法を一通り考えて見ます。 大きく分類すると、以下の3種類になるでしょう。 HTTPのステータス
Custom Elements - Web Components を構成する技術
この記事は webcomponents.org の記事とのクロスポストです。 HTML は言うまでもなく、ウェブページを構成する最も重要な要素です。しかし、提供される機能が低レベルなため、複雑なコンポーネントを作ろうとすると、途端に div だらけの分かりにくい構造になってしまいがちです。例えば、あなたが必要な機能を盛り込んだ独自のコンポーネントを作れるとしたらどうでしょう？例えばそのコンポーネントに、機能を的確に表すタグ名を付けられるとしたら？既存のタグを拡張して、新しい機能を追加できるとしたら？ Custom Elements は、それを可能にします。 Custom Elements とはなにか？ # Custom Elements は開発者が独自に HTML タグを定義し、サイト上で利用できるようにすることで、繰り返し利用されるコンポーネントを単純化し、再利用する手間を大幅に削減しま
Shadow DOM - Web Components を構成する技術
この記事は webcomponents.org の記 事とのクロスポス トです。 Shadow DOM を利用すると、DOM 要素に、ウェブページの他の部分とは切り離された、 ノード内だけで有効なスタイルやマークアップを含んだ DOM ツリーを追加することがで きます。この記事と動画では、この Shadow DOM について解説します。 Shadow DOM とはなにか？ # こちらは HTML5 の video タグで表示された動画です。ご覧頂けるとお分かりのように、 コードは video タグのみという単純さでありながら、動画そのものだけでなく、制御用 の UI も表示することができています。 <video src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" controls></video>
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
【JavaScript】 MutationObserverの使い方 個人的まとめ - はりをきば
DOMの変更を検知するイベントが非推奨になり 代わりに新しく作られたMutationObserverなるもの。 MutationObserver - Web API インターフェイス | MDN https://developer.mozilla.org/ja/docs/Web/API/MutationObserver DOM変更検知は結構よく使うもの（特にユーザースクリプト）なのに 日本語の解説サイトが↑のMDNとMSDN、ここくらいしかなく その都度ググったり手探りで片っ端から試すのが面倒なので以下に自分用にまとめる。 コンストラクタ まずインスタンスを作る。 window.MutationObserverコンストラクタの引数に、DOM変更を検知した際に実行する関数を渡す。 function omega(data1, data2) { alert("ﾜﾚﾊﾒｼｱﾅﾘ"); consol
DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita
こんにちは、ほそ道です。 今回はDOMネタです。 イベントのキャプチャとバブリングについて覚書をまとめて参ります。 また今回はv8での検証であり、レガシーなIEは対象外です。 レガシーなIEはイベント設定メソッド自体が違いますのでご注意くださいませ。 目次はこちら 入れ子なDOMのイベント発生順序制御 DOMが入れ子構造になっていてそれぞれにイベント(例えばClickイベント)が設定されていた場合 「このように動いてほしい」という期待はケースバイケースであると思います。 期待通りの処理になるようカッチリ制御しちゃいましょう。 addEventListenerの第三引数「useCapture」 例えば下記の様なHTMLがあったとします。 body内にdivが入れ子になっておりそれぞれにClickイベントが登録されています。 <html> <head lang="en"> <meta char
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab96b0480c0977df36a7b74e945a5839f2213dfd/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
jQueryの .text() が遅かった - ﾘｱﾙｲﾝﾀｰﾈｯﾂｴﾝｼﾞﾆｬ-ｳｪｯﾌﾞﾛｸﾞ
DOM要素内の文字列を変更する処理にjQueryの .html() を使用しているコードを見て、「ムププｗ .text() のほうが速いからｗ」とか煽ってたら、実は .html() のほうが速かったという悲しい事件が起きた。 結論から言うと、jQuery 1.xの場合はIE6, 7, 8サポートのために .text() が遅く、 jQuery 2.xの場合は .text() のほうが速い。 DOMなら textContent が速いよ jQueryの前にまず、素のDOMを使ったコードでは、 Element.innerHTML プロパティに文字列を代入するパターンをよく見かける。 innerHTML は el.innerHTML = '<p>チャーハン</p>'; のようにすれば勝手にP要素を作ってくれるので大変便利ではあるが、HTML文字列を含まない文字列についてもパース処理が実行されるの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Shadow DOM v1でHTMLの内容と構造を分離する
jQueryのイベントハンドラ内でのpreventDefault()、stopPropagation()、stopImmediatePropagation()、return falseについて - Qiita
rangeとselectionを使ってtextarea・WYSIWYG用iframe等のテキスト・HTMLを取得・置換する方法まとめ [無料ホームページ作成 まめわざ]![rangeとselectionを使ってtextarea・WYSIWYG用iframe等のテキスト・HTMLを取得・置換する方法まとめ [無料ホームページ作成 まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f196a6c4affca22478cbc62ef14610f19b9ab51/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1435715157131s.png)
scrollIntoView :: 任意のElement位置まで画面をスクロールさせるメソッド - Qiita
HTML内でIDをつけた要素はJavaScriptのグローバル変数に格納される - Qiita
