<think>我们需要使用原生JavaScript
获取某个
div元素下的所有图片DOM元素（即img
标签）。可以通过以下方法实现：
1. 首先
获取到该
div元素，可以通过id、class、
标签名等方式，这里以id为例。
2. 使用该
div元素的getElementsByTagName方法，传入"img"作为参数，
获取该
div下所有的img元素。
3. 返回的结果是一个HTMLCollection（类似数组的对象），我们可以将其转换为数组以便于操作（如果需要数组形式）。
注意：这个方法只会
获取直接子元素和后代元素中的img
标签，符合题意。
示例代码：
```javascript
// 假设
div的id为"container"
var container = document.getElementById('container');
//
获取该
div下所有的img元素
var images = container.getElementsByTagName('img');
// 此时images是一个HTMLCollection，我们可以把它转换为数组（可选）
var imageArray = Array.prototype.slice.call(images);
```
如果使用更现代的方法（ES6），可以用Array.from：
```javascript
var imageArray = Array.from(images);
```
另外，如果
div是通过其他方式
获取的（比如通过class），则可以使用querySelectorAll，这样更灵活：
```javascript
// 通过class
获取div，例如class为"gallery"
var container = document.querySelector('.gallery');
// 使用querySelectorAll
获取该
div下的所有img元素
var images = container.querySelectorAll('img');
// 此时images是一个NodeList，也可以转换为数组
```
注意：getElementsByTagName返回的是动态集合，而querySelectorAll返回的是静态集合。
根据用户要求，我们只需要
获取图片DOM，因此以上两种方法都可以。
完整示例（使用id和getElementsByTagName）：
```javascript
function getAllImagesUnder
Div(
divId) {
var
div = document.getElementById(
divId);
if (!
div) {
console.error('
Div not found!');
return [];
}
var images =
div.getElementsByTagName('img');
return Array.prototype.slice.call(images); // 返回数组形式
}
```
或者使用querySelectorAll（可以支持更复杂的选择器，但这里只需要img）：
```javascript
function getAllImagesUnder
Div(
divId) {
var
div = document.getElementById(
divId);
if (!
div) {
console.error('
Div not found!');
return [];
}
var images =
div.querySelectorAll('img');
return Array.from(images); // 返回数组形式
}
```
根据问题，我们只需
获取div下的所有图片dom，因此以上方法都是可行的。
注意：如果
div是动态生成的，要确保在DOM加载完成后执行，或者将代码放在
div之后。
§§相关问题§§
1. 如何只
获取div直接子元素中的图片（不包括后代元素中的图片）？
2. 使用getElementsByTagName和querySelectorAll
获取的元素集合有何区别？
3. 如何筛选特定属性（如带有src属性或特定class）的图片元素？
4. 在JavaScript中如何异步加载
获取到的图片资源？
5. 如何监听
div下所有图片的加载完成事件？
</think>使用原生 JavaScript
获取指定
div 下的所有图片 DOM 元素，可通过以下方法实现：
### 方法 1：使用 `getElementsByTagName()`
```javascript
//
获取目标
div（示例使用 id 选择器）
const target
Div = document.getElementById('container');
//
获取 div 内所有 img 元素
const images = target
Div.getElementsByTagName('img');
// 转换为数组操作（可选）
const imageArray = Array.from(images);
```
### 方法 2：使用 `querySelectorAll()`（推荐）
```javascript
//
获取 div 下所有 img 元素（支持 CSS 选择器）
const images = document.querySelectorAll('#container img');
// 直接操作 NodeList
images.forEach(img => {
console.log(img.src);
});
```
### 注意事项：
1. **选择器灵活性**：`querySelectorAll` 支持复杂选择器（如 `#gallery > .item img`）
2. **动态性差异**：
- `getElementsByTagName` 返回动态 HTMLCollection（元素变化时自动更新）
- `querySelectorAll` 返回静态 NodeList（需重新查询
获取更新）
3. **兼容性**：两者均支持 IE9+ 及所有现代浏览器
4. **空白处理**：会包含隐藏图片（需额外用 `img.offsetParent !== null` 过滤）
### 完整示例：
```html
<
div id="gallery">
<img src="cat.jpg">
<
div class="item">
<img src="dog.png">
</
div>
<img src="bird.svg">
</
div>
<script>
//
获取所有图片
const galleryImages = document.querySelectorAll('#gallery img');
// 遍历操作
galleryImages.forEach((img, index) => {
console.log(`图片 ${index + 1}: ${img.src}`);
img.style.border = '2px solid red'; // 添加样式
});
</script>
```
本文介绍了一种使用jQuery的each方法遍历指定元素，并动态修改其href属性的方法，通过添加参数'type'和对应的索引值，实现对每个元素的个性化链接设置。
扫一扫
2003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
