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

時間 2019-11-11

標籤基礎入門使用獲取頁面某個元素方法以及之間差異欄目 JavaScript 简体版

原文原文鏈接

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

1.經過id名獲取元素css

document.getElementById("id名");

2.經過class名獲取元素html

document.getElementsByClassName("class名");

3.經過元素標籤去獲取元素數組

document.getElementsByTagName("標籤名");

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

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

5.補充說明：
若是想要在控制檯打印頁面上的全部dom節點，如下兩張方法均可以。
方法一：spa

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

方法二：3d

console.log( document.all );

舉例說明code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <h2></h2>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script>
//            console.log( document.getElementsByTagName("*") );
            console.log( document.all );
        </script>
    </body>
</html>

代碼運行結果
htm

2.方法之間的差異

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            background: palevioletred;
        }
        .red{
           background: red;
        }
    </style>
</head>
<body>
    <ul id="listOne" class="order">
        <li class="active">0</li>
        <li class="active">1</li>
        <li>
            <ul>
                <li class="active">2-1</li>
                <li>2-2</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>0</li>
        <li>1</li>
    </ul>
</body>
</html>

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

方式一: 使用經過 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如下不支持。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

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

2.方法之間的差異

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