IE の innerHTML や appendChild で要素が挿入された瞬間を取得する方法 - IT戦記
要素が挿入された瞬間を取得する 今までは出来ないと思っていたのですが、今日いろいろ試していて出来る方法が分かりました。 ですので、ちょっと紹介したいと思います。今のところアイデアなので、実用性は？です。 方法 HTML に以下の style 要素を挿入することで実現することができます。 <style type="text/css"> * { display: expression(function() { if (!this.__mark) { this.__mark = true; alert('inserted node: ' + this.tagName); } return ''; }.apply(this)); } </style> 実際に例を見てみましょう http://amachang.art-code.org/ieexpression/000.html <!DOCTYPE
HTML 要素 (element 型オブジェクト) の取得 [JavaScript / DOM]
HTML 要素 (element 型オブジェクト) を取得する JavaScript は DOM を実装しており、(X)HTML 文書中の各種 Node (ノード) はオブジェクトとして扱われます。 例えば "html" や "body" などの要素 (Element) は element 型オブジェクトとして扱うことが出来ます。 文書中の文字列は text 型オブジェクトです。 ここでは、JavaScirpt を使って (X)HTML の各種要素 (element 型オブジェクト) を取得する方法を説明します。 ルート要素 (root element) の取得 XML 文書は、木構造で最上位にくる要素をただ 1 つ持っています。 この要素をルート要素といい、(X)HTML 文書では "html" 要素がこれにあたります。 DOM では、 Document インターフェイス の 読み取り専
jmblog.jp - preventDefault() と stopPropagation()
先日公開した「投稿スラッグ（Post slug）が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。（間違いがあれば是非ご指摘ください！） やりたかったこと WordPressの投稿画面で「公開（Publish）」ボタンをクリックしたときに、「投稿スラッグ（Post slug）」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。 最初に思いついた方法 まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。
getElementById()でname属性が検索される？ - 宇宙野武士は元気にしているか
getElementById()でname属性を検索してエレメントを取得できるという話を聞いた。 いや、絶対に推奨されている使い方ではないだろう。 そもそもIDはページ内でユニークだからgetElementById()はエレメントを返して、 複数設定できるname属性用にArrayオブジェクトElementオブジェクト（NodeListオブジェクト） で返ってくる、getElementsByName()があるのだから。 でも、実際できるって聞いたし。 だから、調べてみた。 ほんとにとれるのか？ サンプルのHTML + JavaScriptを用意する。 <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns
jQueryを使うときに気をつけるべき8のポイント : tech.kayac.com - KAYAC engineers' blog
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 （一部jQueryではなく、DOMの仕様上の制限も含まれています） 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 （たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します） 確認する ちなみに、$().findや$().notはstring以外も渡せるた
onloadの代わりにDOMContentLoadedを使ってみる - へぼいいいわけ
onloadイベントだとDOMの構築が完了しても画像を読み込み終わるまで待ってしまうので、代わりにDOMContentLoadedイベントを使って処理させてみます。IEにはDOMContentLoadedがないのでdocument.documentElement.doScroll("left")を監視してDOM構築が終わるまで再帰しています。 参考 window.onloadの代替スクリプトその２ jQuery 1.2.6 2330行目くらい そーす ※一部修正しました。 // DOM構築完了時の処理 function load(){ /* なんかいろいろ */ }; // ユーザーエージェント var userAgent = navigator.userAgent.toLowerCase(); // ページの構築が完了したらloadを呼び出す (function(){ if(docume
anything from here jQuery()の挙動を解読する(21) $(document).ready(f)、bindReady()、$.ready() 解読 ──jQuery解読(32)
$(document).ready(fn) - bindReady() - $.ready() $(document).ready(fn) が bindReady() を、そしてそこから $.ready() が呼び出される三層構造で、これらのメソッドが機能します。 それぞれの役割は、順に以下のようになります。 $(document).ready(fn)……(1/2) DOM読み込み完了通知イベントの登録（ bindReady()メソッドの実行 ） $(document).ready(fn)……(2/2) DOM 読み込み完了時の fn の実行と DOM 読み込み完了時に実行させる関数の登録、 bindReady()……(2) DOM 読み込み完了のチェックと完了時の jQuery.ready()呼び出し jQuery.ready()……(3) DOM 読み込み完了を記録するプロパティの設定
SURGAVIP : Link Slot Gacor PG Soft Maxwin Slot Online
SURGAVIP # Link Slot Pragmatic Gacor Malam Ini Modal Kecil Janji Maxwin Sekarang ! Selamat datang di SURGAVIP situs slot terpercaya dari server PG Soft ternama, banyak jenis permainan slot gacor dan mudah menang maxwin disini bersama surgavip. main dengan modal receh pulang dengan uang berlimpah. SURGAVIP dikenal sebagai situs terpercaya dengan koleksi lengkap game dari pg oft, provider yang udah
DOM 読み込み完了時に関数を実行する domready.js
DOM 読み込み完了時に関数を実行する domready.js 配布元:METAREAL[閉鎖] ライセンス:MIT-style license. domready.jsはDOM 読み込み完了のタイミングで、任意の関数を実行できるようにする JavaScript ライブラリになります。 ページの読み込みが終了したイベントを取得するonloadイベントは厳格すぎて少々扱いにくいところがあります。 画像などのすべてのファイルの読み込みを終了してから実行するため、ラグが生じてしまうからである。 この domready.jsを利用すれば、DOM ツリーが構築されたタイミングで、任意の関数を実行できるのでラグが最小限ですむ。 同様の機能をjQueryやmootoolsではサポートしており、Prototyp.jsの最新版も新たにサポートされています。 domready.jsを利用すれば、それらのフレー
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
EfficientJavaScript - Dev.Opera - 効率的な JavaScript 目次 この文書について 効率的な JavaScript ECMAScript eval や Function のコンストラクタを使うのはやめよう eval を書き換えよう 関数を使いたいなら function を使おう with を使うのはやめよう 性能を決める関数で try-catch-finally を使うのはやめよう eval と with は隔離しよう グローバル変数を使うのはやめよう 暗黙のオブジェクト変換に気をつけよう 性能を決める関数で for-in を使うのはやめよう 文字列は累積スタイルで使おう プリミティブの操作は関数呼び出しより速い setTimeout() や setInterval() には文字列でなく関数を渡そう DOM 再描画と再フロー 再フローの回数をでき
HTMLを生成する、DOM - FAX
JavaScriptCollection & Copy - HTMLを生成する 上記では、HTMLを文字列で生成しinnerHTMLで追加していた。しかし試してみると、文字列が長くなると遅くなり、DOMを使ったほうがパフォーマンスが良かったためMochiKitを使い書き直した。これは今日時点の状態で、プロジェクトの進展に合わせて細部を書き加えていこうと思っている。 var DOMBuilder = {}; (function(){ forEach( ('html head title style script body h1 h2 h3 h4 h5 h6 ' + 'table tbody tr td col ' + 'br hr dl ul ol li ' + 'a img span div style strong b big em p q pre center ' + 'fo
[ajax] DOMコードジェネレータ @ ZEROBASE CAST
<div class="popup"> Let's access <a href="http://zerobase.jp/">ZEROBASE</a> & have fun. </div> キーボード入力も大丈夫。即座に下のDOMコードが変化します。 不完全なHTMLを入力すると正しい結果になりません。例えば<table>タグに囲われていない<tr>タグなど。あくまで上記テキストエリア内でDTDに反しないHTMLを入力してください。 ダウンロード ファイル dom2code.js ※気が向いたら改善しますので、ダウンロードするより、このページをブックマークするほうがおすすめです。 動作環境 WinXP(SP2)上のInternet Explorer バージョン6.0.29で動作確認しました。 動作だけなら幅広いブラウザで可能ですが、出力するDOMコードがブラウザにより異なります。というのは
[暴満館] JavaScriptによるCSSの操作
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
[Others] IEで使えるDOMインスペクタっぽいツール
[小ネタ]IEで使えるDOMインスペクタっぽいツール IE開発時に使えるDOMインスペクタっぽいツール情報を、集めてみました。 どれもAjax等の開発時に便利かと思います。 DHTML Diverhttp://s.drmg.net/chd/dhtmldiver/htm/index.htmフリーウェア[日本語]（このサイトで公開しているツールです。） IEの右クリック拡張として動作するDOMインスペクタ。 IEエンジンで作成された思わぬ場所で動いたりします。 （某タブブラウザとか、某2chビューワ－とか。。。。 その他の特徴は、こちら→DHTML Diver特徴 Internet Explorer Developer Toolbarhttp://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-
FC2ブログ 現在アクセスが集中しています。
現在アクセスが集中しており表示しにくい状態となっております。 申し訳ございませんが、しばらく時間を置いてからアクセスするようお願いいたします。 ・FC2フォーラム ・FC2インフォメーションブログ ・最新障害情報・メンテナンス情報ブログ
Latest > Flakes of Ideas > JavaScriptでDOMを使う――オブジェクト指向入門の入門 - outsider reflex
2003/9/3 2003/9/4 2003/9/5 2003/9/6 はじめに オブジェクトとプロパティ 連想配列 オブジェクトと連想配列 「クラス」というテンプレート オブジェクトとメソッド 特定の型専用の関数 「メソッド」というプロパティ クラスとメソッド 「オブジェクト指向」の簡単なまとめ DOMとオブジェクト指向 「DOM」とは何か？ インターフェースとクラス DOM操作の実例 簡単な処理の例 もっと複雑な処理の例 おわりに Cが分かる人には疑りぶかいあなたのためのオブジェクト指向再入門というページがお勧めです。僕の稚拙な説明よりずっと分かりやすいです。 Home Back to Flakes Prev. Next はじめに JavaScriptでDOMを使う。DOMはHTMLやXMLをスクリプトやプログラムで操作するのにとても便利な技術ですが、簡単なスクリプトくらい書けるからD
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
バックナンバー – おくvillage
Loading...