时间戳

首页 > 解决方案 > 文档不适用于模板文字

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 但似乎没有用。谢谢

完整代码：

getJobs = async() => {
  try {
    response = await fetch("https://raw.githubusercontent.com/ChrisPrzR/jobs-filtering-app/main/data.json");
    const data = await response.json();
    return data;
  } catch (error) {
    console.log('Error getting data', error)
  }
}

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
}


const main = async() => {
  const companies = document.querySelector('.cards')
  companies.innerHTML = await renderJobs()
}

main()

selector = () => {
  const tagName = Array.from(document.querySelectorAll('.tags')).flatMap(el => el.children)
  console.log(tagName)
}

selector()
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="cards"></div>
  <script src="./app.js"></script>
</body>

</html>

标签： javascripthtmldomtemplate-literals

解决方案

推荐阅读