HTML DOM NodeList.forEach()用法及代碼示例

NodeList接口的forEach()方法按插入順序為列表中的每個值對調用一次在參數中給定的回調。

用法:

NodeList.forEach(callback, currentValue);

參數：

Callback：在NodeList的每個元素上執行的函數。它接受3個參數：
currentValue：NodeList中要處理的當前元素。
currentIndex (Optional):NodeList中正在處理的currentValue的索引。
listobj (Optional):應用了forEach()的NodeList。
thisArg (Optional):執行回調時用作此值。

返回值：此方法返回未定義。

例：在此示例中，我們將創建一個NodeList，因此將使用此方法從NodeList中獲取所有值。

<!DOCTYPE HTML>  
<html>   
<head> 
    <meta charset="UTF-8"> 
    <title>HTML | DOM NodeList.forEach() Method</title> 
</head>    
  
<body style="text-align:center;"> 
    <h1 style="color:green;">   
     GeeksforGeeks 
    </h1>  
    <p>  
HTML | DOM NodeList.forEach() Method 
    </p> 
  
    <button onclick = "Geeks()"> 
    Click Here 
    </button> 
    <p id="a"></p> 
    <script>  
        var a = document.getElementById("a"); 
        a.innerHTML = "elements are:" 
        function Geeks(){ 
           var parentNode = document.createElement("div");  
            var c1 = document.createElement("p");  
            var c2 = document.createElement("span");  
            var c3 = document.createElement("h1");  
            parentNode.appendChild(c1);  
            parentNode.appendChild(c2);  
            parentNode.appendChild(c3);  
            var nodelist = parentNode.childNodes; 
  
           nodelist.forEach(  
            function(currentValue, currentIndex, listObj) { 
            a.innerHTML += "<li>"+currentValue.localName + `</li>`; 
                console.log(currentValue, currentIndex);  
              }, 
            ); 
} 
</script> 
</body>    
</html>

輸出：

單擊按鈕之前：

單擊按鈕後：使用forEach()調用元素。

在控製台中：可以看到元素值。

支持的瀏覽器：

穀歌瀏覽器
Edge
Firefox
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自taran910大神的英文原創作品 HTML DOM NodeList.forEach() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。