时间戳

首页 > 解决方案 > 查询选择器不适用于模板文字

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

问题描述

我有一个脚本，它呈现一些 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 上的所有子项。所以我可以稍后循环它们并只渲染具有特定内容的卡片。

这是该片段：

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

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

标签： javascripthtmldom

解决方案

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

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

推荐阅读