- Here is what we will be covering in the DOM section (keep in mind that these are just a few lines of code, DOM manipulation is a vast subject):
document.getElementByID('Name_of_ID'); // Grabs the element with the ID name from the connected HTML file
document.getElementByClassName('Name_of_Class'); // Grabs the element with the class name from the connected HTML file
document.getElementByTagName('Name_of_Tag'); // Grabs a specific tag name from the connected HTML file
-
There are also methods we can use to access different things within our HTML files such as
addEventListener,removeEventListener, and many more. -
Most of what the DOM does is change, replace, edit, or in some form, manipulate the HTML file or webpage that you're working on. For us to successfully manipulate the DOM, we use events.
-
These events are added to HTML tags to work with our JavaScript file. Some of the more important events that are used a lot, you can find here:
-
onclick: Activates when a user clicks on the specific element
-
onmouseover: Activates when a user hovers over a specific element
-
onload: Activates when the element has loaded
-
You can find a complete list here: https://www.w3schools.com/js/js_htmldom_events.asp
-
-
Now when a user clicks on the Click Me button, an alert pops up that says
POP!!! -
The Document Object Model (DOM) has a ton of resources, and combining that with CSS will help your webpage POP.
-
Eventually, if you take on web development or front-end programming, then you'll not only gain knowledge around the
DOM, but you'll be able to manipulate a virtual DOM using React, cut your code in half using jQuery, and even combine your skills with PHP or Nodejs files for server manipulation.
- To learn more about XSS exploitation, detection and how to prevent it, go to Next Steps