JavaScript本格入門を読む・7
3日やってなかっただけで久々感。
6月は暇だったけど、なんか7月は忙しいなぁ。
7-3.属性値を取得/設定する
多くの属性は「要素ノードの同名のプロパティ」としてアクセスできる。
・HTMLとJavaScriptとで名前の相違を意識する必要がない
・取得/設定する属性名を、スクリプトから動的に変更できる
不特定の属性を取得する
window.onload =function(){
var logo =document.getElementById('logo');
var attrs =logo.attributes;
var result =[];
for (var i = 0; i<attrs.length; i++){
var attr =attrs.item(i);
if(attr.nodeValue){
result.push(attr.nodeName + ':' +attr.nodeValue);
}
}
window.alert(result.join('\r\n'));
}
（中略）
<img id="logo" src="http://uni.res.nimg.jp/img/zero_index/logo.png"
height="42" width="245" border="0"
alt="niconico" />出来たけど、何に使うんだろこれ
ノードを追加/置換/削除する
innerHTMLプロパティとどのように使い分けるか
・シンプルなコンテンツの編集→innerHTMLプロパティ
・複雑なコンテンツの編集→本節のアプローチ
新規にノードを作成する
function add(f) {
var anchor = document.createElement('a');
anchor.href = f.url.value;
var name = document.createTextNode(f.name.value);
anchor.appendChild(name);
var br = document.createElement('br');
var list = document.getElementById('list');
list.appendChild(anchor);
list.appendChild(br);
}
（中略）
<label>サイト名：
<input type="text" name="name" size="30" />
</label><br />
<label>URL:
<input type="text" name="url" size="50" />
</label><br />
<input type="button" value="追加" onclick="add(this.form)" />
</form>
<div id="list"></div>わーいなんか動的やで・・・
かっこいい・・・
既存ノードを置換/削除する
function show(e,chid){
var img =document.createElement('img');
img.src ='http://ch.res.nimg.jp/img/system/blog/' +chid +'.jpg';
img.alt = e.innerHTML;
img.height =320;
img.width =240;
var pic =document.getElementById('pic');
if(pic.getElementsByTagName('img').length >0){
pic.replaceChild(img.pic.lastChild);
} else{
document.getElementById('del').disabled =false;
pic.appendChild(img);
}
}
function del(){
var pic =document.getElementById('pic');
pic.removeChild(pic.lastChild);
document.getElementById('del').disabled =true;
}
（中略）
<ul>
<li><a href="JavaScript:void(0)" onclick="show(this, 'ch2526250')">
マックスむらいチャンネル</a></li>
<li><a href="JavaScript:void(0)" onclick="show(this, 'ch2567654')">
『ライフログ』生主ブロマガ</a></li>
<li><a href="JavaScript:void(0)" onclick="show(this, 'ch2584861')">
MSSPブロマガ</a></li>
<li><a href="JavaScript:void(0)" onclick="show(this, 'ch2571478')">
アイドルマスター ミリオンラジオ！</a></li>
</ul>
<input type="button" id="del" value="削除"
disabled="disabled" onclick="del()" />
<div id="pic"></div>サンプルをちょっと変えてみて、
ブロマガ - ニコニコチャンネル
の著名人週間ランキングの上位の画像をとってくるやつにしてみた。
サンプルそのままじゃなくて、ちょっと変えることが出来るようになったの我ながら進化すぎるわ。すげーわ・・・
（自分で自分を褒めだした）
7-5.JavaScriptからスタイルシートを操作する
インラインスタイルにアクセスする
function changeStyle(elem,color){
elem.style.backgroundColor = color;
}
（中略）
<div onmouseover="changeStyle(this,'Pink')"
onmouseout="changeStyle(this,'White')">
マウスを乗せると色が変わります。
</div>
外部スタイルシートを適用する
.highlight {
background-color: pink;
}
.normal {
background-color: White;
}function changeStyle(elem,color){
elem.style.backgroundColor = color;
}
（中略）
<div onmouseover="changeStyle(this,'Pink')"
onmouseout="changeStyle(this,'White')">
マウスを乗せると色が変わります。
</div>おお！すっきり！
