Exploring the DOM

Method Demonstrations

Seven distinct working examples of different DOM methods.

1. addEventListener()
2. removeEventListener()
3. querySelector()
4. querySelectorAll()
5. getAttribute()
6. removeAttribute()
7. insertAdjacentHTML()
8. insertAdjacentText()
9. appendChild()
10. toString()
11. matches()
12. normalize()

1 & 2 | add and remove event listeners

Click the add listener button to have a function invoked by the press of the 'b' and/or 'w' key. 'b' will turn the document body dark with light font, and 'w' will revert back to normal. Click the remove listener button to no longer invoke the function when pressing the 'b' or 'w' keys.

3 & 4 | query selector and query selector all

In the unordered list at the top of the page I gave all of the list items classes that are relevant to the sort of grouping/type of method. I will be using those classes in this example.
Select a class from the drop down, and then choose to view the results of either using querySelector() or querySelectorAll() by pressing the corresponding button.

5 | insert adjacent text and html

6 & 7 | add and remove attributes

Test Element