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

資訊專欄INFORMATION COLUMN

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

idisfkj / 460人閱讀

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

1.使用JS獲取頁面中某個元素的4種方法

1.通過id名獲取元素

document.getElementById("id名");

2.通過class名獲取元素

document.getElementsByClassName("class名");

3.通過元素標簽去獲取元素

document.getElementsByTagName("標簽名");

4.通過css選擇器去獲取元素

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

5.補充說明：
如果想要在控制臺打印頁面上的所有dom節點，以下兩張方法都可以。
方法一：

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

方法二：

console.log( document.all );

舉例說明



    
        
        
    
    
        

            

            
    
                
  • 
                
  • 
                
  •

代碼運行結果

2.方法之間的差別 



    
    Title
    


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

    
    
        
  • 0
    • 
        
  • 1
    •

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

方式一: 使用 通過 id名 獲取元素

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

結果：

說明：

因為頁面上的id是唯一的，所以控制臺打印的值就是頁面上的id="listOne" 的 ul。后面一個ul沒取到。

解釋說明：
優點：因為頁面上的id是唯一的，所以很好確定并取到對應的元素。
缺點：因為id是唯一的，但是在css樣式中，給元素一般都是取 class名。如果使用id，元素樣式不太好復用。

方式二: 使用 通過 class名 獲取元素

錯誤代碼：

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

結果：

錯誤原因：
1.頁面上的class取名不是唯一的，是可以重復的。所以document.getElementsByClassName("order");的返回值是一個類似數組的集合，為HTMLCollection(1)。
2.就算頁面上面只有一個class=“order”，它的返回值依舊是集合。
3.集合并沒有style的屬性，所以會報錯。

正確代碼：

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

結果：

解釋說明：
優點：方便寫結構樣式。
缺點：class取值 ie9以下不支持。

方式三 : 使用 通過 元素標簽 獲取元素

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

結果：

說明：

1.元素標簽和class名是一樣的，在頁面是可以重復的。所以理解起來，可以當成class名去理解。解釋和class名是一樣的。
2.document.getElementsByTagName("ul");的返回值是一個類似數組的集合，因為頁面上有兩個ul，所以返回值為HTMLCollection(2)。
3.就算頁面上面只有一個標簽，它的返回值依舊是集合。
3.集合并沒有style的屬性，所以需要用下標去取。

解釋說明：
優點：方便寫結構樣式。
缺點：沒有兼容問題。

需求二：獲取頁面中id為“listOne”的ul的第一層子級。其子級的class為active。并把其背景改成紅色.

這時只能選用css選擇器。

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

結果:

說明:

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

解釋:

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

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

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

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

結果：

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

解釋:

1.不太常用。
2.存在兼容問題 ie9以下不支持。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52333.html

相關文章

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

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

    changfeng1050 評論0 收藏0

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

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

    Jackwoo 評論0 收藏0

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

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

    levy9527 評論0 收藏0

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

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

    CKJOKER 評論0 收藏0

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

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

    BothEyes1993 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<