how to modify html using javascript after the page loads

Question

I am new to js and learning how to modify html using js,i want to modify:

<video controls="" controlslist="download" src="//storage.googleapis.com/media-session/caminandes/short.mp4#t=80">&lt;</video>

To...

<video controls="" controlslist="nodownload" src="//storage.googleapis.com/media-session/caminandes/short.mp4#t=80">&lt; </video>

After the page loads, i want to change controlslist="download" to controlslist="nodownload"

page src: https://googlechrome.github.io/samples/media/controlslist.html

Answer 1

Use onload event like below

window.onload = function() {

    // select your expected video tag 
    // change attribute controlslist value to expected one 

}

Full Code:

window.onload = function() {
    // select your expected video tag 
    // change attribute controlslist value to expected one 
    var searchString = "t=80";
    var videos = document.getElementsByTagName("video");
    for (let item of videos) {
        if (item.getAttribute("src").includes(searchString)) {
            item.setAttribute("controlslist", "Anything I want")
        }
    }
}