如何正确选择所有带oneLineEventItem类的collectionitem元素并打印其值？

问题1：选择器错误导致第一个元素未选中 #

你原来的选择器div[collectionitem] ~ .oneLineEventItem是选中拥有collectionitem属性的div的后续兄弟元素中带有oneLineEventItem类的元素，这和你实际需求（同时拥有oneLineEventItem类与collectionitem属性的div）完全不符。正确的选择器应该是：

document.querySelectorAll("div.oneLineEventItem[collectionitem]")

这个选择器会精准匹配所有同时满足两个条件的div元素，不会遗漏第一个目标元素。

问题2：打印节点而非元素值 #

直接打印result会输出整个DOM节点对象，要获取元素的具体值分两种常见场景：

• 若要获取元素的文本内容：使用textContent属性，搭配trim()可去除多余空格
• 若要获取collectionitem属性的属性值：使用getAttribute('collectionitem')

完整代码示例 #

获取元素文本内容

document.querySelectorAll("div.oneLineEventItem[collectionitem]").forEach((item) => {
    console.log(item.textContent.trim())
})

获取collectionitem属性值

document.querySelectorAll("div.oneLineEventItem[collectionitem]").forEach((item) => {
    console.log(item.getAttribute('collectionitem'))
})

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