网站上的 JavaScript 不能"select"元素

Question

我最近开始重新设计我的网站，主要是添加功能或重写代码。现在，我想添加一个社交页面(与我的社交媒体链接)，我希望我的JavaScript从json文档导入卡片。为此，我需要选择socialsTitle,socialsLink,socialsLinkDisplay和socialsIcon-元素来输入它们的值。对于选择这些元素。我这样做了，但是唯一返回null的元素是socialsLink。

JS:

const socialsTitle = socialsCard.querySelector("[socialsTitle]");
const socialsLink = socialsCard.querySelector("[socialsLink]");
const socialsLinkDisplay = socialsCard.querySelector("[socialsLinkDisplay]");
const socialsIcon = socialsCard.querySelector("[socialsIcon]");

HTML:

<template socialsTemplate>
<a target="_blank" class="card socialsElement" socialsLink>
<img alt="" class="appIcon socialsElement" socialsIcon />
<h1 class="appDetails socialsElement">
<p class="appName socialsElement" socialsTitle></p>
<p class="appLink socialsElement" socialsLinkDisplay></p>
</h1>
</a>
</template>

Answer 1

我认为socialsCard是具有socialsLink属性的元素。querySelector用于在调用它的元素中查找子节点。