如何解决使用数据属性捕获html元素-javascrit“ .querySelector”
const footer = article.querySelector('footer'); //gets the node correctly
然后
comments = footer.querySelector('span[data-sigil="comments-token"]'); //doesn't capture the node
这是我要遍历的片段(存在具有data-sigil =“ comments-token”属性的span元素)
<footer class="_22rc" data-ft="{"tn":"*W"}">
<div class="_2ip_ _4b44" id="feedback_inline_2988733091416038" data-sigil="mufi-inline">
<div class="_34qc _3hxn _3myz _4b45"><a
href="/groups/2965875847035096?view=permalink&id=2988733091416038&anchor_composer=false&refid=18&_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&__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="{"reaction":0,"feedbackTarget":2988733091416038,"kaiOSReactions":false}"
aria-pressed="false" role="button" data-ft="{"tn":">"}" 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&reaction_type=1&story_render_location=group&feedback_source=2&is_sponsored=0&ext=1598970363&hash=AeQxJKCaVFJm_BkK&refid=18&_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&__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="{"event":"click_comment_ufi","target_id":2988733091416038}"
href="/groups/2965875847035096?view=permalink&id=2988733091416038&fs=2&focus_composer=0&refid=18&_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&__tn__=S%2AW-R"
data-ft="{"tn":"S"}"
data-sigil="feed-ufi-focus feed-ufi-trigger ufiCommentLink mufi-composer-focus">Commenta</a></div>
</div>
</div>
</footer>
解决方法
你给出的例子有效。见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"]');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。