getElementsByTagName()メソッド 2
getElementsByTagName()メソッドは指定したHTMLタグをオブジェクト内から全て抽出し、NodeListに格納する。
構文は「 NodeList = オブジェクト名.getElementsByTagName("HTMLタグ名")」
■ボタンを押すとします
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
getElementsByTagName()メソッドは指定したHTMLタグをオブジェクト内から全て抽出し、NodeListに格納する。
構文は「 NodeList = オブジェクト名.getElementsByTagName("HTMLタグ名")」
■ボタンを押すとします
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 |
Sample Source......................................................................>>>
<style type="text/css">
<!--
span.style1{color:black;}
span.style2{color:red;font:bold 18px;}
-->
</style>
<script language="JavaScript"><!--
flg1 = true; //動作切り替え用のﾌﾗｸﾞ変数
function Tags(){
fonts = document.getElementsByTagName("font");//ﾍﾟｰｼﾞ内の全てのfont要素をｺﾚｸｼｮﾝで取得
if (fonts!=null) {
if(flg1){
for(var i=0; i<fonts.length; i++){
fonts[i].style.color="red"; //ﾌｫﾝﾄ色
fonts[i].style.textDecoration="underline"; //下線
}
btn1.innerText = "元に戻します"; //ﾎﾞﾀﾝのﾗﾍﾞﾙを替える
flg1 = !flg1;
}else{
for(var i=0; i<fonts.length; i++){
fonts[i].style.color="";
fonts[i].style.textDecoration="";
}
btn1.innerText = "ボタンを押してみて下さい";
flg1 = !flg1;
}
}
}
flg2 = true; //動作切り替え用のﾌﾗｸﾞ変数
function Change(){
tb = document.getElementById("tbe"); //id名が"tbe"のｵﾌﾞｼﾞｪｸﾄを取り出す
tb_span = tb.getElementsByTagName("span");//TABLE内に存在するの全てのSPAN要素をｺﾚｸｼｮﾝで取得
if(flg2){
for(var i=0; i<tb_span.length; i++)tb_span[i].className="style2";//Class名変更
btn2.innerText = "元に戻";
flg2 = !flg2;
}else{
for(var i=0; i<tb_span.length; i++)tb_span[i].className="style1";//Class名変更
btn2.innerText = "偶数だけ変化";
flg2 = !flg2;
}
}
//--></script>
</head>
<body>
<p>■<font>getElementByTagName()メソッド</font>は指定した<font>HTMLタグ</font> をオブジェクト内から全て抽出し、配列形式の<font>コレクション</font>に格納する。 構文は「 <font>コレクション = オブジェクト名.getElementsByTagName(HTMLタグ名)</font>」<br><br>
<button id="btn1" onclick="Tags()">ボタンを押してみて下さい</button> </p>
<p>■ボタンを押すと<button id="btn2" onclick="Change()">偶数だけ変化</button>します</p>
<table id="tbe" width="50%" border="1" cellspacing="1" cellpadding="3">
<tr>
<td>1</td>
<td><span>2</span></td>
<td>3</td>
<td><span>4</span></td>
<td>5</td>
</tr>
<tr>
<td><span>6</span></td>
<td>7</td>
<td><span>8</span></td>
<td>9</td>
<td><span>10</span></td>
</tr>
<tr>
<td>11</td>
<td><span>12</span></td>
<td>13</td>
<td><span>14</span></td>
<td>15</td>
</tr>
<tr>
<td><span>16</span></td>
<td>17</td>
<td><span>18</span></td>
<td>19</td>
<td><span>20</span></td>
</tr>
</table>