單個對象：
var box = document.getElementsById("box");console.dir(oBox);//打印對象詳情 var wrap = document.querySelector("#box .wrap"); 不兼容ie7及一下瀏覽器
多個對象
集合：需要通過【序號】來獲取對應的標籤節點，即便只有一個
document.getElementsByClassName()不兼容ie678及一下瀏覽器
document.getElementsByTagName()
document.getElementsByName()
document.querySelectorAll()
不兼容ie7及一下瀏覽器通過id直接獲取 極其不推薦，但是調試好用，在控制檯直接打印box就行
<div id="box"></div>
console.dir(box);通過document 直接獲取 包括head title body
console.log(document.head); 獲取元素document.head 給元素賦值document.title="hello";
通過類名獲取 獲取的時一個類數組 ie8以下不兼容
var box = document.getElementsByClassName("box");box[0]代表第一個box
通過標籤獲取 獲取的時一個類數組
var divs = document.getElementsByTagName("div");通過name獲取 獲取的時一個類數組
<input type="text" name="user">
var ipts = document.ElementsByName("user");對於類名/標籤名/name 我們可以先確定選擇範圍 在進行下一步選擇
第一步 var obox = document.getxxxx
第二步 obox.getxxxxx 進行進一步查找
通過querySelector 查詢選擇器 ,性能極低
<div id="box">
<div class="wrap"></div>
</div>
<div class="wrap"></div>
var wrap = document.querySelector("#box .wrap");需要注意的是一定要帶上選擇器的標識符，id就要寫# class就要寫點
var wrap = document.querySelector(".wrap");此時滿足條件的有兩個，但是隻會取第一個 <div id="box"><div class="wrap"></div></div>
var wrap = document.querySelectorAll(".wrap");
如果精準獲取就document.querySelectorAll("#box .wrap")但是也得加下標 wrap[0]此時是個集合，會取所有滿足條件的 wrap[1]代表取第一個
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="season">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
要獲取夏
var mytext = document.querySelector(".season>li:nth-child(2)").innerHTML;判斷時應該注意什麼
- 不要使用顏色做判斷
console.log(getComputedStyle(oBox)["background-color"]);console.log(oBox.style.backgroundColor);兩個的結果不一樣 - 不能用複合屬性做判斷
- 不能用url做判斷 涉及到字符串的轉換 和相對/絕對路徑
靜態獲取和動態獲取
靜態獲取
- 對於getElementById 獲取到元素之後不會重新獲取 可以對他進行隨意更改
動態獲取
- 對於getElementByTagName getElementByClassName getElementByName 元素是動態獲取 獲取到元素之後不會重新獲取
- querySelector querySelectorAll都爲靜態獲取
<body>
<div id="box">123</div>
</body>
<script>
var oBox = document.getElementById("box");
oBox.id = "lisi";
oBox.innerHTML = "hahaha";
</script>成功執行
var aBox = document.getElementsByClassName("mybox");
var
aBox[0].className = "lisi";
aBox[0].innerHTML= "heihei";這樣沒有效果
var aBox = document.getElementsByClassName("mybox");
var mybox = aBox[0];
mybox.className = "lisi";
mybox.innerHTML= "heihei";這樣就可以