1. パートナーコース#2 Javascript
(17) html要素の選び方
ver.1.0 1

2. 17-0.html 前回の復習
function start(){
setInterval(show_time, 100);
}
function show_time(){
var now = new Date();
var message = document.getElementById("message");
message.innerHTML = now.getHours() + "時" +
now.getMinutes() + "分" +
now.getSeconds() + "秒";
}
setInterval(show_time, 100)という書き方で、
show_time()関数を100ミリ秒ごとに繰り返す。
ver.1.0 2

3. 17-1.html getElementById
html
<div id=“div1” class=“sample”>これはdiv1です。</div>
script
function getelement(){
var div1 = document.getElementById(“div1”);
alert(div1.innerHTML);
alert(div1.id);
}
document.getElementByIdを使うと、id属性でhtmlの要素を指定で
きます。
同じidはhtmlファイルの中にひとつしかありません。
ver.1.0 3

4. 17-2.html getElementsByClassName
html
<div id="div1" class="sikaku">これはdiv1です。</div>
<div id="div2" class="sikaku">これはdiv2です。</div>
<div id="div3" class="sikaku">これはdiv3です。</div>
script
function getelement(){
var divs = document.getElementsByClassName("sikaku");
var len = divs.length;
for(var i = 0; i < len; i++){
alert(divs[i].id);
}
}
document.getElementsByClassNameを使うと、class属性でhtmlの
要素を指定できます。
classはいくつにでも付けられるので、配列が返されます。
ver.1.0 4

5. 17-3.html getElementsByTagName
html
<div id="div1" class="sikaku">これはdiv1です。</div>
<div id="div2" class="sikaku">これはdiv2です。</div>
<div id="div3" class="sikaku">これはdiv3です。</div>
script
function getelement(){
var divs = document.getElementsByTagName(“div");
var len = divs.length;
for(var i = 0; i < len; i++){
alert(divs[i].id);
}
}
document.getElementsByTagNameを使うと、タグ名でhtmlの要素
を指定できます。
getElementsByClassNameと同じように配列が返されます。
ver.1.0 5