使用不带 id 的 class 名称获取 HTML 属性的值

Question

我有下面的代码。 我只想要 JavaScript 或 JQuery 列表形式的data-pkid属性值，仅使用 class 名称而不使用 ID。 我想在此游戏网站的开发者控制台上运行特定的 JS 或 JQuery

<div class="container">
    <div class="row hoverclr-electric" id="pokeR7gc32" data-pktype="electric" data-pkid="R7gc32"></div>
    <div class="row hoverclr-dark" id="pokemwvxW2" data-pktype="dark" data-pkid="mwvxW2"></div>
    <div class="row hoverclr-electric" id="pokezZLTRJ" data-pktype="electric" data-pkid="zZLTRJ"></div>
    <div class="row hoverclr-fairy" id="pokej5qWHs" data-pktype="fairy" data-pkid="j5qWHs"></div>
    <div class="row hoverclr-psychic" id="pokezmhrwv" data-pktype="psychic" data-pkid="zmhrwv"></div>
    <div class="row hoverclr-psychic" id="pokemVVB5Q" data-pktype="psychic" data-pkid="mVVB5Q"></div>
    <div class="row hoverclr-psychic" id="pokez26VC5" data-pktype="psychic" data-pkid="z26VC5"></div>
    <div class="row hoverclr-psychic" id="poker3VGC" data-pktype="psychic" data-pkid="r3VGC"></div>
    <div class="row hoverclr-psychic" id="pokeTL75r2" data-pktype="psychic" data-pkid="TL75r2"></div>
    <div class="row hoverclr-psychic" id="pokeBVJ9kC" data-pktype="psychic" data-pkid="BVJ9kC"></div>
    <div class="row hoverclr-rock" id="pokeR5FGJC" data-pktype="rock" data-pkid="R5FGJC"></div>
    <div class="row hoverclr-psychic" id="pokeBVxyy2" data-pktype="psychic" data-pkid="BVxyy2"></div>
    <div class="row hoverclr-water" id="pokeTnZkCP" data-pktype="water" data-pkid="TnZkCP"></div>
    <div class="row hoverclr-water" id="pokehybjcD" data-pktype="water" data-pkid="hybjcD"></div>
    <div class="row hoverclr-water" id="pokemVy88w" data-pktype="water" data-pkid="mVy88w"></div>
    <div class="row hoverclr-grass" id="pokeTLr6ph" data-pktype="grass" data-pkid="TLr6ph"></div>
    <div class="row hoverclr-water" id="pokeL2QFTB" data-pktype="water" data-pkid="L2QFTB"></div>
    <div class="row hoverclr-grass" id="pokerHMHR" data-pktype="grass" data-pkid="rHMHR"></div>
    <div class="row hoverclr-poison" id="pokeTgdd1w" data-pktype="poison" data-pkid="Tgdd1w"></div>
    <div class="row hoverclr-poison" id="pokeLLNZx3" data-pktype="poison" data-pkid="LLNZx3"></div>
    <div class="row hoverclr-poison" id="poke5wTPv5" data-pktype="poison" data-pkid="5wTPv5"></div>
    <div class="row hoverclr-water" id="pokeR5Qhnk" data-pktype="water" data-pkid="R5Qhnk"></div>
    <div class="row hoverclr-psychic" id="pokebZw5K5" data-pktype="psychic" data-pkid="bZw5K5"></div>
    <div class="row hoverclr-psychic" id="pokeLLFq81" data-pktype="psychic" data-pkid="LLFq81"></div>
    <div class="row hoverclr-psychic" id="pokehG7WbY" data-pktype="psychic" data-pkid="hG7WbY"></div>
    <div class="row hoverclr-psychic" id="pokeBVJCR3" data-pktype="psychic" data-pkid="BVJCR3"></div>
    <div class="row hoverclr-psychic" id="poke5p2yLt" data-pktype="psychic" data-pkid="5p2yLt"></div>
    <div class="row hoverclr-rock" id="pokemVr59D" data-pktype="rock" data-pkid="mVr59D"></div>
    <div class="row hoverclr-water" id="pokef4XXQh" data-pktype="water" data-pkid="f4XXQh"></div>
    <div class="row hoverclr-water" id="pokebZQ5Wf" data-pktype="water" data-pkid="bZQ5Wf"></div>
    <div class="row hoverclr-psychic" id="pokeTLnrss" data-pktype="psychic" data-pkid="TLnrss"></div>
    <div class="row hoverclr-ground" id="pokemNMVQ5" data-pktype="ground" data-pkid="mNMVQ5"></div>
    <div class="row hoverclr-steel" id="pokeLLZYNT" data-pktype="steel" data-pkid="LLZYNT"></div>
    <div class="row hoverclr-fire" id="poke5VMNV3" data-pktype="fire" data-pkid="5VMNV3"></div>
    <div class="row hoverclr-fire" id="pokesrP8xW" data-pktype="fire" data-pkid="srP8xW"></div>
    <div class="row hoverclr-steel" id="pokeyy9vVV" data-pktype="steel" data-pkid="yy9vVV"></div>
    <div class="row hoverclr-psychic" id="poke592SQ4" data-pktype="psychic" data-pkid="592SQ4"></div>
    <div class="row hoverclr-steel" id="pokeBqz232" data-pktype="steel" data-pkid="Bqz232"></div>
    <div class="row hoverclr-steel" id="pokebmHgZF" data-pktype="steel" data-pkid="bmHgZF"></div>
    <div class="row hoverclr-psychic" id="poker3VPv" data-pktype="psychic" data-pkid="r3VPv"></div>
    <div class="row hoverclr-fire" id="pokebxLzKp" data-pktype="fire" data-pkid="bxLzKp"></div>
    <div class="row hoverclr-fire" id="pokeBV3vL1" data-pktype="fire" data-pkid="BV3vL1"></div>
</div>

我怎样才能得到 output 如下表

• [扑克牌]R7gc32[/扑克牌]
• [扑克牌]mwvxW2[/扑克牌]
• [扑克牌]zZLTRJ[/扑克牌]
• [扑克牌]j5qWHs[/扑克牌]

等等……我试过下面的代码

var test = document.getElementsByClassName("row");
test.getAttribute("data-pkid");

即使我从可能的网站上查看了答案，但也没有发现有用的信息。

Answer 1

还有一些其他方法可以得到相同的结果 1

document.querySelectorAll('.container>div').forEach(n=> )
 console.log(`[pokecard]${n.getAttribute('data-pkid')}[/pokecard]\n`)
)

2个

 document.querySelectorAll('.row').forEach(n=> 
 console.log(`[pokecard]${n.getAttribute('data-pkid')}[/pokecard]\n`)
)

Answer 2

您的代码有问题，因为有 42 个对象的 class 名称为“行”。 'test' 引用 HTML 的 42 个元素集合。 因为它是一个 HTML object 我们不能用 forEach 方法迭代它但是我们可以用普通循环来做，例如 for 循环

for(i=0;i<test.length;i++){
   console.log(`[pokecard]${test[i].getAttribute('data-pkid')}[/pokecard]`)
}