<div>是HTML中常用的標簽之一，用于定義文檔中的區塊或容器，其中可以包含各種元素和內容。在Web開發中，經常使用JavaScript來操作和控制<div>元素和其中的內容，特別是圖片。通過JavaScript，我們可以實現圖片的動態切換、點擊事件等功能。
以下是幾個代碼案例，詳細解釋了如何使用JavaScript來操作<div>元素中的圖片。
第一個案例是動態改變圖片的路徑。通過JavaScript代碼，我們可以動態地改變<div>元素中圖片的路徑。代碼示例如下：

<p>
// 獲取<div>元素下的img元素
var img = document.querySelector('div img');
<br>
// 改變圖片的路徑
img.src = 'new-image.jpg';
</p>

在上述代碼中，我們通過querySelector方法獲取<div>元素下的<img>元素。然后，通過修改圖片的src屬性，將圖片路徑改為'new-image.jpg'，實現了動態改變圖片的效果。
第二個案例是實現點擊圖片切換功能。通過JavaScript，我們可以給圖片添加點擊事件監聽器，當用戶點擊圖片時，切換至另一張圖片。代碼示例如下：

<p>
// 獲取<div>元素下的img元素
var img = document.querySelector('div img');
<br>
// 給圖片添加點擊事件監聽器
img.addEventListener('click', function() {
// 切換至另一張圖片
if (img.src.endsWith('image1.jpg')) {
img.src = 'image2.jpg';
} else {
img.src = 'image1.jpg';
}
});
</p>

在上述代碼中，我們給圖片添加了點擊事件監聽器。當用戶點擊圖片時，通過對圖片路徑的判斷，可以在兩張不同的圖片之間進行切換。例如，當圖片路徑為'image1.jpg'時，點擊圖片后切換為'image2.jpg'，再次點擊則切換回'image1.jpg'。
第三個案例是實現圖片的隱藏和顯示功能。通過JavaScript，我們可以控制圖片的顯示和隱藏，從而實現一些交互效果。代碼示例如下：

<p>
// 獲取<div>元素下的img元素
var img = document.querySelector('div img');
<br>
// 隱藏圖片
img.style.display = 'none';
<br>
// 顯示圖片
img.style.display = 'block';
</p>

在上述代碼中，我們通過修改圖片的display屬性，可以控制圖片的顯示和隱藏。當display屬性設置為'none'時，圖片會被隱藏；當display屬性設置為'block'時，圖片會重新顯示。
通過以上幾個代碼案例，我們可以看到使用JavaScript操作<div>元素中的圖片非常靈活。我們可以動態改變圖片路徑、實現點擊切換功能以及控制圖片的顯示和隱藏，為網站添加更多交互效果和視覺效果。