The next button will add new paragraphs to this section using document.createElement().
This paragraph has id="id1", so the DOM can access it by that id.
The next few paragraphs all have the same CSS class, so they can be accessed using getElementsByClassName
This is useful if you want to edit all of the classed elements in a similar way, but it also means using loops or iterations to access each one.
It even works if there's no CSS rule for that class!
The next button will use document.getElementsByTagName to animate all links on this page
The next button will use document.querySelector() to animate the first element on the page that uses the CSS class "my-class"
The next button will use document.querySelectorAll() to animate all elements on the page that uses the CSS class "my-class". It's going to look identical to running the step2 button.
The next button will add new paragraphs to this section using document.createElement().
The next button will create a new <h3> header using document.createElement() and document.createTextNode().
The next button will create a new <h3> header using document.createElement() and the innerHTML property. Any difference?
The next button will change the background color of <body>