Get value of an HTML attribute using class name without id-CodePudding

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

CodePudding user response：

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]`)
}

CodePudding user response：

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

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