Question

我试图使用document.querySelectorAll（）辅助函数作为定义的here，我将会使用它。

运行这个我得到一个错误说：

未捕获的TypeError：无法设置未定义的属性'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>

JS

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

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

使用 for循环

进行了更新

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';
}

这应该有效......对吧？：）

Answer 1

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()调用匹配的所有元素。

Answer 2

querySelectorAll返回类似于数组的节点集合，因此您需要在nodeList集合上使用iterate并将属性添加到每个元素。

返回文档中的元素列表（使用与指定选择器组匹配的文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

someVar未定义
您可以使用DOMContentLoaded代替load活动
对于这种情况，您可以使用CSS而不是Javascript

＆＃13;

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';
  }
}

＆＃13;

<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>

＆＃13;

<强> CSS

如果您只想设置具有类test

＆＃13;

.test {
  background: yellow;
}

＆＃13;

<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>

＆＃13;

<强> DOMContentLoaded

＆＃13;

function selectElement(el) {
  return document.querySelectorAll(el);
}

document.addEventListener('DOMContentLoaded', function() {
  var someElement = selectElement('.test');

  for (var i = 0; i < someElement.length; i++) {
    someElement[i].style.backgroundColor = 'red';
  }
}, false);

＆＃13;

<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>

＆＃13;

Answer 3

style是HTML元素的属性

querySelectorAll返回所有匹配HTML元素的（类似数组）HTML集合。

您需要循环返回值并依次设置每个元素的style 。

例如，从您链接到的页面上的第一个代码示例：

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

document.querySelectorAll（）辅助函数不起作用

3 个答案: