Firefox 3が対応するwidthプロパティの新しい値
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20371722,00.htm
- widthプロパティの値 横幅の大きさ
【A】 -moz-max-content コンテンツが取り得る最大幅（Intrinsic preferred width）
【B】 -moz-min-content コンテンツが取り得る最小幅（Intrinsic minimum width）
【C】 -moz-available 表示に利用可能な幅
【D】 -moz-fit-content 内容にフィットさせた幅
かなり以前に書いたものですが、DOM以降のブラウザで、かつ、最新流行のライブラリでは動作しない環境(たとえば、携帯やスマートフォンのブラウザなど)で基礎的なDOMスクリプトを書くときに、結構役に立つので、リンクにまとめておきます。
|
| DOM Samples /Core Node/nextSibling |
| ツリー状のノードは、親-子...といった縦のつながりになっていますが、それぞれの世代?レベルには横方向に兄弟(姉妹)も存在しています。今回は、そんな兄弟ノードのnextSiblingです。 |
| http://allabout.co.jp/internet/javascript/closeup/CU20040515A/index.htm |
|
| DOM Samples /Core Node/parentNode |
| DOMの仕様にそってサンプルを連載します。今回はNodeインターフェイスのparentNode、つまり親ノードについてです。 |
| http://allabout.co.jp/internet/javascript/closeup/CU20040322A/index.htm |
|
| DOM Samples /Core Node/nodeValue |
| DOMの仕様にそってサンプルを連載します。今回はNodeインターフェイスのnodeValueです。文字通り、対象ノードの値を取得または設定するのに使います。 |
| http://allabout.co.jp/internet/javascript/closeup/CU20040317/index.htm |
|
| DOM Samples /Core Node/nodeType |
| DOM(Document Object Model)の仕様にそってサンプルを連載します。今回はNodeインターフェイスのnodeTypeです。 |
| http://allabout.co.jp/internet/javascript/closeup/CU20040307/index.htm |
|
| DOM Samples /Core Node/nodeName |
| DOM(Document Object Model)の仕様にそってサンプルを連載します。今回はNodeインターフェイスのnodeNameです。 |
| http://allabout.co.jp/internet/javascript/closeup/CU20040306/index.htm |
| シリーズ |
| DOM Samples /Core (1) |
| DOM Samples /Core |
| http://allabout.co.jp/internet/javascript/subject/msubsub_series_javascript03.htm |
|
| DOM Samples /Core (2) |
| DOM Samples /Core |
| http://allabout.co.jp/internet/javascript/subject/msubsub_series_javascript03_2.htm |
|
| DOM Samples /Core (3) |
| DOM Samples /Core |
| http://allabout.co.jp/internet/javascript/subject/msubsub_series_javascript03_3.htm |
All About サイト内 「DOM Samples」 検索結果
jQueryの作法の基本は、セレクタなどで検索して、メソッドチェーンの連結による再帰的処理を行います。そのメソッドの戻り値は、 jQueryインスタンス を返してくれますが、DOM Element は返してくれません。
したがって、たとえ#ID名で検索したとしても、そのまま、いつものDOM操作のような次のようなことはできません。
$("#testId").innerHTML="hogehoge" //使えません
その代わり、豊富なメソッドを持つjQueryオブジェクトを返すのでそれで処理してね。というわけです。
たとえば、次のように書けば、検索したDOM要素へHTMLを書き込むことができます。
$("#testId").html("hoge<b>hoge</b>")
でも、今までのコード資産や他のライブラリと組み合わせる時には、このままでは使いにくいので、普通のDOMElementをどうすれば手に入れられるのかみてみます。
実は、$("#testID")とした時に生成し返される配列があります。それは、たとえば、次のようなものです。
[div#testID]
(このdiv#testIDは、DOMElementオブジェクトです)
さらに、複数の要素が返るタイプのセレクタ(たとえば$(".ccc")とか)を使うとこうです。
[div#aaa.ccc, div#bbb.ccc,....(略)....]
つまり、検索された要素がすべて収まった配列です。この配列はクリーンな配列で、検索した要素だけが収まっています。ｊQueryインスタンス内の各メソッドは露出しません。
もうわかりましたね(^^。検索された、たとえば最初の要素は、次のようにして取り出せます。
$(".ccc")[0]
[0]のインデックス番号を変えれば次々と取り出せますし、$(".ccc").lengthで検索した要素の数も返ってきますので、次のような書き方もできます。
ary=$(".ccc");
for(var i=0;i<ary.length;i++)alert(ary[i].innerHTML)
また、jQueryのメソッドeachを利用して書くこともできます。
$(".ccc").each(function(index,nodeOj){
this.innerHTML="dddd"
})
（ちなみに、この第二引数nodeOjとthisは同じです）
で、ｊQueryにはこれを取り出すgetというメソッドもあり、次のように使えます。
$(".firstHeading").each(function(index,nodeOj){
$(".ccc").get()//配列が返ります
$(".ccc").get(0)//0番目の要素が返ります
})
したがって、たとえば、0番目の要素の中身は、innerHTMLで次のように書き換えることもできるわけです。
$(".ccc").get(0).innerHTML="ok 書き換わりました"
まぁ、jQueryの作法に従わないと、美しくは書けないかもしれませんが ( jQueryの作者自身はjQueryをダーティと謙遜してますけど )、知っておくと多少は役に立つかなぁ。
ちなみに、私はjQueryの中にはクロスブラウザなどのための物凄いダーティTips?がたくさん詰めこまれていますが、それらを統合した成果であるjQueryは美しいと思います。
そこをjQueryが引き受けたお陰で、使う人は、こんなに簡単で安全に書けるわけです。
デスクトップやノートに比べて、マシン性能が劣り、パケット節約の必要なケースもあるスマートフォンこそAjaxが役に立つかも、ということで、少し試しているのですが、Windows Mobile 5.0搭載のX01HTで試した結果、createElement×、insertBefore×、ってことで、XHRは動作しても、DOM1以降は駄目かも(^^;;という状況です。
そこで、めげずに、昔なつかし、DOM0に作り変えて試したらOK。、、、複雑な気持ち。
もちろん、X01HTのWM5だけではなく、WinIEはじめ、 Mac Linuxの Safari1、Safari2、Opera8などでも一通り問題なく動作します。＜NetScapeのDOM0が消えた今となっては、もう、
DOM0で良いんではないのか^^？
それにしても、こういうデータを、モバイルツールでどこに居ても見れるというのは魅力的。
X01用、Ajaxで動的なテーブル書き換え
http://jsgt.org/about/cu/CU20061215A/test1.htm
使用ライブラリ:
jslb_ajax0511_c.js (1.9k)
Ajaxで読み込んでいるファイル:
sansu.txt、
kokugo.txt、
rika.txt、
syakai.txt、
eigo.txt
参考:
動的なテーブル書き換え (JSON)
http://allabout.co.jp/career/javascript/closeup/CU20050630A/index.htm
Ajax 動的なテーブル書き換え2 (+PHP)
http://allabout.co.jp/career/javascript/closeup/CU20050715A/index.htm
動的なテーブル書き換え3(XML)
http://allabout.co.jp/career/javascript/closeup/CU20051030A/index.htm
富嶋＠ITM ( 2006年12月21日 12:35 )
こんにちは。富嶋＠ITMです。本日公開のAjaxうきうきWatchで掲載させていただきます。来年もよろしくお願いします。
高橋 ( 2006年12月21日 14:16 )
こんにちは。こちらこそ、よろしくお願いいたします〜。
(←clickで入力欄open)
Document Object Model (DOM) Level 3 Events Specification
Version 1.0
W3C Working Draft 13 April 2006
http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/
Appendix E: ECMAScript Language Binding
http://www.w3.org/TR/2006/WD-DOM-Level-3-Events-20060413/ecma-script-binding.html
#頭痛くなるのは私だけ？
length プロパティのパフォーマンス
http://nanto.asablo.jp/blog/2006/02/
#もし、getElementsByTagNameでNodeList を作ったら、lengthで回すときは、NodeList.length を使わずに、配列化してからarray.lengthで使った方が早いよ、というベンチマークです。というか、IEでは、NodeList がとんでもなく遅いよ、という話ですね。
class属性値をgetAttributeで取るときは、下記に注意。すっかり忘れてました(^^;
oj.getAttribute('class') ←FireFox,Opera,Safari
oj.getAttribute('className') ←IE
クロスブラウザな書き方は下記でOK
oj.getAttribute('class')||oj.getAttribute('className')
例
if(oj.getAttribute('class')||oj.getAttribute('className')=='xxx'){ ... }
if((oj.getAttribute('class')||oj.getAttribute('className'))=='xxx'){ ... }
nagi ( 2006年01月18日 10:24 )
oda さんの仰るとおり、 == の方が || より優先されますね。
var attr = oj.getAttribute('class')||oj.getAttribute('className')=='xxx';
とすると、
Gecko では、 attr には属性値が入り、
Trident では、属性値が 'xxx' と等しいか評価した結果（boolean）が入るようです。
意図通りの分岐を書くなら、
if ( ( oj.getAttribute('class')||oj.getAttribute('className') ) == 'xxx' ){ ... }
ですかね。
高橋 ( 2006年01月18日 12:41 )
おぉ、なんと素早いつっこみありがとうございます(^^;;
直しました。
(←clickで入力欄open)
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
