查询选择器不适用于模板文字

Question

我有一个脚本，它呈现一些 HTML 内容，看起来像这样。

renderJobs = async () => {
const jobs = await getJobs();
const view = `
    ${jobs.map(companyName => `
        <div class="show">
            <div class="company-details">
                <p>${companyName.company}</p>
                <object type="image/svg+xml" data="${companyName.logo}"></object>
                <h3>${companyName.position}</h3>
                <p class="details">${companyName.postedAt} - ${companyName.contract} - ${companyName.location}</p>
            </div>
            <div class="tags">
                <p>${companyName.role}</p>
                ${companyName.languages.map(lang => `
                    <p>${lang}</p>
                `).join('')}
                <p>${companyName.tools}</p>
                <p>${companyName.level}</p>
                
            </div>
        </div>
    `).join('')}
`
return view }

现在，我正在尝试使用类标签选择每个 div 上的所有子项。所以我以后可以循环遍历它们并只渲染具有特定内容的卡片。

这是sn-p：

selector = () => {
const tagName = document.querySelectorAll('.tags').children;
console.log(tagName)}

但它返回未定义，我不知道是否使用模板文字会改变 DOM 的规则。我尝试了事件监听器 DOMContentLoaded 但似乎没有用。 我还尝试了 length 属性以查看 id 是否有任何返回，但我得到的只是 0。 谢谢

Answer 1

querySelectorAll() 返回一个 html 元素列表。所以它没有任何 children 属性。您将不得不遍历所有元素然后获取子元素。如果你想要所有元素的孩子，你可以使用flatMap()

const tagName = [...document.querySelectorAll('.tags')].flatMap(x => x.children);