1.根據id獲取元素
document.getElementById("id屬性的值");
返回值是一個元素對象
案例：點擊按鈕彈框
<body>
<input type="button" name="" id="btn" value="button">
<script>
var btnobj = document.getElementById("btn")
btnobj.onclick = function () {
alert("OK!");
}
</script>
</body>
點擊按鈕後頁面彈出提示框。
2.根據標籤名字獲取元素
document.getElementsByTagName("標籤的名字");
返回值是一個僞數組
案例:點擊按鈕改變多個p標籤的文字內容
<body>
<input type="button" value="button" name="" id="btn">
<div id="div1">
<p>abcd</p>
<p>abcd</p>
<p>abcd</p>
</div>
<script>
//根據id獲取按鈕,註冊點擊事件,添加事件處理函數
document.getElementById("btn").onclick = function(){
//根據標籤名字獲取標籤
var changes = document.getElementById("div1").getElementsByTagName("p");
//循環遍歷這個數組
for(var i=0;i<=changes.length;i++){
//每個p標籤,設置文字
changes[i].innerHTML = "ABCD";
}
}
</script>
</body>
3.根據name屬性的值獲取元素
document.getElementsByName("name屬性的值");
返回值是一個僞數組
案例:點擊按鈕,改變所有name屬性值爲name1的文本框中的value屬性值
<body>
<input type="button" value="button" name="" id="btn">
<input type="text" value="hello" name="name1" id="">
<input type="text" value="hello" name="name1" id="">
<input type="text" value="hello" name="name1" id="">
<script>
//點擊按鈕,改變所有name屬性值爲name1的文本框中的value屬性值
document.getElementById("btn").onclick = function(){
//通過name屬性值獲取元素-------表單的標籤
var input1 = document.getElementsByName("name1");
for(var i=0;i<=input1.length;i++){
input1[i].value = "HELLO";
}
}
</script>
</body>
4.根據類樣式的名字獲取元素
document.getElementsByClassName("類樣式的名字");
返回值是一個僞數組
案例:修改所有文本框的值
<body>
<input type="button" value="button" name="" id="btn">
<input type="text" value="hello" class="text">
<input type="text" value="hello" class="text">
<input type="text" value="hello" class="text">
<script>
//點擊按鈕,改變所有name屬性值爲name1的文本框中的value屬性值
document.getElementById("btn").onclick = function(){
//通過class屬性值獲取元素-------表單的標籤
var input1 = document.getElementsByClassName("text");
for(var i=0;i<=input1.length;i++){
input1[i].value = "HELLO";
}
}
</script>
</body>