我們繼續介紹一些常用語法
1. 用ID取得HTML物件
這是一個常常用到的語法
我們需要對HTML做一些操作
就必須要先找到那個物件
ID的觀念是唯一值
所以用ID找一個單一的物件
語法:
document.getElementById(”ID”);
範例:
<html>
<head>
</head>
<body>
<input type="text" value="123" id="t1" />
<script type="text/javascript">
var t = document.getElementById("t1");
alert(t.value);
</script>
</body>
</html>
我們先用ID把取到的物件放到一個變數裡面
之後再ALERT出物件的某一個屬性
這就是取得物件其中之一的方法
2. 用NAME取得HTML物件
ID是唯一值但是NAME不是
所以用NAME來取物件是得到一個集合(陣列)
語法:
document.getElementsByName("Name");
範例:
<html>
<head>
</head>
<body>
<input type="text" value="123" name="t1" />
<input type="text" value="456" name="t1" />
<script type="text/javascript">
var t = document.getElementsByName("t1");
for(var i = 0 ; i < t.length ; i++){
alert(t[i].value);
}
</script>
</body>
</html>
既然得到的是一個集合
那麼就可以用迴圈來跑這一個集合
所以執行後會跳出兩個input中的value
3. 用標籤名稱取得HTML物件
這個又比用NAME取物件更廣了
當然對於要一次性的處理所有的標籤
這無疑是一個比較快的方法
語法:
document.getElementsByTagName(TagName);
範例:
<html>
<head>
</head>
<body>
<input type="text" />
<input type="checkbox" />
<script type="text/javascript">
var t = document.getElementsByTagName("input");
for(var i = 0 ; i < t.length ; i++){
alert(t[i].type);
}
</script>
</body>
</html>
這一個語法也是取到一個集合
但是對於輸入框後勾選框來講
它們就是input標籤
所以會一起的被抓進來
這邊介紹的這三個語法雖然少卻是無比重要的
請大家必須要熟悉
以後100%會常用到
大家也可以嘗試著把事件跟這三個語法做結合
去動態的變更HTML