国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS基礎(chǔ)入門篇（ 三 ）—使用JS獲取頁(yè)面中某個(gè)元素的4種方法以及之間的差別（ 一 ）

Jackwoo / 1627人閱讀

摘要：方式二使用通過(guò)名獲取元素錯(cuò)誤代碼結(jié)果錯(cuò)誤原因頁(yè)面上的取名不是唯一的，是可以重復(fù)的。就算頁(yè)面上面只有一個(gè)，它的返回值依舊是集合。需求二獲取頁(yè)面中為的的第一層子級(jí)。返回值也是一個(gè)類似數(shù)組的集合。

1.使用JS獲取頁(yè)面中某個(gè)元素的4種方法

1.通過(guò)id名獲取元素

document.getElementById("id名");

2.通過(guò)class名獲取元素

document.getElementsByClassName("class名");

3.通過(guò)元素標(biāo)簽去獲取元素

document.getElementsByTagName("標(biāo)簽名");

4.通過(guò)css選擇器去獲取元素

document.querySelectorAll("css選擇器 ");//（1）
document.querySelector("css選擇器 ");//（2）
//（1）和（2）兩者不同

5.補(bǔ)充說(shuō)明：
如果想要在控制臺(tái)打印頁(yè)面上的所有dom節(jié)點(diǎn)，以下兩張方法都可以。
方法一：

console.log( document.getElementsByTagName("*") );

方法二：

console.log( document.all );

舉例說(shuō)明



    
        
        
    
    
        

            

            
    
                
  • 
                
  • 
                
  •

代碼運(yùn)行結(jié)果

2.方法之間的差別 



    
    Title
    


    
    
        
  • 0
    • 
        
  • 1
    • 
        
  • 
            
      
                
    • 2-1
      • 
                
    • 2-2
      • 
            
    
        
    • 
    

    
    
        
  • 0
    • 
        
  • 1
    •

需求一：獲取頁(yè)面中id="listOne"的ul，并給此ul添加紅色的背景。

方式一: 使用 通過(guò) id名 獲取元素

var list=document.getElementById("listOne");
console.log(list);
list.style.background="red";

結(jié)果：

說(shuō)明：

因?yàn)轫?yè)面上的id是唯一的，所以控制臺(tái)打印的值就是頁(yè)面上的id="listOne" 的 ul。后面一個(gè)ul沒(méi)取到。

解釋說(shuō)明：
優(yōu)點(diǎn)：因?yàn)轫?yè)面上的id是唯一的，所以很好確定并取到對(duì)應(yīng)的元素。
缺點(diǎn)：因?yàn)閕d是唯一的，但是在css樣式中，給元素一般都是取 class名。如果使用id，元素樣式不太好復(fù)用。

方式二: 使用 通過(guò) class名 獲取元素

錯(cuò)誤代碼：

var list=document.getElementsByClassName("order");
console.log(list);
list.style.background="red";

結(jié)果：

錯(cuò)誤原因：
1.頁(yè)面上的class取名不是唯一的，是可以重復(fù)的。所以document.getElementsByClassName("order");的返回值是一個(gè)類似數(shù)組的集合，為HTMLCollection(1)。
2.就算頁(yè)面上面只有一個(gè)class=“order”，它的返回值依舊是集合。
3.集合并沒(méi)有style的屬性，所以會(huì)報(bào)錯(cuò)。

正確代碼：

var list=document.getElementsByClassName("order")[0];//用素組下標(biāo)去取
console.log(list);
list.style.background="red";

結(jié)果：

解釋說(shuō)明：
優(yōu)點(diǎn)：方便寫結(jié)構(gòu)樣式。
缺點(diǎn)：class取值 ie9以下不支持。

方式三 : 使用 通過(guò) 元素標(biāo)簽 獲取元素

var list=document.getElementsByTagName("ul")[0];//用素組下標(biāo)去取
console.log(list);
list.style.background="red";

結(jié)果：

說(shuō)明：

1.元素標(biāo)簽和class名是一樣的，在頁(yè)面是可以重復(fù)的。所以理解起來(lái)，可以當(dāng)成class名去理解。解釋和class名是一樣的。
2.document.getElementsByTagName("ul");的返回值是一個(gè)類似數(shù)組的集合，因?yàn)轫?yè)面上有兩個(gè)ul，所以返回值為HTMLCollection(2)。
3.就算頁(yè)面上面只有一個(gè)標(biāo)簽，它的返回值依舊是集合。
3.集合并沒(méi)有style的屬性，所以需要用下標(biāo)去取。

解釋說(shuō)明：
優(yōu)點(diǎn)：方便寫結(jié)構(gòu)樣式。
缺點(diǎn)：沒(méi)有兼容問(wèn)題。

需求二：獲取頁(yè)面中id為“l(fā)istOne”的ul的第一層子級(jí)。其子級(jí)的class為active。并把其背景改成紅色.

這時(shí)只能選用css選擇器。

var li=document.querySelectorAll("#listOne > .active");
console.log(li);
li[0].className="red";
li[1].className="red";

結(jié)果:

說(shuō)明:

1.document.querySelectorAll("css選擇器");如何用css選中，在“ ”內(nèi)就如何寫。eg：document.querySelectorAll("#listOne > .active");
2.console.log(li);返回值也是一個(gè)類似數(shù)組的集合。返回值為NodeList(2)。
3.所以也需要用下標(biāo)去取值。

解釋:

1.比較好用，比較常用。
2.但是也存在兼容問(wèn)題 ie9以下不支持。

querySelectorAll("css選擇器 ")和querySelector("css選擇器 ")的區(qū)別：

如果以上代碼用querySelector("css選擇器 ")寫

var li=document.querySelector("#listOne > .active");
console.log(li);
li.className="red";

結(jié)果：

說(shuō)明：
1.document.querySelector("#listOne > .active")只取到第一個(gè)取到的值。第二個(gè)值不取。
2.返回的不是集合，所以可以直接使用。

解釋:

1.不太常用。
2.存在兼容問(wèn)題 ie9以下不支持。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/94906.html

相關(guān)文章

  • JS基礎(chǔ)入門篇（ 三 ）—使用JS獲取頁(yè)面中某個(gè)元素的4種方法以及之間的差別（ 一 ）

    摘要：方式二使用通過(guò)名獲取元素錯(cuò)誤代碼結(jié)果錯(cuò)誤原因頁(yè)面上的取名不是唯一的，是可以重復(fù)的。就算頁(yè)面上面只有一個(gè)，它的返回值依舊是集合。需求二獲取頁(yè)面中為的的第一層子級(jí)。返回值也是一個(gè)類似數(shù)組的集合。 1.使用JS獲取頁(yè)面中某個(gè)元素的4種方法 1.通過(guò)id名獲取元素 document.getElementById(id名); 2.通過(guò)class名獲取元素 document.getElements...

    changfeng1050 評(píng)論0 收藏0

  • JS基礎(chǔ)入門篇（ 三 ）—使用JS獲取頁(yè)面中某個(gè)元素的4種方法以及之間的差別（ 一 ）

    摘要：方式二使用通過(guò)名獲取元素錯(cuò)誤代碼結(jié)果錯(cuò)誤原因頁(yè)面上的取名不是唯一的，是可以重復(fù)的。就算頁(yè)面上面只有一個(gè)，它的返回值依舊是集合。需求二獲取頁(yè)面中為的的第一層子級(jí)。返回值也是一個(gè)類似數(shù)組的集合。 1.使用JS獲取頁(yè)面中某個(gè)元素的4種方法 1.通過(guò)id名獲取元素 document.getElementById(id名); 2.通過(guò)class名獲取元素 document.getElements...

    idisfkj 評(píng)論0 收藏0

  • JS基礎(chǔ)入門篇（ 三 ）— 使用JS獲取頁(yè)面中某個(gè)元素的4種方法以及之間的差別（ 二 ）

    摘要：獲取元素的幾種方式通過(guò)名獲取元素名通過(guò)名獲取元素名通過(guò)元素標(biāo)簽去獲取元素標(biāo)簽名通過(guò)選擇器去獲取元素選擇器選擇器和兩者不同其中不同的是名標(biāo)簽名返回值是為的集合。選擇器返回值是為的集合。集合不能動(dòng)態(tài)獲取集合值。從打印的的長(zhǎng)度可以看出。 1.獲取元素的幾種方式 1.通過(guò)id名獲取元素 document.getElementById(id名); 2.通過(guò)class名獲取元素 document....

    levy9527 評(píng)論0 收藏0

  • JS基礎(chǔ)入門篇（ 三 ）— 使用JS獲取頁(yè)面中某個(gè)元素的4種方法以及之間的差別（ 二 ）

    摘要：獲取元素的幾種方式通過(guò)名獲取元素名通過(guò)名獲取元素名通過(guò)元素標(biāo)簽去獲取元素標(biāo)簽名通過(guò)選擇器去獲取元素選擇器選擇器和兩者不同其中不同的是名標(biāo)簽名返回值是為的集合。選擇器返回值是為的集合。集合不能動(dòng)態(tài)獲取集合值。從打印的的長(zhǎng)度可以看出。 1.獲取元素的幾種方式 1.通過(guò)id名獲取元素 document.getElementById(id名); 2.通過(guò)class名獲取元素 document....

    CKJOKER 評(píng)論0 收藏0

  • JS基礎(chǔ)入門篇（ 三 ）— 使用JS獲取頁(yè)面中某個(gè)元素的4種方法以及之間的差別（ 二 ）

    摘要：獲取元素的幾種方式通過(guò)名獲取元素名通過(guò)名獲取元素名通過(guò)元素標(biāo)簽去獲取元素標(biāo)簽名通過(guò)選擇器去獲取元素選擇器選擇器和兩者不同其中不同的是名標(biāo)簽名返回值是為的集合。選擇器返回值是為的集合。集合不能動(dòng)態(tài)獲取集合值。從打印的的長(zhǎng)度可以看出。 1.獲取元素的幾種方式 1.通過(guò)id名獲取元素 document.getElementById(id名); 2.通過(guò)class名獲取元素 document....

    BothEyes1993 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<