タグ

DOMに関するs_moriのブックマーク (10)

  • $(function(){}) と $(window).on('load',function(){}) の違い - Qiita

    ページ読み込み時に処理を実行したい場合、いろいろな書き方があると思います。 このあたりの違いをまとめました。 種類 jQueryのready と jsで昔から愛用されているonload がある。 ready $(function(){ alert('Hello'); }); //または $(document).ready(function() { alert('Hello'); }); //または jQuery(function() { alert('Hello'); }); //または jQuery(document).ready(function(){ alert('Hello'); }); //JavaScript document.addEventListener('DOMContentLoaded', function(){ alert('Hello'); }, false);

    $(function(){}) と $(window).on('load',function(){}) の違い - Qiita
    s_mori
    s_mori 2019/09/11
    DOMツリー可視化図
  • DOM XPath を理解したが、使い物にならん

    Document Object Model XPath DOM XPathは、多くのブラウザでサポートされている。しかし、その実装が、現実的に理解できない。 物のXHTMLに対してXPathを用いるには、名前空間を明示的に指定しなければならない。省略不可能である。何故だ。何故なのだ。普通、XHTMLの要素に対しては、具体的な名前空間を使うことは、まずない。たとえば、 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html > <html xmlns:ジョジョ="http://www.w3.org/1999/xhtml" > <ジョジョ:head> <ジョジョ:title> 岸部露伴語録集 </ジョジョ:title> </ジョジョ:head> <ジョジョ:body> <ジョジョ:p> 今…家がない……<ジョジョ:br /> 康一くんのと

    s_mori
    s_mori 2012/06/26
  • IE8 で実装された Selectors API とは何か? - IT戦記

    はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE

    IE8 で実装された Selectors API とは何か? - IT戦記
    s_mori
    s_mori 2012/06/26
  • PHP Simple HTML DOM Parserがとっても便利

    HTMLをパースしてきてDB化したり、RSSのテンプレに落とし込む…と言ったことを少し前からしているのですけど、1つ2つならいざ知らず対象サイトが増えてくると正規表現で何かし続けるのはたいそう無理があります。そういうわけでDOMを使ったりXPathを使ったりもしていたのですが、どちらもHTMLの構造にぴったりとは言えなくて、高度なことが出来るが故に記述が複雑になってしまうのでした。うーん。慣れるまでにハードルがあるな… そんなことを思っていたのですが、ふとした拍子に見つけたライブラリ「PHP Simple HTML DOM Parser」を利用してみたらば、とてつもなく便利でびっくり。jQueryのようなセレクタでガンガン指定して持ってくるスタイルでわかりやすいのなんの。 $text = $dom->find('#todays_darling', 0)->innertext; //今日のダ

    PHP Simple HTML DOM Parserがとっても便利
  • DOM - MDC

    ドキュメントオブジェクトモデル (Document Object Model, DOM) は、ウェブページを表す HTML のような文書の構造をメモリー内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。ふつうは JavaScript を使用しますが、HTMLSVG、XML などの文書をオブジェクトとしてモデリングすることはコア JavaScript 言語の一部ではありません。 DOM は文書を論理的なツリーで表現します。ツリーのそれぞれの枝はノードで終わっており、それぞれのノードがオブジェクトを含んでいます。 DOM のメソッドでプログラム的にツリーにアクセスできます。これにより、文書構造やスタイルやコンテンツを変更することができます。 ノードにはイベントハンドラーを割り当てることができます。イベントが発生すると、イベントハンドラーが実行されます。 DO

    DOM - MDC
  • 要素が画面上に見えているかどうかを調べる - by edvakf in hatena

    document.elementFromPoint という便利な関数を知ったので、今作っている Chrome 用 Migemo ページ内検索で使ってみた。 これが困ったことに、ブラウザごとにかなり挙動が違うのだけど、来の動作はこんな感じらしい。 待望の document.elementFromPoint が Firefox 3.0a8pre にて実装された。仕様は nsIDOMNSDocument.idl に詳しく書いてあるが、おおよそ以下の通りである。 HTML, XUL どちらの document に対しても使用可能 document の左上を (0, 0) とし、位置 (x, y) にある実際に見えている要素を取得する 同一の document 内に存在する要素のみ取得可能。例えばインナーフレーム内の document 内に存在する要素は取得できず、代わりに iframe 要素を返

    要素が画面上に見えているかどうかを調べる - by edvakf in hatena
  • Window - Web API | MDN

    Document Object ModelWindowインスタンスプロパティclosedconsolecookieStore (en-US) Experimental credentialless (en-US) Experimental customElementsdevicePixelRatiodocumentdocumentPictureInPicture (en-US) Experimental event 非推奨 external (en-US) 非推奨 fence (en-US) Experimental frameElementframesfullScreen Non-standard historyinnerHeightinnerWidthlaunchQueue (en-US) Experimental lengthlocalStoragelocationlocationb

    Window - Web API | MDN
  • Window: open() メソッド - Web API | MDN

    url 省略可 文字列で、読み込むリソースの URL を示します。これは HTML ページ、画像ファイル、その他のブラウザーが対応しているリソースのパスまたは URL にすることができます。空文字列 ("") がこの時期数に指定されると、対象の閲覧コンテキストに空のページが開きます。 target 省略可 ホワイトスペースのない文字列で、リソースを読み込むための閲覧コンテキストの名前を指定します。その名前で既存のコンテキストが識別できない場合は、新しいコンテキストが指定された名前で作成されます。特殊な target キーワードである _self、_blank、_parent、_top も利用することができます。 この名前は <a> や <form> 要素の target 属性として使うことができます。 windowFeatures 省略可 name=value の形式、または論理特性の場合

    Window: open() メソッド - Web API | MDN
  • JavaScript::Bookmarklet Blog: DOMのソースを表示

    DOMのソースを表示 DOMのソースを見る JavaScriptを利用してページ内で動的にHTML要素を生成していたりするときのページの現実的なページのソースを見るためにDOMの内容をシリアライズして人が読める形にして表示します。 JavaScript includeを利用してHTMLを部分的に書かせているときなど、そのJSの中身をチェックするときなどに便利です。 Mozilla系ブラウザでのみ動作します。 投稿者 bookmarklet : 2005年03月18日 20:37 | トラックバック

    s_mori
    s_mori 2009/03/13
    "現在"のページのソースを表示してくれるブックマークレット
  • DOM Standard

    Participate: GitHub whatwg/dom (new issue, open issues) Chat on Matrix Commits: GitHub whatwg/dom/commits Snapshot as of this commit @thedomstandard Tests: web-platform-tests dom/ (ongoing work) Translations (non-normative): 日語 Abstract DOM defines a platform-neutral model for events, aborting activities, and node trees. 1. Infrastructure This specification depends on the Infra Standard. [INFRA]

    s_mori
    s_mori 2009/03/13
    W3C
  • 1