document.querySelectorAll（）幫助函數不起作用

我試圖使用document.querySelectorAll（）輔助函數，如定義的here couse我將使用它很多。document.querySelectorAll（）幫助函數不起作用

Wher運行此我得到一個錯誤說：

遺漏的類型錯誤：未定義

無法設置屬性「的backgroundColor」所以我的問題是這是爲什麼不工作？

HTML

<!DOCTYPE html> 
<html>  
<head>  
<title>Javascript tutorial</title> 
</head> 
<body> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
    <p class="test">I'm a paragraph</p> 
<script type="text/javascript" src="js/script.js"></script> 
</body> 
</html>

function selectElement(el) { 
    return document.querySelectorAll(el); 
} 

window.onload = function() { 
    var someElement = selectElement('.test'); 
    someElement.style.backgroundColor='red'; 
}

有更新了循環

function selectElement(el) { 
    var element = document.querySelectorAll(el); 
    for (var i = 0; i < element.length; i++) { 
     return element[i]; 
    } 
} 

window.onload = function() { 
    var someElement = selectElement('.test'); 
    someElement.style.backgroundColor='red'; 
}

這應該工作...對吧？ :)

來源

2015-08-31 VikVikVik

我們從哪裏得到'someVar'？ –

querySelectorAll（）返回與給定CSS選擇器匹配的DOM元素列表，您需要循環遍歷每個節點以應用更改 – Arvind

可能很明顯，在更新中您使用的是不同的類 –

querySelectorAll返回類似數組的節點，因此您需要使用遍歷nodeList集合並將屬性添加到每個元素。

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList.

在你的腳本someVar沒有定義
可以使用DOMContentLoaded代替load事件
對於這種情況，你可以用它代替的Javascript

function selectElement(el) { 
 
    return document.querySelectorAll(el); 
 
} 
 

 
window.onload = function() { 
 
    var someElement = selectElement('.test'); 
 

 
    for (var i = 0; i < someElement.length; i++) { 
 
    someElement[i].style.backgroundColor = 'red'; 
 
    } 
 
}

<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p>

CSS

CSS

在情況下，如果你只是想設置上課test

.test { 
 
    background: yellow; 
 
}

<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p>

DOMContentLoaded

樣式的所有元素

來源

2015-08-31 07:46:07 Tushar

這是很好的圖沙爾，但那不是我所期望的。在plainjs.com網站上它說：創建助手函數時，將其命名爲「function $（）{}」，您可以像使用jQuery一樣使用$（...）來獲取元素;你甚至可以傳入一個上下文元素「 – VikVikVik

@VikVikVik是的，你可以，但這並不意味着你可以像jQuery一樣使用它，你仍然需要迭代集合 – Tushar

@michael對，我已經更新。錯誤的選擇話:) – Tushar

style是一個HTML元素

querySelectorAll一個屬性返回所有匹配的HTML元素的（陣列狀）HTML集合。

您需要遍歷返回值並將每個元素的style依次設置爲。

例如，從頁面上的第一個代碼示例你鏈接到：

for (i=0; i<matches.length; i++)

來源

2015-08-31 07:46:11 Quentin

不應該這樣的工作比功能selectElement（EL）{ \t VAR元素= document.querySelectorAll致發光（EL）; \t爲（VAR I = 0; I VikVikVik

@VikVikVik - 您正在循環集合，觸及集合中的第一個元素，並返回該集合。如果你想改變它們，你需要返回整個集合，然後把你的樣式改變放到你的循環中 – Quentin

document.querySelectorAll()返回的HTMLCollection。如果您想將樣式應用到所有的段落，你必須遍歷集合：

[].forEach.call(document.querySelectorAll('.test'), function(val) { 
 
    val.style.backgroundColor = 'red'; 
 
});

<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p> 
 
<p class="test">I'm a paragraph</p>

您可以使用[].forEach.call()打開的HTMLCollection到一個數組和循環超過它。然後將樣式應用於由querySelectorAll()調用匹配的所有元素。

來源

2015-08-31 07:47:53 baao

爲什麼''[。] .slice.call（foo）.forEach'只需要執行'[]。 forEach.call（'？ –

謝謝@torazaburo，不知道我可以這樣稱呼它 – baao

設置'backgroundColor'會更好，設置'background'可能會設置所有其他背景相關的屬性是'背景'速記屬性的一部分 –

document.querySelectorAll（）幫助函數不起作用

回答

相關問題