タグ

domに関するginpeiのブックマーク (12)

  • GitHub - github/query-selector: Query the document tree by selector, filtering by element type.

    ginpei
    ginpei 2021/01/29
    querySelector()やgetAttribute()等を置き換える厳格なライブラリー。セレクターにマッチしないときnullを返さずthrowしたり、想定外の要素のときthrowしたり。TypeScriptでnullableを握り潰すのも不要に。
  • Integrated Terminal Performance Improvements

    Version 1.90 is now available! Read about the new features and fixes from May. October 3, 2017 Daniel Imms, @Tyriar The rendering engine of the Integrated Terminal has been completely re-written with performance in mind for the upcoming version 1.17 of Visual Studio Code. In this version, we move away from a DOM-based rendering system to using the HTML canvas element. DOM Rendering It's somewhat s

    Integrated Terminal Performance Improvements
    ginpei
    ginpei 2017/10/07
    VS Codeのコンソールのフロント側実装を、DOMからCanvasへ置き換えて高速化した話。文字選択やMB出力、GC実行頻度に問題があった。Canvasでも最小限の再描画、出力文字のスプライト化といった工夫をしている。
  • NodeList object is finally an Iterable

    Can’t be more excited about the new feature currently available in Chrome Beta (currently 51), which is nothing else but the built-in support for NodeList iteration 🎉 It might be so obvious for people coming from outside the web world that whenever you select a list of UI elements, let’s say this one: and you want to do some action on each of them, you might expect something like this: to output

    NodeList object is finally an Iterable
    ginpei
    ginpei 2016/09/26
    querySelectorAll()からforEachできたら良いよねってんで色々なやり方。Array.from()が一番わかりやすいか。
  • What is the DOM? | CSS-Tricks

    UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. A reader recently wrote in asking me what the DOM was. They said they’ve heard it mentioned and alluded to, but aren’t sure they really understand it. We can fix that. But the HTML you write is parsed by the browser and turned into the DOM. View Source just shows you the HTM

    What is the DOM? | CSS-Tricks
    ginpei
    ginpei 2013/12/30
    「僕らが書いているHTMLはDOM?」「違うよ」 「DevToolsで見える要素ツリーはDOM?」「そう、その一種だよ」 「何が違うの?」「それはね……」 という話。わかりやすそう。
  • JavaScriptのDOM Core基礎 - 三等兵

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

    JavaScriptのDOM Core基礎 - 三等兵
  • HTMLDocument の動的な作成: Days on the Moon

    ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre

    ginpei
    ginpei 2010/02/03
    HTMLDocumentの作り方と対応状況。
  • Experimentation Harness

    Dan's browser event testing harness - for questions/feedback, please contact daniel at danilatos dot com Made using the Google Web Toolkit

    ginpei
    ginpei 2009/11/16
    1.チェックボックスにチェック2.左側のinputをぐりぐり→イベントを拾って表示してくれる!こう見ると、種類が多いんだなあ。ちょっと間をおくと区切り線を出力してくれる。芸が細かいなw
  • James Mc Parlane's Blog - IE, Closures, Leaks

    [UPDATE] I have updated this with information gleaned from http://jibbering.com/faq/faq_notes/closures.html on the true nature of closures and performed an experiment. Its worse than I thought. The 'shotgun' nature of scope closure in JavaScript means that its very easy to write leaky code. One of the problems with JavaScript is that you can make an effective closure over objects that are not expl

    ginpei
    ginpei 2009/11/06
    メモリリーク。
  • Internet Explorer リーク パターンを理解して解決する

    Justin Rogers Microsoft Corporation June 2005 日語版最終更新日 2006 年 2 月 3 日 Web 開発者の進化 以前は、メモリ リークは Web 開発者にとって大きな問題ではありませんでした。ページは比較的単純に保たれ、サイト内の異なるロケーション間のナビゲーションは解放されたメモリをクリーンアップするうえで優れた方法でした。リークがあった場合も、たいていは気付かないほど小さなものでした。 新しい Web アプリケーションは、より高い標準に従います。ページはナビゲートされずに何時間も実行され、Web サービスを通じて更新情報を動的に取得する場合があります。複合イベント スキーム、オブジェクト指向の JScript、およびアプリケーション全体を生成するためのクロージャを組み合わせることで、言語機能が限界点に達します。これらの変更およびその他

    ginpei
    ginpei 2009/11/06
    IEでメモリリークするパターンとその解決策。パターン→1.DOMノードプロパティがDOMノードを参照。2.クロージャがDOMノードを参照。3.文書木外のDOMノードへの操作。4.GCのタイミングの誤解(これはリークではない)。
  • IT戦記 - 一行で IE の JavaScript を高速化する方法

    以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -

    IT戦記 - 一行で IE の JavaScript を高速化する方法
    ginpei
    ginpei 2008/03/22
    document他、windowプロパティへのアクセスをIEで高速化させる方法。documentを直接呼ぶとあれこれコストがかかるが、一度変数なんかに入れておくと以降は直接オブジェクトにアクセスできるため早くなる、という事らしい。
  • 正しいHTMLとドキュメントツリーを理解しよう

    ブラウザごとに異なるドキュメントツリー これまでFirefoxを使って、サンプルHTMLのドキュメントツリーを見てきましたが、残念ながら、すべてのブラウザがまったく同じドキュメントツリーを構成するわけではありません。Firefox、Opera、Safariでも、ホワイトスペースの扱いについては微妙な違いがあります。また、Internet Explorer6、7にいたっては、ホワイトスペースノードは無視され、ドキュメントツリー上に現れません。このように、ブラウザによってホワイトスペースノードの扱いが違うということは、DOMスクリプティングにおいては非常にやっかいな現象といえます。ここでは具体的に、ブラウザごとにどのようなドキュメントツリーを構成するのかを見ていきましょう。 Internet Explorer 6、7の場合 Internet Explorerは図の通りです(図2)。

    正しいHTMLとドキュメントツリーを理解しよう
    ginpei
    ginpei 2008/03/13
    いまさら「正しいHTML」の解説、と思いきやブラウザ間でのノードの解釈の違いなんかが興味深い。
  • jmblog.jp - preventDefault() と stopPropagation()

    先日公開した「投稿スラッグ(Post slug)が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。(間違いがあれば是非ご指摘ください!) やりたかったこと WordPressの投稿画面で「公開(Publish)」ボタンをクリックしたときに、「投稿スラッグ(Post slug)」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。 最初に思いついた方法 まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。

    ginpei
    ginpei 2007/07/21
    投稿キャンセルは、投稿時のイベントをキャンセルする事で実現する。onsubmit="return false"はもう古い、って感じ。
  • 1