div 查找class

<b>div</b> 是HTML中最常用的元素之一，用于創建塊級容器。它可以用于組織和布局網頁的各個部分，并且可以通過添加一個或多個 <b>class</b> 屬性為其設置樣式。

在HTML中，可以通過使用 JavaScript 來查找特定 class 的 div 元素。一種常用的方法是使用 <b>querySelectorAll</b> 方法配合 CSS 選擇器來實現。

示例 1：

<div class="container">
<h1>這是一個標題</h1>
<p class="content">這是一個段落內容</p>
</div>
<br>
        <script>
// 使用querySelectorAll查找 class 為 "container" 的 div 元素
var divs = document.querySelectorAll('.container');
console.log(divs);
</script>

在上面的示例中，我們通過選擇器 ".container" 來查找所有的 class 為 "container" 的 div 元素。使用 <b>querySelectorAll</b> 方法返回了一個 NodeList 對象，其中包含了所有符合條件的 div 元素。我們通過打印輸出 divs 變量，可以看到返回的 NodeList 對象中包含了對應的 div 元素。

示例 2：

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<br>
        <script>
// 使用querySelectorAll查找 class 為 "box" 的 div 元素，并添加特定樣式
var boxes = document.querySelectorAll('.box');
boxes.forEach(function(box) {
box.style.backgroundColor = 'yellow';
box.style.padding = '10px';
});
</script>

在上面的示例中，我們通過選擇器 ".box" 來查找所有的 class 為 "box" 的 div 元素。然后，我們通過遍歷 NodeList 對象中的每個元素，并為每個元素添加了特定的樣式（背景色為黃色，內邊距為10像素）。這樣，所有符合條件的 div 元素都將被應用相同的樣式。

通過使用 JavaScript 中的 <b>querySelectorAll</b> 方法結合 CSS 選擇器，我們可以方便地查找指定 class 的 div 元素，然后對其進行操作，無論是修改樣式、添加事件監聽器還是執行其他操作。這使得我們實現動態、靈活、可交互的網頁變得更加容易。