How identify element by ai keyword?

Question

In the following code, there is a way to identify the "li class=""...> who has a "a id=""...>" tag with a specific ai="2711766". How can i identify them by "ai"? If were "id" i would use "getElementById" but in this case, identify by "ai", i don't know how to do it!

...
<li class="" style="background-color: rgb(246, 237, 245);"> … </li>
<li class="" style="background-color: rgb(246, 237, 245);"> … </li>
<li class="" style="background-color: rgb(246, 237, 245);">
    <a id="a_32447396" class="aVideo" ai="2711766" i="há 4 horas">
        <div class="imgVideo" onmouseover="startThumbSlide('32447396', '0')">
            <div class="photo2">
                <div id="f_32447396" class="lazyVideos"></div>
            </div>
        </div>
        <h3 style="color: rgb(133, 6, 123);"> … </h3>
    </a>
    <p> … </p>
</li>
<li class=""> … </li>
<li class="" style="background-color: rgb(246, 237, 245);"> … </li>
<li class="" style="background-color: rgb(246, 237, 245);"> … </li>
...

Thank you!

Answer 1

try using data attriubte.

  <a id="a_32447396" class="aVideo" data-ai="2711766" data-i="há 4 horas">

You can reach the values with dataset like this:

var el = document.getElementById('a_32447396')
console.log(el.dataset.ai); //2711766

Answer 2

The ai is an attribute. Knowing this you could get the value searching the element by tag name using getElementsByTagName instead by id and then get the attribute like this:

var element = document.getElementsByTagName("a")[0]; // in this example the first link is taken!
alert(element.getAttribute("ai"));

Output is:

2711766

The drawback of this is, that you will get all elements of the given type (fe links - a) and you need to iterate over them.