如何查找名称属性包含单词“geeks”并设置背景颜色的所有div？

当我们需要在HTML页面中找到特定的元素并进行样式设置时，我们可以使用JavaScript来操作DOM（Document Object Model）。在这个例子中，我们将展示如何使用JavaScript查找名称属性包含单词"geeks"并设置背景颜色的所有div元素。

1. 使用querySelectorAll方法

我们可以使用querySelectorAll方法来查找所有满足指定选择器的元素。在这个例子中，我们将使用属性选择器来选择名称属性包含单词"geeks"的div元素。

const divs = document.querySelectorAll('div[name*="geeks"]');

上面的代码将返回一个NodeList对象，其中包含所有满足条件的div元素。接下来，我们可以遍历这个NodeList并对每个元素进行样式设置。

2. 设置背景颜色

要设置元素的背景颜色，我们可以使用元素的style属性并为其设置backgroundColor属性。

divs.forEach(div => {
  div.style.backgroundColor = 'yellow';
});

上面的代码将遍历divs数组中的每个元素，并将其背景颜色设为黄色。你可以根据需要修改背景颜色的值。

完整示例

下面是一个完整的示例代码，将其放在<script></script>标签中，放置在HTML页面的标签内。

<script>
window.onload = function() {
  const divs = document.querySelectorAll('div[name*="geeks"]');
  
  divs.forEach(div => {
    div.style.backgroundColor = 'yellow';
  });
}
</script>

该代码会在页面加载完成后运行，并将名称属性包含单词"geeks"的所有div元素背景颜色设置为黄色。请确保需要操作的div元素在代码运行时已经存在于DOM中。

通过使用上述代码示例，您可以轻松地在HTML页面中查找名称属性包含单词“geeks”的所有div元素，并设置其背景颜色。这将帮助程序员更好地理解如何使用JavaScript和DOM来操作和修改HTML元素。