Fatal编程技术网
  • javascript/
  • Javascript document.querySelectorAll（）助手函数不工作

Javascript document.querySelectorAll（）助手函数不工作

javascript

Javascript document.querySelectorAll（）助手函数不工作,javascript,Javascript,我正在尝试使用定义的document.querySelectorAll（）助手函数，因为我会经常使用它 运行此命令时，我会收到一个错误消息： 未捕获的TypeError:无法设置未定义的属性“backgroundColor” 所以我的问题是为什么这不起作用 HTML <!DOCTYPE html> <html> <head> <title>Javascript tutorial</title> </head>

我正在尝试使用定义的document.querySelectorAll（）助手函数，因为我会经常使用它

运行此命令时，我会收到一个错误消息：

未捕获的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>
使用循环的更新

函数选择元素（el）{
var元素=document.queryselectoral（el）；
对于（变量i=0；i
这应该是有效的……对吗？：）

返回类似于数组的节点集合，因此需要对nodeList集合进行迭代，并将属性添加到每个元素中

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

  • 脚本中的
    someVar
    未定义
  • 您可以使用
    DOMContentLoaded
    而不是
    load
    事件
  • 在这种情况下，您可以使用CSS而不是Javascript
    • 函数选择元素（el）{
返回文件。查询选择全部（el）；
}
window.onload=函数（）{
var someElement=selectElement（'.test'）；
for（var i=0；i
    我是一个段落
    

    我是一个段落
    

    我是一个段落
    

    我是一个段落
    

    我是一个段落
    样式
    是HTML元素的属性

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

    您需要循环返回值并依次设置每个元素的
    样式
    
例如，从链接到的页面上的第一个代码示例：
    

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

    

    for（i=0；i
    document.querySelectorAll（）
    返回一个HtmlCollection。如果要将样式应用于所有段落，则必须在集合上循环：
    


    [].forEach.call（document.querySelectorAll（'.test'）、函数（val）{
val.style.backgroundColor='红色'；
})；
    

    我是一个段落
    

    我是一个段落
    

    我是一个段落
    

    我是一个段落
    

    我是一个段落
    我们从哪里得到的
    someVar
    来自返回与给定CSS选择器匹配的DOM元素列表，您需要在每个节点之间循环以应用更改。很明显，在更新中您使用的是不同的类别如果您希望所有
    .test
    元素都有红色背景，为什么不将该属性添加到
    的CSS规则中。test
    ？“.container”是一个输入错误…我更改了它。仍然不起作用。这很好，但不是我所期望的。在plainjs.com网站上，它说：当创建一个命名为“function$（）{}”的帮助函数时，你可以使用$（…）来获取元素，就像使用jQuery一样；你甚至可以传递一个上下文元素“@vik是的，你可以，但这并不意味着你可以像jQuery一样使用它，你仍然需要迭代collection@michael是的，我更新了。用词不当：）准确地说：）这不应该比这更有效吗？函数selectElement（el）{var element=document.queryselectoral（el）；for（var i=0；i[].slice.call（foo）.forEach
    ，而您只需执行
    [].forEach.call即可（
    ？谢谢@torazaburo，我不知道我可以这样称呼它，Too最好设置
    backgroundColor
    。设置
    background
    可能会设置
    background
    速记属性中所有其他与背景相关的属性。以前没有，但你是对的，这更准确。

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

    

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