タグ

domに関するthujikunのブックマーク (7)

  • [deprecated] 今Polymerに乗っかると危ないと思う4つの理由

    [2015/11/10 追記] Web Components周りはだいぶ情勢が変わったのでこの記事の内容は真に受けないでください。 (コメント欄が有益なので記事は残します) Polymerというより現状のWebComponents全体がふらふらしてるので口車に乗せられると将来痛い目を見そうだと思った 半年くらい経ってブラウザベンダー間での議論がけっこう進展したので、Web Components自体は割と安泰かと思います。 Shadow DOMの仕様を満たしてない Polymerが使っているShady DOMはCustom ElementsのStylingを容易にするためにShadow DOM仕様を満たさない状態で使われています。 https://www.polymer-project.org/1.0/docs/devguide/styling.html#background the Pol

    [deprecated] 今Polymerに乗っかると危ないと思う4つの理由
  • Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita

    Chrome 43およびそれ以降のバージョンにおいて、DOMの属性(値)がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日語訳をしてみました。心当たりがある方は、ぜひ以下の内容を読んでいただいて、コードの修正などに取り込んでいただければと思います。 原文: http://updates.html5rocks.com/2015/04/DOM-attributes-now-on-the-prototype DOM属性は今後プロトタイプチェーンに Chromeチームは、最近「DOM属性をプロトタイプチェーンに移動しています」とアナウンスしてい

    Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita
  • Intro to Shadow DOM | Envato Tuts+

    Take any modern web page and you will notice that it invariably contains content stitched together from a variety of different sources; it may include the social sharing widgets from Twitter or Facebook or a Youtube video playing widget, it may serve a personalized advertisement from some ad-server or it may include some utility scripts or styles from a third party library hosted over CDN and so o

    Intro to Shadow DOM | Envato Tuts+
  • MutationObserver - Web API | MDN

    // 変更を監視するノードを選択 const targetNode = document.getElementById("some-id"); // (変更を監視する) オブザーバーのオプション const config = { attributes: true, childList: true, subtree: true }; // 変更が発見されたときに実行されるコールバック関数 const callback = function (mutationsList, observer) { // Use traditional 'for loops' for IE 11 for (const mutation of mutationsList) { if (mutation.type === "childList") { console.log("A child node has bee

    MutationObserver - Web API | MDN
    thujikun
    thujikun 2013/09/19
    DOMの変更監視できるの知らなかった。。。
  • DOM操作の最適化によるJavaScriptチューニング(前編)

    連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画! この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください!こちらから問題にチャレンジ! DOM(Document Object Model)とは、HTMLをアプリケーション(ここではJavaScript)から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも

    DOM操作の最適化によるJavaScriptチューニング(前編)
  • Angular.jsとBackbone.jsのDOM依存を図解する - ジンジャー研究室

    果敢にもMVCフレームワークの図解を試みたので、どうぞ! MVCの動機 MVCという言葉が初めて登場してから30年以上たった今、最早なんだったのか分からないほどMVCの定義は混迷をきたしているわけだが、どれがMVCでMVVMでMVPであるという定義についてあれこれ考察するのは個人的には好きでなくて、「結局何がしたいのか」という動機がぶれていなければ何でも良いと思っている。 じゃあそれは一体何なのかということを自分なりに考えてみたところ、次の一言に落ち着いた。 「ModelはViewに依存したくない」 世間的には(?)ModelとViewを単に「分ける」と説明されることが多いが、私はそれだけでは納得していなくて、依存の方向こそが重要だと思っている。たとえ分かれているように見えてもModelがViewを参照していたら、情報の取得先や表現方法は固定化されてしまう。 ModelはViewの事情から

    Angular.jsとBackbone.jsのDOM依存を図解する - ジンジャー研究室
  • js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記

    js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている

    js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
    thujikun
    thujikun 2013/03/04
    やはりパフォーマンス考えるとCSS使うのが吉か。
  • 1