Element: scrollIntoView() メソッド - Web API | MDN
alignToTop 省略可 論理値です。 true の場合、要素の上端がスクロール可能な祖先の表示範囲の上端に来るようにスクロールします。 scrollIntoViewOptions: {block: "start", inline: "nearest"} に相当します。これが既定値です。 false の場合、要素の下端がスクロール可能祖先の表示範囲の下端に来るようにスクロールします。 scrollIntoViewOptions: {block: "end", inline: "nearest"} に相当します。 scrollIntoViewOptions 省略可 Experimental 以下のプロパティを持つオブジェクトです。 behavior 省略可 スクロールを即座に行うか、滑らかにアニメーションさせるかを決定します。このオプションは文字列であり、以下のいずれかの値を取ります。
DOMNodeInserted DOMNodeRemovedを使って、divとかformとかに子要素が追加されるとか、中身の一部が消されるときにイベントを発火させたい的なお話
とりあえずタイトルが長いけど、何がしたいかっていうとDOMの監視をしたいっていうこと。 divの中にimgが入ったとかpが入ったとか、formの中にinput hiddenが入ったとか消えたとか云々。 そういうときにフォームのサブミットボタンをアクティブにしたいとかっていう感じ。 で、それを実現するにはformだったら各フォームパーツのclickイベントとかの最後に処理を入れてみたりとか、 divだったらsetInterval使ってDOMの中身を監視するとかどうとか。 けどどっちもぶっちゃけ処理が多くなればなるほど面倒なことになってしまう。 特にフォーム関連なんてパーツが増えるたびに書かないといけないとか面倒ではある。 ってことでDOMNodeInsertedやDOMNodeRemovedっていうイベントを使ってその処理を書きましょう的な。 子要素に何か入ったとか消えたとかを監視したい 想
document.フォーム名.action－JavaScriptリファレンス
HTML + JavaScriptソース <script> <!-- function sample() { document.sampleform.action="sample/formresult.php"; document.sampleform.method="get"; } // --> </script> <form name="sampleform" onSubmit="sample()"> <input type="text" name="sampleinput" value="あいうえお"> <input type="submit" value="送信する"> </form>
ブラウザだけで Excel 向け日本語 CSV ファイルを作る方法 - do_aki's log
※ ただし IE を除く ブラウザで表示しているデータをCSV ファイルにしてダウンロードしたかったので調べてみると File API の Blob + createObjectURL でさくっとできるっぽい。 *1 だけど、日本語が utf8 になってしまう。 そのまま Excel で開くと文字化けてしまうので、どうしたもんかと悩んでいたら、 BOM をつければ 中身が utf8 でも開けるという情報を得たのでBOM 付きでダウンロードできるようにしてみました。というお話。 実際のHTMLは https://dl.dropbox.com/u/12062013/excel_csv/download.html で試せます。 (1) BOM の用意 数値のArray ([0xEF, 0xBB, 0xBF]) をそのまま Blob に渡すと数字文字列に変換 ("239,187,191")されて出
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
eventオブジェクト（イベント情報の取得）｜イベント｜JavaScript/DOM｜PHP & JavaScript Room
<script type="text/javascript"> /* イベントの型を取得 */ function getEventType(event){ var frmObj=document.frmevent; frmObj.elements["txt"].value=event.type; } </script> <form action="#" name="frmevent"> <p><input type="text" onFocus="getEventType(event)" /></p> <p><input type="checkbox" onclick="getEventType(event)" /></p> <p><select onchange="getEventType(event)"> <option value="">▼選択してください</option> <opt
既存のコードの理解が捗るChrome DevToolsの使い方 - kitak blog
jQuery系ライブラリによるDOM操作が中心のプロジェクトにがっつり機能を追加する機会があった。 そのJavaScriptのコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計、実装方針について共有を受けたが、それでもいざ手を入れようとすると自分自身のコードの理解が進んでおらず「えーっと...」となってしまった。 上記以外にも、長年、多くの人が触れてきたJavaScriptのコードに機能を追加する、修正するのはなかなか難しいのではないか、と思う。最初は、ちょっとしたユーザビリティの向上のために書かれたスクリプトが、気がつけば多数のDOM操作、至る所で宣言される変数、どこから実行されるか分からない関数群で無秩序に膨れ上がり、頭を抱えることになる(そうならないようにするのがウェブフロントエンジニアがいるひとつの理由ですが…)。 これらのケースでは、まずは修正、あるいは
天野仁史 - Wikipedia
天野 仁史（あまの ひとし、1982年1月7日[1] - ）は、日本のソフトウェア技術者、ブロガー。石川県出身[2]。2018年5月よりスマートニュース株式会社に勤務。 概要[編集] JavaScriptで実装されたDOM 3 XPathエンジン「JavaScript-XPath」の開発や、ブログ『IT戦記』で知られ、技術者向けイベントでの講演や、技術雑誌での執筆活動も行っている。 小飼弾は著書[要出典]で天野をアルファギークの一人として取り上げ、JavaScriptは天野から教わったようなものだとも述べたとされる[3]。 経歴[編集] 2003年 - 石川工業高等専門学校 卒業 2003年 - 岩通ソフトシステム株式会社に入社 2005年12月 - 株式会社ガイアックスに入社[2] 2005年12月 - ブログ「IT戦記」を開設[4] 2007年 - Developers Summit
Javascript: オブジェクトの属性を全部表示する
Web上のコードを参考にするとtypoのせいで、あるはずの属性が無かったりする。 そんな時の確認用。 var dumpObj = function(o){ var str = ""; for(var i in o) { str = str + "\n" + i + "\t"+ o[i]; } alert(str); } 再帰的に全部表示したいとか、文字コード順にソート表示したい時はこちらのコードが参考になる ⇒ JSON的なダンプをとる関数を作ってみた@ 考え得る最高を常に行う
Document: querySelector() メソッド - Web API | MDN
Document Object ModelDocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheets (en-US)alinkColor 非推奨 all 非推奨 anchors 非推奨 applets 非推奨 bgColor 非推奨 bodycharacterSetchildElementCountchildren (en-US)compatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomain 非推奨 embedsfeaturePolicy Experimental fgColor 非推奨 firstElementChild (en-US)fontsformsfragmen
ノードリスト(HTMLCollectionやNodeList)操作中に注意すべきこと - まなぶろぎーく。
JavaScriptで複数のHTMLElementを取得し、その全てにイベントを設定しようとした場合 意識していないと案外ハマりそうな落とし穴を見つけたのでメモ。 個人的には理由に気づくまで「？？？」だったんですが、よくよく考えると当たり前の事実。。。 サンプルに以下のHTMLを用意してみました 簡単な５つの画像を表示するHTMLがあるとします。 ただし、すべてデフォルトではloading画像が表示され、本来表示する画像ではありません。 <html> <body> <h1>HTMLCollectionとイベント同時処理テスト</h1> <div> <img id="after1" name="replace" src="loading.gif" /> <img id="after2" name="replace" src="loading.gif" /> <img id="after3"
getElementsByTagName: mx-Lab
◆document.getElementsByTagName メソッド collection = document.getElementsByTagName(tagname); nodelist = document.getElementsByTagName(tagname); 指定された DOM(Document Object Model) 形式のドキュメント document から、tagName プロパティが引数（文字列）tagname であるエレメントに対する、Element クラス（またはそのサブクラス）のコレクション collection、またはノードリスト nodelist を返します。 タグ名ですから、getElementsByTagName('a'); とか、getElementsByTagName('body'); なんてこともできちゃいます。 該当するインスタンスが存
完全に状況を掌握した画像の遅延読み込みの実現 - latest log
IE8の挙動について追記しました。 IE8は、img.complete は 画像読み込みでも true になりません(falseのままです)。 そのかわり、img.readyState が "complete" になります。 JavaScriptでの画像の動的/遅延読み込みといえば (new Image).src = URL; なんですが、 タイムアウトやエラーの状況を把握したい時もあったりします。GoogleMapライクなアプリを作ってるときとか。 今回ちょっと必要になったのでまずは調査から。 以下のコードで、存在しないファイル(missing.jpg)を読み込ませ、実行経路を確認してみます。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://w
.aspx)
Internet Explorer リーク パターンを理解して解決する
Justin Rogers Microsoft Corporation June 2005 日本語版最終更新日 2006 年 2 月 3 日 Web 開発者の進化 以前は、メモリ リークは Web 開発者にとって大きな問題ではありませんでした。ページは比較的単純に保たれ、サイト内の異なるロケーション間のナビゲーションは解放されたメモリをクリーンアップするうえで優れた方法でした。リークがあった場合も、たいていは気付かないほど小さなものでした。 新しい Web アプリケーションは、より高い標準に従います。ページはナビゲートされずに何時間も実行され、Web サービスを通じて更新情報を動的に取得する場合があります。複合イベント スキーム、オブジェクト指向の JScript、およびアプリケーション全体を生成するためのクロージャを組み合わせることで、言語機能が限界点に達します。これらの変更およびその他
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで、html上のとあるclassを持つ要素を軒並み非表示にしたいとき - Qiita
getBaseURL() javascript call function in a href=""
How to get the containing form of an input?
Javascript/オブジェクトに指定したプロパティが存在するか確認する - 俺の基地
Document: getElementsByClassName() method - Web APIs | MDN
JavaScriptからDOM - Webデザイン初心者の勉強 | Web勉強法