If you do not care at all about supporting Internet explorer there is a new element method called closest. This method can be used as a way to get the closest element that matches a given query string. There are pollyfills, but it might still be best to just use the older properties if you just simply want to get the parent element and not much of anything else. However there might be a few other little tips and tricks when it comes to getting a parent element, from a starting element in a dom element tree so I should get around to writing about some of these attentional options beyond just parentEmenet, and parentNode.
First off there are the el.parentElement, and el.parentNode properties that come to mind when it comes to the first solution for this sort of thing. First off a reference to the element to which I want to find the parent for, any method for doing so will work find for that such as document.getElementById or document.querySelector. Once that has been obtained the parentElement or parentNode properties of an element of interest will refer to the parent element of that element if it has one.
Once a reference to an element is gained by use of a method like getElementById or querySelector, there is the parentElement property of the element reference if it has one. This property is there to get a parent DOM element rather than a node in general, as there are some kinds of nodes that are often used that are not really actual html elements, such is the case with things like SVG. Tis then is the main different between parent element and parent node, the node property is more general and should work with nodes in general and not just standard html elements that are part of an html spec.
In the event that the element does not have a parent element, or the parent element is not a DOM element the property will have a value of null. This might be desired in some cases as the value of null will evaluate to false and can then be used as a way to break out of looping for example.
In the event that the node is not a DOM node it will return null, this would make sense because the name of the property is indeed parent element, so if the parent is NOT A DOM Element, but some other kind of node then it should return false. If for some reason I want to use another property that will work with nodes in general then there is the parent node property which might be a more robust option for this sort of thing.
Another option is the parent node property, this works in more or less the same way as parentElement but with one note worthy difference. If there is a non DOM element node of sorts it will give that in place of what would otherwise be a null value when using the parent element property.
So a modern option now is the closest element method that works on most modern browsers. One draw back though is that it will get the closest element that matches the query string including the element from which it is called. So it may not work out so well when it comes to getting the parent element depending on the situation, and how it is used. However I think that it is of course work mentioning here in this post, as the method strikes me as a more flexible way of getting elements near a target element of interest. There is of course going beyond just getting that parent element, and being able to get any element that meets a given query that is near a given element regardless if it is a parent or a child element.
So for now I am not aware of any native browser method that can be used to get all the parent elements of a given element, but it is not to hard to write one.
The solution I put together for this in a flash just involves looping until the current parentNode equals the document element. For each loop that the current parent node is not the document just keep pushing the parent node to an array and then return the array once the looping has finished. I can do whatever it is that I want to do with all the parent nodes, using an array method like filter to get all the ones I want for example.
Making a variation of this that looks at the class name property would not be so hard as well, and this could also be developed into a pollyfill for the closest method that I wrote about in a previous section.
So a related topic of interest when it comes to getting parent elements is the subject of event bubbling. When an element is clicked for example it will fire an on click event that is set for that element, but it will also bubble up to the top most parent element and fire event handlers all the way up unless this is stopped.
So when it comes to event handers the target property of the event object will refer to the element where the event happened and the current target property will refer to the element where the event handler is attached.
As of this writing there is no css selector that I know of that can be used to get a parent element, so there is no way of getting a parent element with querySelector. There is of course chatter about possible future selectors and pseudo classes that might be a way to do so, but so far nothing solid or well supported.
So getting the parent element of an html element reference is just a matter of choosing an option for doing so. There are two main properties that come to mind one of which will work with just html elements, and the other will work with nodes in general for the most part. There are many other ways of doing so, but for the most part there are just those two properties that can be used to just do so and move on.