How to adapt this function to work without needing the element ID?

Question

I have a function and want to adapt it to work without needing the element ID (document.getElementById("slides");). I saw that there is the possibility to do this using the operator NEW but I had difficulties. Have some practical example that can help?

pg      = 0;
sg      = 20000;
ft      = document.getElementById("slides");
sn      = ft.getElementsByTagName("div");
tt      = sn.length-1;
st      = ["content-slide show-slide", "content-slide"];

//onclick
function slide(i){"proximo"==i&&md_n(),"anterior"==i&&md_p()}

//próximo
function  md_n(){
    if(pg < tt){
        pg=pg+1;
        sn.item(pg).setAttribute("class", st[0]);
        if(pg > 0){
            sn.item(pg-1).setAttribute("class", st[1]);
        }
    }else if(pg > 0 && pg == tt){
        pg=0;
        sn.item(pg).setAttribute("class", st[0]);
        sn.item(tt).setAttribute("class", st[1]);
    }
    console.log("slide: "+pg);
}

//anterior
function md_p(){
    if(pg > 0){
        pg=pg-1;
        sn.item(pg).setAttribute("class", st[0]);
        if(pg > -1){
            sn.item(pg+1).setAttribute("class", st[1]);
        }
    }else if(pg > -1 && pg != tt){
        pg=sn.length-1;
        sn.item(pg).setAttribute("class", st[0]);
        sn.item(pg-(tt)).setAttribute("class", st[1]);
    }
    console.log("slide: "+pg);
}
//play
start = setInterval(function(){md_n()}, sg);

Answer 1

Without id, one option is to search for the class property. document.getElementsByClassName("nome_da_class");.

Note that this returns an array, independent of finding a single element.

Example

var e = document.getElementsByClassName("nome_da_class");
console.log(e[0]); // imprime no console o primeiro que encontrou.

To have everyone you found, make a loop of repetition

for (var i = 0; i < e.length; i++) {
    console.log(e[i]);
}

Otherwise you would have to read the entire document across all documents until you find specific properties of the element you are looking for like tag name, width, height, etc.

Be aware that I have posted only examples, without error handling. For example, at least you should check if something was found, if it did not return false, null or Undefined, at last.

Answer 2

This way you can select elements with standard css selectors.

querySelector() returns an element (the first one you find), or none (if there is no element with the desired property)

Already querySelectorAll() returns all elements (array) with the desired property, if any

var heyClass = document.querySelectorAll('.hey')[0]; // primeiro elemento
var heyData = document.querySelector('[data-name="yoo"]'); // primeiro elemento
var spanTag = document.querySelectorAll('span')[0]; // primeiro elemento

console.log(heyClass);
console.log(heyData);
console.log(spanTag);

<div class="hey"></div>
<div data-name="yoo"></div>
<span></span>