如何使用原生JavaScript获取class为section-header的div内指定元素

没问题，咱们直接用原生JS来完成你需要的元素定位，完全不需要依赖任何外部库，步骤如下：

1. 定位目标父容器（.section-header 的 div） #

首先我们要找到最外层的目标容器，这里可以用 querySelector 方法，它能直接通过CSS选择器匹配元素：

// 获取class为section-header的div元素
const sectionHeader = document.querySelector('.section-header');

如果页面中有多个 .section-header 元素，你可以改用 querySelectorAll 来获取所有匹配元素，再遍历处理单个元素。

2. 在容器内查找第一个目标元素：name为"bid"的input #

拿到父容器后，我们可以在它的上下文里继续用 querySelector 查找，这样只会在该容器内部搜索，避免全局匹配干扰：

// 在sectionHeader内部查找name属性为"bid"的input
const bidInput = sectionHeader?.querySelector('input[name="bid"]');

这里用了可选链操作符 ?.，如果 sectionHeader 不存在（比如AJAX返回的内容还没加载），代码不会抛出错误，而是返回 null，更安全。

3. 在容器内查找第二个目标元素：class为"item-i"的div #

同样在父容器上下文内查找，不过这里要注意：你的示例HTML里的目标div的class是 item-i-15-5 ... item-i-blue，并不是精确的 item-i。我会分两种情况处理：

情况A：精确匹配class为"item-i"的div #

如果确实需要找class完全等于item-i的元素：

// 精确匹配class为item-i的div
const itemIDiv = sectionHeader?.querySelector('div.item-i');

情况B：匹配class中包含"item-i"的div（适配你的示例HTML） #

如果实际场景是要找类名里包含item-i的元素（比如你的示例里的item-i-15-5），可以用属性包含选择器：

// 匹配class属性中包含item-i的div
const itemIDiv = sectionHeader?.querySelector('div[class*="item-i"]');

或者用 getElementsByClassName 结合遍历（不过querySelector更简洁）：

// 另一种方式：获取所有包含item-i类的元素，取第一个
const itemIElements = sectionHeader?.getElementsByClassName('item-i');
const itemIDiv = itemIElements?.[0];

完整代码示例 #

把上面的步骤整合起来，加上错误处理：

// 等待AJAX内容加载完成后执行（比如放在AJAX回调里）
function findTargetElements() {
    // 1. 获取父容器
    const sectionHeader = document.querySelector('.section-header');
    if (!sectionHeader) {
        console.log('未找到class为section-header的div元素');
        return;
    }

    // 2. 获取name为bid的input
    const bidInput = sectionHeader.querySelector('input[name="bid"]');
    if (bidInput) {
        console.log('找到bid按钮：', bidInput);
        // 可以在这里操作元素，比如获取值：bidInput.value
    } else {
        console.log('未找到name为bid的input元素');
    }

    // 3. 获取class包含item-i的div（适配示例）
    const itemIDiv = sectionHeader.querySelector('div[class*="item-i"]');
    if (itemIDiv) {
        console.log('找到item-i相关div：', itemIDiv);
        // 比如获取它的data属性：itemIDiv.dataset.priceGold
    } else {
        console.log('未找到class包含item-i的div元素');
    }
}

// 调用函数（确保在AJAX内容渲染后执行）
// findTargetElements();

关键说明 #

• 所有操作都基于原生DOM API，没有依赖任何外部库，完全符合你的需求。
• 使用 querySelector 比 getElementById/getElementsByClassName 更灵活，支持所有CSS选择器语法。
• 可选链 ?. 是ES6+的语法，如果需要兼容旧浏览器，可以换成条件判断（比如 if (sectionHeader) { ... }）。

内容的提问来源于stack exchange，提问作者Rony