JavaScriptでDOMレンジを扱う：CodeZinejapan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。
とてもシンプルに自分自身が属する script 要素を取得 - IT戦記
グローバル領域に以下の一行を書く <script> var currentScript = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document); alert(currentScript); </script>こうすることで、currentScript はこの script 要素を指す。 いちおう説明 DOM は構築されるときに、上から順番に構築される。そして、script タグがあると、 script 要素を構築したあとに、スクリプトを実行する。 つまり、スクリプトが実行されたとき script 要素は今まさに作られたばかりであり、それよりも後ろの要素が存在しない。さらにこの script 要素を含むすべての要
slayeroffice | tools | Mouseover DOM Inspector v2.0 Help
Mouseover DOM Inspector v2.0.2 Help Overview The Mouseover DOM Inspector, or MODI for short, is a favelet (also known as a bookmarklet) that allows you to view and manipulate the DOM of a web page simply by mousing around the document. Browsers currently supported are Firefox, Mozilla, Netscape 8, Opera 7.5+ and MSIE6+ on all of their respective Operating Systems. To begin using the Mouseover DOM
url_breaker - あすかぜ・ねっと
url_breaker について Firefox 3 では、デフォルトでURL文字列が折り返し表示されるようになります。 Firefox 3 以降では url_breaker の導入は不要です。 Firefox 2では URL文字列の折り返しが行われないため、長いURLが書かれていると レイアウトが崩れたり横スクロールが発生したりします。 このスクリプトは、記号文字の後ろに自動的に<wbr>タグを挿入することにより、 URL文字列を折り返し可能にします。 テスト用URL（リンク有）→ http://www.asukaze.net/soft/url_breaker/#long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long
DOMから始めるJavaScriptモダン・スクリプティング---目次：ITpro
近年，Ajaxの台頭をきっかけに，JavaScriptを使ったブラウザのリッチ・クライアント化が進んできました。現在では，ページの表示を変化させるだけであれば，ほとんどのことはJavaScriptのみで対処することが可能です。それを実現するのがDOMなのです。 第1回 DOMから始めるモダン・スクリプティングの世界へようこそ 第2回 ブラウザからHTMLはどう見えているかを理解しよう ～ドキュメントツリー～ 第3回 DOMスクリプティングのことはじめ(1) ～要素（タグ）を狙い撃ち～ 第4回 DOMスクリプティングのことはじめ(2) ～これはどんな要素？～ 第5回 DOMを使ってHTMLを自由自在に書き換える 第6回 イベントハンドラから脱却しよう 第7回 スクリプトを完全に分離しよう ～コンテンツ，プレゼンテーション，ビヘイビア～ 第8回 スクリプトのパッケージ化 ～使い回しできるスクリ
DOMの基本。正しいHTMLとドキュメントツリーを理解しよう
DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある。 旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。 ドキュメントツリーとは DOMスクリプティングでは、HTMLに関する正しい知識が求められます。まずは正しいHTMLとはなんなのかを理解していただきます。そして、DOMスクリプティングでは欠
XML ―伸び縮みマークアップ言語―
ＳＧＭＬのサブセットであるＸＭＬは、インターネット上で扱うデータを記述するための新しいデータフォーマットで、 利用者が自由にタグを定義でき、文書中の文字列に意味付けができる柔軟性のある言語構造を持っており、 プログラムで自在にＸＭＬデータを情報処理できるというメリットがあります。 そのＸＭＬを実際に文書を作成しながら学べるようわかりやすいよう解説します。 ■ ＸＭＬの基本 ＸＭＬとは ＸＭＬ文書作成の大まかな流れ ＸＭＬ文書の記述 ＸＭＬ文書ブラウザでの表示 ■ ＸＳＬＴスタイルシートの基本 ＸＳＬＴスタイルシートの適用 ＸＳＬＴの構造 ■ ＸＭＬ文書の構文 ＸＭＬ文書の宣言 文字コードの設定 タグ付けのルール 要素名・属性の指定について 階層構造 実体参照・文字参照について その他・コメントや処理 ＤＴＤの記述 名前空間の指定 ■ データをＸＭＬ文書化する 情報をデータ化する 階層構造の
第7回 Ajax活用のためのDocument Object Model入門
前回，前々回と，Yahoo! ウェブ検索Webサービスを利用するサンプルを通じて，AjaxでXMLデータを利用する方法について紹介しました。XMLを利用することで，サイト検索結果のような複合的な情報（構造化データ）を，使用するプラットフォームを意識することなく，やり取りできます。前回，XMLデータをクライアントサイドで受け取れることを確認したところで，今回はより詳らかにXMLデータ読み込みの部分を見ていくことにしましょう。 XML操作の標準API「Document Object Model」 DOM（Document Object Model）とは，その名の通り，XML文書内に登場するタグや属性，テキストといった構成要素を汎用的に操作するためのオブジェクト群のことを言います。DOMを利用することで，与えられたXML文書から必要な情報を取り出したり，データを編集/追加/削除したり，といった操
prototype.jsの開発メモとGecko DOM ReferenceのHTMLヘルプ
未だにちょくちょくみてしまうprototype.jsの簡単なリファレンスであるDeveloper Notes for prototype.jsの日本語版とThe Document Object Model in Mozillaで配布されているGecko DOM ReferenceのZIP version (古い奴)をHTMLヘルプにしてみた。HTMLヘルプはちょっと作ってみちゃったりすると、HDD上にあるありとあらゆるHTMLのドキュメントをHTMLヘルプにしたい欲求に駆られてしまう・・・のは僕だけですか、そうですか。 prototype.jsの開発メモ Gecko DOM Reference prototype.jsの開発メモの方はHTMLに手を入れて、メソッドやプロパティにidを振り、キーワードでジャンプできるようにした。HTMLヘルプ向けにCSSもちょっと調整。チェックしきれてない説
%25E9%2596%25A2%25E9%2580%25A3)
JavaScript インラインフレーム(iframe)関連 - とみぞーノート
いろいろハマリがちなJavaScriptでインラインフレームを扱う場合のメモ。 特に断らない限りブラウザのバージョンは以下が前提。 iframeのwindow,documentの取得方法はIEとMozilla系(NN,FireFox)で異なる。 IEはframes配列のwindow,documentプロパティから取得できる。Mozilla系はiframeエレメントのcontentWindow,contentDocumentプロパティから取得できる。 IEでもMozilla系と同じくiframeエレメントのプロパティから取得することもできるが、contentDocumentについてはIEには存在しないので、documentはcontentWindow.documentとしてcontentWindow経由で取得しなければならない。 (1) frames配列から取得する場合 frames['xx
Collection & Copy - ドキュメントのロード完了に合わせて関数を実行する
JavaScriptページロード時にプログラムを実行するためにwindow.onloadやbody.onloadがしばしば使われる。しかし、ページ内に大きな画像が存在する場合などは、画像のロードを待つため、実行が遅れてしまう。「ドキュメントのロードが終わっていて、かつ、イメージのロードが完了する前」に関数を実行する方法のリンク2つの要点をコピー。 script要素defer、DOMContentLoadedイベントを利用する方法The window.onload Problem - Solved! Firefoxの場合非公式のイベントハンドラ、DOMContentLoadedを利用する。 // for Mozilla browsersif (document.addEventListener) { document.addEventListener("DOMContentLoaded",
クロスブラウザ実現のための基本関数群（DOMブラウザ対応）
Window( Frame )の幅の取得 function getWindowWidth(){ if(window.innerWidth) return window.innerWidth; // Mozilla, Opera, NN4 if(document.documentElement && document.documentElement.clientWidth){ // 以下 IE return document.documentElement.clientWidth; } else if(document.body && document.body.clientWidth){ return document.body.clientWidth; } return 0; } Window( Frame )の高さの取得 function getWindowHeight(){ if
作って納得! DOM 2 Events: Days on the Moon
ブラウザ上でのプログラミングで避けては通れないのがイベント処理。その仕組みは DOM Level 2 Events にて規定されています。しかし、とりあえず addEventListener メソッドを使ってはいるものの、それがどのような意味を持つか詳しくは知らないといったことはありませんか。そこでここでは、DOM 2 Events のイベントモデルを理解し、ブラウザが裏で何をしているのかを把握するために、実際にそのイベントモデルを実装してみることにします。具体的には、仕様書に定められたインターフェースを JavaScript で実装し、それらを組み合わせてイベントの発生をシミュレートしてみます。 Event インターフェース EventListener インターフェース EventTarget インターフェース DocumentEvent インターフェース DOMException イン
JavaScript for CSS
それで、動的に変化させる「きっかけ」として、HTML 4.0では以下のような内在イベントが定義されています。 onload ウインドウあるいは全てのフレームの読み込みが完了した時に発生する。BODYかFRAMESET要素に設定することが出来る。 <BODY onload="function()"> <!-- 読み込みが完了したら呼び出す --> <BODY onload="setTimeout('function()',n)"> <!-- 読み込みが完了してからnミリ秒後に呼び出す --> onunload ウインドウあるいはフレーム内の文書を破棄する時に発生する。BODYかFRAMESET要素に設定することが出来る。 onclick 要素上でポインティングデバイスのボタンがクリックされた時に発生する。ほとんどの要素に設定することが出来る。 <SPAN id="c1">変化させたい要素<
IE 6.0 - Javascript - Benchmark - W3C DOM vs. innerHTML
Section 8F of the book discusses innerHTML and when it's preferable to "real" W3C DOM methods. This is a test page intended to find out which method of generating large amounts of content is fastest in the browsers. Of course the results differ significantly from browser to browser. Each of the test scripts creates a 50x50 table, all of whose cells are filled with one character, *. Then the time y
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DOM Tool | Version 1.1
IBM Developer
