event.target in Javascript
What is an event.target and how to utilize it to manipulate your DOM
Trying to access different elements in your HTML can be frustrating. event.target attributes/properties followed by a specific element property can help you manipulate or find the data you need quickly and efficiently.
If you’re trying to capture a specific element node in thousands of lines of HTML, it can be easy to get lost. If you open up your console in Chrome, you can see a box with a mouse over it in the far left top corner. When clicked, you can then click anywhere on your browser to locate a specific element and manipulate it as you please.
event.target essentially works the same way. If you place a debugger anywhere after a document.addEventListener, you can click anywhere in the associated browser to halt any code after, and observe the HMTL of what you clicked.
Instead of document, we are looking at submitForm, which I have found by using querySelector within my document. In this way, I can easily manipulate and grab data from within this form to do what I want with it — ultimately, when someone submits a form to add a new pokemon, I want to manipulate my page to display that pokemon.
By entering information and clicking submit, the debugger will do its job of stopping all subsequent code and allow me to manipulate or locate specific pieces of information that I want within my console.
*Note: you must have your console open for your debugger to work.
Now for the fun part!
In your console, typing event will bring up different elements that can then be further delved into by adding it to the event. In our case, we can want information from within our submit form using target.
We have our targeted a specific piece of HTML! In order to grab what we want from this HTML, we can add another property to our event.target. For example, if I wanted to grab the name value that the user put into the form (after he/she has clicked submit), I could do the following:
Now, I know what I want and can now grab my selected value and do what I want with it! Although this is one way to capture the value, there are various other ways in which you can do this. Sometimes, you won’t even need to use event.target, but it’s definitely worth playing around with to see all the elements that can help you grab what you need.
Difference between parentElement and parentNode
When looking at the image above, we can’t really see the difference between what a parentNode and a parentElement does because we’re actually seeing the same results returned. However, in the next image, we can really see how the differences stand out.
In order to fully understand the difference, we have to understand the difference between a node and an element. The main takeaway is that a node object represents a single node in the document. A node can be any of the following, an element, attribute, text, document, etc. It is any DOM object. An element is a specific type of node and contains body, div, table, input elements.
When looking at the above image, the parentNode can continue on to return a document node because a document is a type of node. However, we see null when the parentElement tries to call the document because a document node is not contained inside of the element node.
