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

Question

I have this below code. I just want the value of data-pkid attribute in the form of list with JavaScript or JQuery using class name only and without using id. I want to run that particular JS or JQuery on developer console of this Game site

<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>

How can I get output as below form

• [pokecard]R7gc32[/pokecard]
• [pokecard]mwvxW2[/pokecard]
• [pokecard]zZLTRJ[/pokecard]
• [pokecard]j5qWHs[/pokecard]

and so on....... I tried following code

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

Even I looked answers from may website but didn't found useful.

Answer 1

There are some other methods to get the same result 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

Your code has an issue because there are 42 objects with class name 'row'. 'test' references an HTML collection of 42 elements. Since it is an HTML object we can't itrate it with forEach method but we can do it with normal loops for example for loop

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