タグ

JavaScriptとDOMに関するefclのブックマーク (388)

  • JavaScriptのDOM Core基礎 - 三等兵

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

    JavaScriptのDOM Core基礎 - 三等兵
    efcl
    efcl 2010/08/23
    JavaScriptのDOMについてのまとめ。 とてもよい資料。
  • 要素ノードにデータを紐付ける関数 - rikubaのブログ

    HTML5で、紐付けたいデータが文字列なら、data-で始まる属性(custom data attribute)を付けることができる(詳細はコメント欄を参照)。 DOM3のNode#setUserData・Node#getUserDataのように、間接的に要素とデータを紐付けられる関数を作った。jQuery.data()のようなものと言ったほうが分かりやすいかも。ただ、jQuery.data()は要素に独自のプロパティ(「jQuery」に時刻のミリ秒表現を続けた文字列)を生やしてしまう。 特徴 Node#[sg]etUserDataとの違い 要素ノードのみ対応。 Node#setUserDataの第三引数のようなハンドラ関数には未対応。 クロスブラウザ:実装によって手段を変える Node#[sg]etUserDataをサポートしている実装では、単にそれのラッパー(Firefox)。 Ele

    要素ノードにデータを紐付ける関数 - rikubaのブログ
    efcl
    efcl 2010/08/16
    DOM要素に独自のプロパティをつけて検索可能にする関数。 ノードに検索専用のプロパティを設ける
  • Nicole Sullivan「再フロー&再描画:Javascriptを重くするCSS」 - 以下斜め読んだ内容

    Yahoo!のNicole Sullivanの2009.3.27のブログエントリ Reflows & Repaints: CSS Performance making your JavaScript slow? ウェブページのパフォーマンスを遅くさせるCSSの使い方。およびその回避策がテーマ 再フロー&再描画をどうやって減らすか。 TIPSは6つ紹介されてる。が、javascriptを書かないCSS書きに関係するのは、5〜6番目の table要素は特殊。固定レイアウトアルゴリズムでレンダリングされるようにしろ。 MS独自仕様のcss expression使うな。 のみ。 以下斜め読んだまとめ。 Operaの記事「Efficient JavaScript」によると再描画と再フローがjsが重くなるのに影響してる 同僚のStoyan Stefanovと一緒にこの問題の定量化に取組中 再描画と再フ

    Nicole Sullivan「再フロー&再描画:Javascriptを重くするCSS」 - 以下斜め読んだ内容
    efcl
    efcl 2010/08/16
    CSSが再フローの原因になるのを回避する。 styleプロパティは毎回リフローを有無
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    efcl
    efcl 2010/08/08
    firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount。
  • DomAPI sandbox

    JS: document.getElementById('x').onclick=function() {alert(this.title);}

    efcl
    efcl 2010/07/30
    DOM API をJavaScriptで。
  • Document Object Model (Core) Level 1

    1. Document Object Model (Core) Level 1 Editors Mike Champion, ArborText (from November 20, 1997)Steve Byrne, JavaSoft (until November 19, 1997)Gavin Nicol, Inso EPSLauren Wood, SoftQuad, Inc. 1.1. Overview of the DOM Core InterfacesThis section defines a minimal set of objects and interfaces for accessing and manipulating document objects. The functionality specified in this section (the Core fun

    efcl
    efcl 2010/06/30
    JavaScriptのDOMコア、仕様書。
  • 要素が document につながっているかを高速に調べる方法 - IT戦記

    とある要素が document につながっているかどうかを調べたい! とりあえず、ほとんどすべてのブラウザで出来る方法としては、 parentNode で確認することができますね。 function isElementInDocument(node) { do { if (node === document) { return true; } } while (node = node.parentNode) return false; } でも 前の例だとちょっと遅いので contains や、 compareDocumentPosition を使うといいです! コードにすると以下のような感じ function isElementInDocument(node) { if (document === node) { return true } else if (document.compa

    要素が document につながっているかを高速に調べる方法 - IT戦記
    efcl
    efcl 2010/06/24
    compareDocumentPositionを使ってDOMを調べる。ある要素が別の要素に含まれるかどうかを調べる
  • 選択範囲の取得について調べた - daily dayflower

    はてなスターや Tumblr のブックマークレットなど,ブラウザ上の選択文字列をそのままユーザの入力として使えるサイトが増えています。JavaScript からどのようにすれば取得できるのかを調べてみました。 ブラウザ間の差異 DOM における選択範囲の仕様として以下の 2 通りがあります。 W3C Range Microsoft TextRange IE が Microsoft TextRange のみサポートしているのはまぁ予想通り。注意しなくてはいけないのは,W3C Range は,あくまで DOM 上の「範囲」を示すためのインタフェースであることです。ブラウザ上でユーザがどこを選択しているのか,などは UI の実装になりますから,W3C (Range) では規定されていません*1。そこで W3C Range をサポートしているブラウザは,選択範囲をあらわす W3C Range オブ

    選択範囲の取得について調べた - daily dayflower
    efcl
    efcl 2010/05/25
    選択範囲からDOMノードを取得する。 DOM Rangeの解説