$永遠保存學習的心態$ 我是通過標簽獲取(紫色) 我是通過id獲取(橙色) 我是通過class獲取(黃色) 我是通過name獲取(綠色) 我是通過querySelector獲取(青色) 我通過querySelectorAll獲取(藍色) ... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$永遠保存學習的心態$</title>
</head>
<body>
<div>我是通過標簽獲取(紫色)</div>
<div id="box">我是通過id獲取(橙色)</div>
<div class="box1">我是通過class獲取(黃色)</div>
<form action="" name="box2">
我是通過name獲取(綠色)
</form>
<div class="box3">
我是通過querySelector獲取(青色)
</div>
<div class="box4">我通過querySelectorAll獲取(藍色)</div>
<script src="common.js"></script>
<script>
var div = document.getElementsByTagName("div")[0];
//根據標簽名字獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象
//document.getElementsByTagName("標簽名字");
var box = document.getElementById("box");
//根據id屬性的值獲取元素,返回來的是一個元素對象
//document.getElementById("id屬性的值");
var box1 = document.getElementsByClassName("box1")[0];
//根據name屬性的值獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 (有的瀏覽器不支持)
//document.getElementsByName("name屬性的值")
var box2 = document.getElementsByName("box2")[0];
//根據類樣式的名字來獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 (有的瀏覽器不支持)
//document.getElementsByClassName("類樣式的名字")
var box3 = document.querySelector('.box3');
//根據選擇器獲取元素,返回來的是一個元素對象 (有的瀏覽器不支持)IE8以上支持
//document.querySelector("選擇器的名字");
var box4 = document.querySelectorAll('.box4')[0];
//根據選擇器獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象 (有的瀏覽器不支持)IE8以上支持
//document.querySelectorAll("選擇器的名字")
div.style.color = '#8B00FF';
box.style.color = '#ff7f00';
box1.style.color = '#ff0';
box2.style.color = '#00ff00';
box3.style.color = '#0ff';
box4.style.color = '#00f';
</script>
</html>
</script>
</body>
</html>
