cloneNodeによる要素の組み立て
そこでオススメなのが,
テンプレート用HTML
<ul id="twitter-search-t2" style="display:none;">
<li>
<a class="usr">
<img width="48" height="48"><br>
<span>boosim</span>
</a>
<p class="entry"></p>
<div class="time"><a></a></div>
</li>
</ul>
このHTMLをベースに,
cloneNode方式の組み立て
var _t=document.getElementById('twitter-search-t2');
var tmpl = _t.getElementsByTagName('li')[0];
function TwitterCallback2(data){
var div = document.getElementById('twitter-search-r2');
/* 前回の結果がある場合に削除 */
while (div.firstChild) {
div.removeChild(div.firstChild);
}
var results = data.results;
var ul = document.createElement('ul');
ul.className = 'twl';
for (var i = 0, len = results.length;i < len; i++){
var usr = results[i];
var user = usr.from_user;
/* 要素を作る */
var li = tmpl.cloneNode(true);
var link = li.getElementsByTagName('a')[0];
var icon = link.getElementsByTagName('img')[0];
var name = link.getElementsByTagName('span')[0];
var entry = li.getElementsByTagName('p')[0];
var time = li.getElementsByTagName('div')[0];
var timelink = time.getElementsByTagName('a')[0];
/* CSS用にclassを設定 */
li.className = ((i+1)%2) ? 'odd' : 'even';
/* リンクや画像などの属性を設定 */
link.href = 'http://twitter.com/' + user;
var src = usr.profile_image_url;
if (src.indexOf('http') === 0) {
icon.src = src;
}
icon.width = 48;
icon.height = 48;
timelink.href = 'http://twitter.com/' +
user +'/status/' + usr.id;
var d = new Date(usr.created_at);
var date = d.getFullYear() + '/' + (d.getMonth()+1) +
'/' + d.getDate() + ' ' + d.getHours() + ':' +
('0'+d.getMinutes()).slice(-2);
/* テキストノードの挿入 */
entry.appendChild(document.createTextNode(usr.text));
timelink.appendChild(document.createTextNode(date));
name.appendChild(document.createTextNode(user));
/* 要素の組み立て */
ul.appendChild(li);
}
/* 画面に反映 */
div.appendChild(ul);
}
var b2 =document.getElementById('twitter-search-b2');
b2.onclick=function(){
var script = document.createElement('script');
script.src = 'http://search.twitter.com/search.json'+
'?callback=TwitterCallback2&lang=ja&q=JavaScript';
document.body.appendChild(script);
}
ご覧の通り,
またパフォーマンスの点でも,
なお,
また,
IE6でmin-heightを使う方法とは,
min-heightの代替ハック
li p.entry{
min-height:60px;
}
/*スターハック IE6(とIE7の互換モードなど)のみに適用*/
* html li p.entry{
height:60px;
}
なお,
まとめ
今回はDOM操作の実例に触れてみましたが,
次回はJavaScriptから操作するCSSを中心に取り上げる予定です。