資訊專欄INFORMATION COLUMN
摘要：方式二使用通過名獲取元素錯誤代碼結(jié)果錯誤原因頁面上的取名不是唯一的，是可以重復(fù)的。就算頁面上面只有一個，它的返回值依舊是集合。需求二獲取頁面中為的的第一層子級。返回值也是一個類似數(shù)組的集合。
1.使用JS獲取頁面中某個元素的4種方法
1.通過id名獲取元素
document.getElementById("id名");
2.通過class名獲取元素
document.getElementsByClassName("class名");
3.通過元素標(biāo)簽去獲取元素
document.getElementsByTagName("標(biāo)簽名");
4.通過css選擇器去獲取元素
document.querySelectorAll("css選擇器 ");//（1）
document.querySelector("css選擇器 ");//（2）
//（1）和（2）兩者不同
5.補(bǔ)充說明：
如果想要在控制臺打印頁面上的所有dom節(jié)點，以下兩張方法都可以。
方法一：
console.log( document.getElementsByTagName("*") );
方法二：
console.log( document.all );
舉例說明
代碼運行結(jié)果
Title
需求一：獲取頁面中id="listOne"的ul，并給此ul添加紅色的背景。
方式一: 使用 通過 id名 獲取元素
var list=document.getElementById("listOne");
console.log(list);
list.style.background="red";
結(jié)果：
說明：
因為頁面上的id是唯一的，所以控制臺打印的值就是頁面上的id="listOne" 的 ul。后面一個ul沒取到。
解釋說明：
優(yōu)點：因為頁面上的id是唯一的，所以很好確定并取到對應(yīng)的元素。
缺點：因為id是唯一的，但是在css樣式中，給元素一般都是取 class名。如果使用id，元素樣式不太好復(fù)用。
方式二: 使用 通過 class名 獲取元素
錯誤代碼：
var list=document.getElementsByClassName("order");
console.log(list);
list.style.background="red";
結(jié)果：
錯誤原因：
1.頁面上的class取名不是唯一的，是可以重復(fù)的。所以document.getElementsByClassName("order");的返回值是一個類似數(shù)組的集合，為HTMLCollection(1)。
2.就算頁面上面只有一個class=“order”，它的返回值依舊是集合。
3.集合并沒有style的屬性，所以會報錯。
正確代碼：
var list=document.getElementsByClassName("order")[0];//用素組下標(biāo)去取
console.log(list);
list.style.background="red";
結(jié)果：
解釋說明：
優(yōu)點：方便寫結(jié)構(gòu)樣式。
缺點：class取值 ie9以下不支持。
方式三 : 使用 通過 元素標(biāo)簽 獲取元素
var list=document.getElementsByTagName("ul")[0];//用素組下標(biāo)去取
console.log(list);
list.style.background="red";
結(jié)果：
說明：
1.元素標(biāo)簽和class名是一樣的，在頁面是可以重復(fù)的。所以理解起來，可以當(dāng)成class名去理解。解釋和class名是一樣的。
2.document.getElementsByTagName("ul");的返回值是一個類似數(shù)組的集合，因為頁面上有兩個ul，所以返回值為HTMLCollection(2)。
3.就算頁面上面只有一個標(biāo)簽，它的返回值依舊是集合。
3.集合并沒有style的屬性，所以需要用下標(biāo)去取。
解釋說明：
優(yōu)點：方便寫結(jié)構(gòu)樣式。
缺點：沒有兼容問題。
需求二：獲取頁面中id為“l(fā)istOne”的ul的第一層子級。其子級的class為active。并把其背景改成紅色.
這時只能選用css選擇器。
var li=document.querySelectorAll("#listOne > .active");
console.log(li);
li[0].className="red";
li[1].className="red";
結(jié)果:
說明:
1.document.querySelectorAll("css選擇器");如何用css選中，在“ ”內(nèi)就如何寫。eg：document.querySelectorAll("#listOne > .active");
2.console.log(li);返回值也是一個類似數(shù)組的集合。返回值為NodeList(2)。
3.所以也需要用下標(biāo)去取值。
解釋:
1.比較好用，比較常用。
2.但是也存在兼容問題 ie9以下不支持。
querySelectorAll("css選擇器 ")和querySelector("css選擇器 ")的區(qū)別：
如果以上代碼用querySelector("css選擇器 ")寫
var li=document.querySelector("#listOne > .active");
console.log(li);
li.className="red";
結(jié)果：
說明：
1.document.querySelector("#listOne > .active")只取到第一個取到的值。第二個值不取。
2.返回的不是集合，所以可以直接使用。
解釋:
1.不太常用。
2.存在兼容問題 ie9以下不支持。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113270.html
摘要：方式二使用通過名獲取元素錯誤代碼結(jié)果錯誤原因頁面上的取名不是唯一的，是可以重復(fù)的。就算頁面上面只有一個，它的返回值依舊是集合。需求二獲取頁面中為的的第一層子級。返回值也是一個類似數(shù)組的集合。 1.使用JS獲取頁面中某個元素的4種方法 1.通過id名獲取元素 document.getElementById(id名); 2.通過class名獲取元素 document.getElements...
摘要：方式二使用通過名獲取元素錯誤代碼結(jié)果錯誤原因頁面上的取名不是唯一的，是可以重復(fù)的。就算頁面上面只有一個，它的返回值依舊是集合。需求二獲取頁面中為的的第一層子級。返回值也是一個類似數(shù)組的集合。 1.使用JS獲取頁面中某個元素的4種方法 1.通過id名獲取元素 document.getElementById(id名); 2.通過class名獲取元素 document.getElements...
摘要：獲取元素的幾種方式通過名獲取元素名通過名獲取元素名通過元素標(biāo)簽去獲取元素標(biāo)簽名通過選擇器去獲取元素選擇器選擇器和兩者不同其中不同的是名標(biāo)簽名返回值是為的集合。選擇器返回值是為的集合。集合不能動態(tài)獲取集合值。從打印的的長度可以看出。 1.獲取元素的幾種方式 1.通過id名獲取元素 document.getElementById(id名); 2.通過class名獲取元素 document....
摘要：獲取元素的幾種方式通過名獲取元素名通過名獲取元素名通過元素標(biāo)簽去獲取元素標(biāo)簽名通過選擇器去獲取元素選擇器選擇器和兩者不同其中不同的是名標(biāo)簽名返回值是為的集合。選擇器返回值是為的集合。集合不能動態(tài)獲取集合值。從打印的的長度可以看出。 1.獲取元素的幾種方式 1.通過id名獲取元素 document.getElementById(id名); 2.通過class名獲取元素 document....
摘要：獲取元素的幾種方式通過名獲取元素名通過名獲取元素名通過元素標(biāo)簽去獲取元素標(biāo)簽名通過選擇器去獲取元素選擇器選擇器和兩者不同其中不同的是名標(biāo)簽名返回值是為的集合。選擇器返回值是為的集合。集合不能動態(tài)獲取集合值。從打印的的長度可以看出。 1.獲取元素的幾種方式 1.通過id名獲取元素 document.getElementById(id名); 2.通過class名獲取元素 document....
閱讀 2170·2021-11-25 09:43
閱讀 2249·2021-11-24 09:39
閱讀 1540·2021-11-22 12:02
閱讀 2984·2021-11-17 09:33
閱讀 3408·2021-11-15 11:38
閱讀 2718·2021-10-13 09:40
閱讀 1065·2021-09-22 15:41
閱讀 1687·2019-08-30 10:58
