JS取得元素的N種方法及其動態討論-js教程-PHP中文網

首頁

web前端

js教程

JS取得元素的N種方法及其動態討論

jacklove

May 21, 2018 pm 02:09 PM

javascript靜態

在學習JavaScript過程中會遇到js取得元素的問題，本篇將會對其取得元素的方法進行解說。

在實際前端開發工作中，我們經常會遇到要取得某些元素，以達到更新該元素的樣式、內容等目的。而文檔物件模型(DOM) 是HTML和XML文檔的程式設計接口，它提供了對文檔的結構化的表述，並定義了一種方式可以從程式中對該結構進行訪問，從而改變文檔的結構，樣式和內容。 DOM 將文件解析為一個由節點和物件（包含屬性和方法的物件）組成的結構集合，它會將web頁面和腳本或程式語言連接起來。也因此，JavaScript可以透過DOM API取得元素節點，方法有以下幾種：其中querySelector()和querySelectorAll()為ES5的元素選擇方法

1、getElementById()：

接收一個參數：要取得的元素的ID(區分大小寫，必須嚴格匹配)，傳回一個Element物件（也可看作是動態NodeList集合，只是集合中只包含一個符合的元素，但也會即時反映DOM節點的變化），若目前文件中擁有特定ID的元素不存在則傳回nul。
語法：

element = document.getElementById(id);

範例：刪除

<body>
    <div id="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(1)
        var body=document.querySelector(&#39;body&#39;);
        body.removeChild(div);        console.log(body); //(2)
    </script></body>
//(1)处打印值    <div id="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>//(2)处打印值<body>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(1)
        var body=document.querySelector(&#39;body&#39;);
        body.removeChild(div);        console.log(body); //(2)
    </script></body>

範例：

<!DOCTYPE html><html><head>
  <title>getElementById example</title>
  <script>
  function changeColor(newColor) {    var elem = document.getElementById("para1");
    elem.style.color = newColor;
  }  </script></head><body>
  <p id="para1">Some text here</p>
  <button onclick="changeColor(&#39;blue&#39;);">blue</button>
  <button onclick="changeColor(&#39;red&#39;);">red</button></body></html>

getElementById( )方法不會搜尋不在文件中的元素。當建立一個元素且指派ID後，必須要使用insertBefore()或其他類似的方法把元素插入到文件中之後才能使用getElementById() 取得到:

var element = document.createElement("div");
element.id = &#39;testqq&#39;;var el = document.getElementById(&#39;testqq&#39;); // el will be null!

2、getElementsByClassName()：

接收一個參數，即包含一個或多個類別名稱的字串（類別名稱透過空格分隔），傳回一個HTMLCollection動態集合（也可以說傳回一個NodeList類別陣列物件），集合中包含以目前元素為根節點，所有指定class 名的子元素。
語法：

var elements = document.getElementsByClassName(names); 
var elements = rootElement.getElementsByClassName(names);

getElementsByClassName 可以在任意的元素上調用，而不僅僅是document。呼叫這個方法的元素將作為本次尋找的根元素。
範例：

取得所有class 為'test' 的元素:

document.getElementsByClassName('test');

##取得所有class 同時包含'red' 和'test' 的元素:

document.getElementsByClassName('red test');

在id 為'main'的元素的子節點中，取得所有class為'test'的元素:

document.getElementById('main').getElementsByClassName('test');

範例：刪除

//html代码<div class="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>
//js代码一    <script>
        var div = document.getElementsByClassName("myDiv");        console.log(div); //(3)
        var p = document.getElementsByClassName("myP");        for (var i = 0; i < p.length; i++) {
            div[0].removeChild(p[i]);
        }        console.log(p); //(4)
    </script>

/ /(3)處列印值

[div.myDiv] //一個動態的HTMLCollection集合，長度為1，innerHTML為

hello dolby

，

hello bean

，為什麼沒有其他兩個p元素一會兒解釋。

//(4)處列印值
[p.myP,p.myP] //一個動態的HTMLCollection集合，長度為2，innerHTML分別為"hello dolby"，"hello bean" 。

以上用刪除節點的方法驗證了getElementsByClassName方法傳回的是一個HTMLCollection動態集合。

⬆️以上程式碼中，首先div取得了頁面中類別名為"myDiv"的元素組成的動態集合，p取得了頁面中類別名為"myP"的元素組成的動態集合，接著用一個for迴圈來刪除"myDiv"集合中第一項（即上例中唯一的div元素）中的"myP"集合中的每一項，結果只有第一項和第三項被刪除了，這是為什麼呢？

原因是動態集合中DOM結構的變化能夠自動反映到所保存的物件中，最開始p.legth=4，當i=0時刪除了頁面中第一個p元素，此後p.length= 3；i=1時刪除了剩餘的三個p中的項目索引為1的項，此後p.length=2；i=2時已不滿足i

那麼怎樣才能遍歷類別數組物件HTMLCollection集合中的每一項並且刪除所有項目呢？

還是一個for循環搞定⬇️，每次刪除物件集合中的最後一項就可以啦～

//js代码二    <script>
        var div = document.getElementsByClassName("myDiv")[0];        console.log(div); //(5)
        var p = document.getElementsByClassName("myP");        for (var i=p.length;i--;){
            div.removeChild(p[i]);
        }        console.log(p); //(6)
    </script>
//(5)处打印值<div class="myDiv"></div>//(6)处打印值[] //空的HTMLCollection集合，长度为0

3、getElementsByTagName()：

接收一個參數：要取得的元素的標籤名稱（不區分大小寫），傳回一個HTMLCollection動態集合（也可以說回傳一個NodeList類別陣列物件）,集合中包含以目前元素為根節點（不包括目前元素本身），所有指定標籤名稱的子元素，子元素的順序是在目前元素的子樹中出現的順序，如果沒有搜尋到元素則集合為空。

語法：

elements = element.getElementsByTagName(tagName)

範例：

// check the alignment on a number of cells in a table. var table = document.getElementById("forecast-table"); 
var cells = table.getElementsByTagName("td"); 
for (var i = 0; i < cells.length; i++) { 
    var status = cells[i].getAttribute("data-status"); 
    if ( status == "open" ) { 
        // grab the data 
    }
}

範例：刪除

<body>
    <div id="myDiv">
        <p class="myP">hello world</p>
        <p class="myP">hello dolby</p>
        <p class="myP">hello dot</p>
        <p class="myP">hello bean</p>
    </div>
    <script>
        var div = document.getElementById("myDiv");        console.log(div); //(7)
        var p = document.getElementsByTagName("p");//

以下for循环改为for (var i=0,len=p.length;i for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(8)

以上是JS取得元素的N種方法及其動態討論的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Java vs JavaScript：開發人員的詳細比較May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。