[B! JavaScript][DOM] mhrsのブックマーク

mhrs id:mhrs

JavaScriptとDOMに関するmhrsのブックマーク (19)

『DOM Scripting 標準ガイドブック』を読んだ - blog.8-p.info
まえに人におすすめされて少しだけ借りて読んだ DOM Scripting: Web Design with JavaScript and the Document Object Model という本があって、それの日本語訳の『DOM Scripting 標準ガイドブック』が売っていたので買って読んだ。初版が2007年6月なので、最近出た本じゃないです。文法まわりは微妙 2章の JavaScript の文法に対する記述はあんまりうなづけないところがある。変数名が snake_case なのは趣味の問題だけどたぶん lowerCamelCase のほうが多数派。配列を var beatles = Array("ジョン", "ポール", "ジョージ", "リンゴ"); とするほうが [] より「良い」(p.33) とも思えないし、連想配列がほしいときに {} じゃなくて var lennon
mhrs 2009/01/18
「ちゃんとマークアップされた文章に対して段階的強化 (progressive enhancement) として振る舞いを追加する」なんてまともで「素敵」な事が書いてあるらしい本について。isbn:9784839922375

programming

DOM

JavaScript
リンク
はてなブログ | 無料ブログを作成しよう
（娘５歳８ヶ月）娘の好物と年長さん１学期のお弁当記録娘をただ微笑ましく見つめていただけなのに……（夫）こっこの最近の好物は「にんじんしりしり」と納豆を混ぜて食べること。我が家のしりしり＆納豆好きといえばまず夫ですが、夫は卵入りのしりしりが好きで、こっこはにんじんとツナのしりしりが好き。わたしはどっち…
mhrs 2007/07/06
リンク切れ

DOM

DOM3

DOM Load and Save

JavaScript
リンク
DOM Level 2/3 標準技術をMSIEで使う(XML読み込みとXPath) @ ぽかぽかWeb研究室
XML 文書読み込みの準備 XML 文書を読み込んで DOM オブジェクトとして扱うためには、 MSIE では ActiveXObject, Mozilla では createDocument() メソッドを使い、 XML 文書を格納するための「箱」を用意する必要があります。本来はMSIE/Mozilla いずれでも document.implementation.createDocument が使えるようにすれば良いのですが、イベント定義の時と同様の方法は使えないため、ここでは、次善策として、 document.Implementation.createDocument() メソッドが使えるようにしたいと思います。注意 MSXML 2.5 以前(WinIE 5.5SP2以前に同梱)では XPath がフルサポートされていないため、(関数を用いた)複雑なXPathを使おうとするとスク
mhrs 2007/05/06
互換性

IE

xpath

DOM

jscript

JavaScript
リンク
DOM Level 2 標準技術をMSIEで使う(イベント、基本操作) @ ぽかぽかWeb研究室
はじめに HTML/XML文書を動的に制馭するするためにはDOMが用いられることが多いわけですが、ことに X(HT)ML を取り扱う上では、どうしても DOM Level 1 の範囲だけでは力不足です。また、イベント制馭は Level 1では定義されていません。 MSIE では、基本的には DOM Level 1 までのサポートに留まっています。それ以外の振舞は独自規格で賄われているのが現状で、このことが、「処理系に依存しない記述」を妨げる原因にもなっています。 Mozilla/Netscape では、 (XHTML文書も含めて)XMLとして認識された文書では、名前空間が重要な役割を果たします。例えば、 XHTML の要素を正しく作成するためには createElementNSが必要になりますが、これは MSIE では認識されません。具体的な方法ここでは、 JavaScript(ECM
mhrs 2007/05/06
addEventListener(), removeEventListener(), createElementNS()をIEで實裝する例。

互換性

IE

DOM Events

DOM

jscript

JavaScript
リンク
DOM Elementオブジェクトをテキストダンプしてデバッグ - hogehoge @teramako
DOM APIを使用して作ったDOMツリー、うまく生成されているか見てみたい事は多々ある。少なくともオイラはある。簡単にテキスト表示してくれると嬉しいなぁと常々思っていたのだが発見した。 Firefox（というかMozilla系かな）限定だろうけどXMLSerializerがあるのだ。使い方は簡単。 var serializer = new XMLSerializer(); //略 var root = document.createElement('div'); var anchor = document.createElement('a'); var aText = document.createTextNode('はてな'); anchor.setAttribute('href','http://www.hatena.ne.jp/'); anchor.appendChild( aT
mhrs 2007/05/03
XMLSerializer。

JavaScript

DOM

XML
リンク
XPath, $X function, NSResolver < 16 < March < 2006 < nulog, NULL::something : out of the headphone
JS の XPath なんて書きましたけど、重大なバグがありまして、っていうかなんで気がつかなかったんだろう、えーそれは application/xhtml+xml なページ、すなわち XML として、名前空間をちゃんと扱うページではまともにセレクトできないんですよーははははー、例えばこのサイトとかね。 $X = function (exp, context) { if (!context) context = document; var resolver = function (prefix) { var o = document.createNSResolver(context)(prefix); return o ? o : (document.contentType == "text/html") ? "" : "http://www.w3.org/1999/xhtml"; } v
mhrs 2007/05/02
$X(): document.evaluate()周りをサブルーチン化。

JavaScript

xpath

DOM
リンク
はてなブログ | 無料ブログを作成しよう
かき氷の代わりに、大根おろしを食べているかき氷代わりの大根おろし・なめ茸味先日、スーパーへいったときのことだ。突如、体調がおかしくなった。店内は、親の敵ほどクーラーががんがんに効いているにもかかわらず、体が熱いのだ。こめかみを締め付けるような頭痛もする。既視感のある異変である。あっ、こ…
mhrs 2007/05/02
iframeで。

firefox

JavaScript

HTML

DOM
リンク
HTMLDocumentを(かなり無理矢理)生成する方法がわかったのでGM_xmlhttpRequestでwell-formedじゃないHTMLのコードを取ってきて新しく生成したHTMLDocumentでパースしてみるよ
2025年7月に読んだ本とか最近のようす辛いものを食べまくっていたら久しぶりに痔になり、くるしんでおります。こうも暑いと辛いものが食べたくなるけど、みなさん刺激物の取りすぎには気をつけましょうね。写真は新潮文庫買ったらもらえたしおり最近のようす小説『割れたグラス』アラン・…
mhrs 2007/05/02
「<output method="html"/>」なXSLでHTMLDocumentオブジェクトを作成し、RangeのcreateContextualFragment()でタグテキストから生成した斷片をappendChild()。

firefox

JavaScript

xslt

HTML

DOM
リンク
getElementsByClassName on Gecko: Days on the Moon
Gecko に Web Applications 1.0 の getElementsByClassName メソッドが実装されました (Bug 357450)。Firefox 3 から使用可能になります。document.getElementsByClassName で文書全体から、または element.getElementsByClassName である要素の子孫要素から、特定のクラス名を含む要素を探し出すことができます。引数は空白文字区切りでクラス名のリストを表す文字列。複数のクラス名が指定された場合はそれらすべてを持つ要素のリストが返ります。現時点の Web Applications 1.0 仕様では、複数のクラス名を収めた配列も引数として使えることになっていますが、それは実装されていません (一口に「配列」といってもプログラミング言語ごとに実際のデータ構造が異なるから?)。な
mhrs 2007/02/04
NodeListをArrayに變換するTipとか。(MEMO: getElementsByClassName()は “Web Applications 1.0” だったのか成程。道理でW3C DOMを探しても見つからない訣だ)

WHATWG

DOM

firefox

Gecko

JavaScript

MEMO

Tips
リンク
HTMLWalker - Personnel
HTMLWalkerは、簡単シンプルなJavaScriptのコンストラクタ関数で、JavaScriptによるDOMスクリプティングを補助します。インスタンスのwalkメソッドは、指定したノードから出発して文書順にノードを辿り、その都度nodeNameアトリビュートに基づいてハンドラを呼び出します。雰囲気としてはDOM Level 2のNodeIteratorインターフェイスに似ていますが、それより低機能かつシンプルなもので、DOM Level 1 HTMLの実装だけを要求します： HTMLWalker.js Foot note この記事のURI参照 http://members.jcom.home.ne.jp/jintrick/Personal/DOM_HTMLWalker.html#WHAT
mhrs 2006/10/12
HTMLのDOMツリーをトラヴァースするJavaScriptライブラリ。「DOM Level 1 HTMLの実装だけを要求」。(PURL: http://purl.org/jintrick/Personal/DOM_HTMLWalker.html )

DOM

HTML

JavaScript

library
リンク
js-html - JavaScriptを用いたHTMLの省略記法 - Personnel
次のHTML文書の断片をDOM APIを利用して生成してみます： <div class="container" id="foo"> <h2>だいあろぐ</h2> <label> <input type="button" onclick="alert(true)" /> </label> </div> 実際にやってみると次のようになります（一例）。 var div = document.createElement('DIV'); var h2 = document.createElement('H2'); h2.appendChild(document.createTextNode('だいあろぐ')); div.appendChild(h2); var label = document.createElement('LABEL'); var input = docu
mhrs 2006/10/11
關聯: http://purl.org/jintrick/Personal/HTMLBuilder.html (PURL: http://purl.org/jintrick/Personal/js-html.html )

DOM

HTML

JavaScript
リンク
[暴満館] 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 ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
mhrs 2006/08/27
『JavaScriptでCSSを弄る際のメモ』シリーズの纏め。DOM Style實裝のブラウザ毎の差、それによる使用上の注意。

DOM Style

DOM

CSS

JavaScript
リンク
ふぁっきん not well-formed, XMLHttpRequest とかで < 19 < June < 2006 < nulog, NULL::something : out of the headphone
GreaseMonkey では GM_xmlhttpRequest で他のページとってくるじゃないですか。で、onload して req.responseXML をとるなり req.responseText をとるなりするけど、どうにもこうにも not well-formed なページ (HTML とか) をとってきてノード検索するとき面倒くさいんですよ。responseXML はもちろん空だし、responseText はもちろんただのテキストだし。で、なんとなく思いついたので以下のように解決するようにした。 GM_xmlhttpRequest({ method : "GET", url : i.href, onload : function (req) { // てきとーなエレメント作って突っ込む (ブラウザにパースさせる) var d = document.createElemen
mhrs 2006/06/19
XMLHttpRequestでgetした「not well-formed なページ (HTML とか)」のresponseTextをDOMオブジェクトに變換する裏技。「はてなとかはてなとかはてなとか。」

XMLHttpRequest

DOM

JavaScript
リンク
MozillaDOMの不思議 style.display をいじるよりappendChildの方が早い - nazokingのブログ
GreaseMonkeyをいじっていたんですが、２ちゃんねるのスレッド一覧をインクリメントサーチするスクリプトを書いてたんです。 // as は検索したい文字列のリスト // as[i].element は文字列に対応する A エレメント // ↑はdocument.getElementsByTagName('A')で取得 // v は検索文字列 for( var i=0; i<as.length; i++ ){ if( v=='' || as[i].indexOf( v )>-1 ){ as[i].style.display=''; }else{ as[i].style.display='none'; } }とまあ、こんなかんじ。で、そこそこ動いていたんで、気に入ってまちBBSでも動くようにしてみたら、やたらと時間がかかるです。まちBBSのスレッド一覧ではスレッド数が1000以上あるか
mhrs 2006/01/07
DOM

JavaScript

firefox

mozilla
リンク
Hawk's W3 Laboratory : XML : JavaScriptでXMLを扱う方法
mhrs 2005/12/23
DOM

xml

JavaScript
リンク
アクセスキーに関する実験その2
mhrs 2005/11/17
文書側で設定されてゐるアクセスキーを *DOMで* 殺す實檢其の二 Mozilla篇。(PURL: http://purl.org/jintrick/Personal/accesskey_dom2.html )

DOM

JavaScript

mozilla
リンク
アクセスキーに関する実験
mhrs 2005/11/17
文書側で設定されてゐるアクセスキーを *DOMで* 殺す實檢。(PURL: http://purl.org/jintrick/Personal/accesskey_dom.html )

DOM

JavaScript
リンク
XUL Apps > Tips > 要素の内部テキストを得る - outsider reflex
HTML を操作するスクリプトでは elem.innerHTML や elem.innerText のようなプロパティが使えれば便利なのですが、 Mozilla には innerText がありません。こういう場合、自分で似たような関数を作っておくと便利です。以下は、再帰処理を使った例。 function getInnerText(node) { var nodes = node.childNodes, ret = []; for (var i = 0; i < nodes.length; i++) if (nodes[i].hasChildNodes()) ret.push(getInnerText(nodes[i])); else if (nodes[i].nodeType == Node.TEXT_NODE) ret.push(nodes[i].nodeValue); else i
mhrs 2005/09/08
DOM

JavaScript

mozilla
リンク
DOM Rangeについて色々 - Personnel
mhrs 2005/05/08
DOM Coreのみを使って書いたコードとDOM Rangeを使ったコードの比較。

JavaScript

DOM Range

DOM Core

DOM
リンク
1