捕获具有数据属性的 html 元素 - javascript ".querySelector"

Posted 2023-03-05

【中文标题】捕获具有数据属性的 html 元素 - javascript ".querySelector"

【英文标题】：capture an html element with data-attribute - javascrit ".querySelector"

【发布时间】：2020-12-18 05:42:31

【问题描述】：

const footer = article.querySelector('footer');  //gets the node correctly

然后

comments = footer.querySelector('span[data-sigil="comments-token"]'); //doesn't capture the node

这是我要遍历的片段（其中存在具有 data-sigil="cmets-token" 属性的 span 元素）

<footer class="_22rc" data-ft="&quot;tn&quot;:&quot;*W&quot;">
    <div class="_2ip_ _4b44" id="feedback_inline_2988733091416038" data-sigil="mufi-inline">
        <div class="_34qc _3hxn _3myz _4b45"><a
                href="/groups/2965875847035096?view=permalink&amp;id=2988733091416038&amp;anchor_composer=false&amp;refid=18&amp;_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&amp;__tn__=%2AW-R"
                role="button" data-sigil="feed-ufi-trigger">
                <div class="_rnk _77ke _2eo- _1e6 _4b44" id="u_0_3f" data-sigil="reactions-bling-bar">
                    <div class="_1w1k" data-sigil="reactions-sentence-container"><span class="_qfz _77kf">
                            <div class="_1g05 _77lc" style="z-index:3"><i class="img sp_t0F5GNpHI8g sx_bb89e7"
                                    role="presentation"><u>Mi piace</u></i></div>
                        </span>
                        <div class="_1g06" aria-label="4 ha aggiunto reazioni, tra cui Mi piace">4</div>
                    </div>
                    <div class="_1fnt"><span class="_1j-c" data-sigil="comments-token">Commenti: 5</span></div>
                </div>
            </a></div>
        <div class="_52jh _7om2 _15kk _15ks _15km _4b47 _4b46" data-sigil="ufi-inline-actions">
            <div class="_52jj _15kl _3hwk _4g34"><a class="_15ko _77li touchable"
                    data-store="&quot;reaction&quot;:0,&quot;feedbackTarget&quot;:2988733091416038,&quot;kaiosReactions&quot;:false"
                    aria-pressed="false" role="button" data-ft="&quot;tn&quot;:&quot;>&quot;" id="u_0_3g"
                    data-sigil="touchable ufi-inline-like like-reaction-flyout" data-autoid="autoid_40"
                    data-uri="https://m.facebook.com/ufi/reaction/?ft_ent_identifier=2988733091416038&amp;reaction_type=1&amp;story_render_location=group&amp;feedback_source=2&amp;is_sponsored=0&amp;ext=1598970363&amp;hash=AeQxJKCaVFJm_BkK&amp;refid=18&amp;_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&amp;__tn__=%3E%2AW-R">Mi
                    piace</a>
                <div class="_1ekf" role="link" tabindex="-1" data-sigil="screenreader-reactions-trigger">Vedi altre
                    reazioni</div>
            </div>
            <div class="_52jj _15kl _3hwk _4g34"><a class="_15kq _77li"
                    data-click="&quot;event&quot;:&quot;click_comment_ufi&quot;,&quot;target_id&quot;:2988733091416038"
                    href="/groups/2965875847035096?view=permalink&amp;id=2988733091416038&amp;fs=2&amp;focus_composer=0&amp;refid=18&amp;_ft_=qid.6866412159452221316%3Amf_story_key.2988733091416038%3Agroup_id.2965875847035096%3Atop_level_post_id.2988733091416038%3Atl_objid.2988733091416038%3Acontent_owner_id_new.100015580839785%3Apage_id.2965875847035096%3Asrc.22%3Aphoto_attachments_list.%5B875714729624547%2C875714799624540%2C875714842957869%2C875714896291197%5D%3Aphoto_id.875714729624547%3Astory_location.6%3Astory_attachment_style.album%3Afilter.GroupStoriesByActivityEntQuery%3Atds_flgs.3%3Apage_insights.%7B%222965875847035096%22%3A%7B%22page_id%22%3A2965875847035096%2C%22page_id_type%22%3A%22group%22%2C%22actor_id%22%3A100015580839785%2C%22dm%22%3A%7B%22isShare%22%3A0%2C%22originalPostOwnerID%22%3A0%7D%2C%22psn%22%3A%22EntGroupMallPostCreationStory%22%2C%22post_context%22%3A%7B%22object_fbtype%22%3A657%2C%22publish_time%22%3A1598609550%2C%22story_name%22%3A%22EntGroupMallPostCreationStory%22%2C%22story_fbid%22%3A%5B2988733091416038%5D%7D%2C%22role%22%3A1%2C%22sl%22%3A6%7D%7D&amp;__tn__=S%2AW-R"
                    data-ft="&quot;tn&quot;:&quot;S&quot;"
                    data-sigil="feed-ufi-focus feed-ufi-trigger ufiCommentLink mufi-composer-focus">Commenta</a></div>
        </div>
    </div>
</footer>

【问题讨论】：

你能添加你用来获取节点的代码吗？

写好了，cmets = footer.querySelector('span[data-sigil="cmets-token"]');

【参考方案1】：

你给出的例子很有效。见https://jsfiddle.net/zmg8sc7h/

也许article.querySelector('footer'); 正在寻找另一个页脚部分，而不是您所期望的。试试article.querySelectorAll('footer'); 或document.querySelectorAll('footer'); 看看你得到了多少结果，或者试着让那部分更具体，比如document.querySelector('footer._22rc');

你也可以直接选择你想要的，而不是通过两个查询。

document.querySelector('footer span[data-sigil="comments-token"]');