JS DOM Traversal Cheat Sheet By Web Dev Simplified https://courses.webdevsimplified.com Element vs Node Node Element Anything within an HTML document Types Only HTML Elements including comments, text, HTML <span>, <div>, <body>, <a>, etc. elements and much more “text”, <!-- comment -->, <span> Methods/Properties Which To Use HTMLCollection vs NodeList A special type of node with all the methods/properties of a node plus additional methods/properties Almost always use elements The most basic HTML piece with only the most basic methods/properties Can contain non-HTML elements so nodes are generally harder to work with NodeList HTMLCollection Anything within an HTML document Element Types Only HTML Elements including comments, text, HTML <span>, <div>, <body>, <a>, etc. elements and much more “text”, <!-- comment -->, <span> Available Array Methods map, forEach, reduce, filter, etc. None Only forEach Always Sometimes Live Updates When a new element is added to the page and it would match the elements in the list it is automatically added to the list Which To Use Generally don’t use as live updates can lead to hard to fix bugs Use static NodeLists or convert to an array since arrays have many additional methods such as map and reduce Parent Name parentElement Return Type Element a.parentElement parentNode Description a.parentNode div Select the parent element of the current element Select the div parent of the a Node Results Select the div parent of the a “text” a.closest(“.c”) Element element that matches the CSS selector Select the first ancestor of the a tag with the class c span a .c Select the closest ancestor closest span div Select the parent node of the current element a “text” div a b Descendants Name getElementById Return Type Results Description Select the first element that Element document.getElementById(“b”) matches the id Select the element with the id b Only works on the document Select all elements that match getElementsByClassName div.getElementsByClassName(“a”) HTMLCollection Elements Only Live the class name that are getElementsByTagName div.getElementsByTagName(“b”) Elements Only Live specific type that are Elements Only Static the CSS selector that are children div.children childNodes div.childNodes HTMLCollection Elements Only Live NodeList All Nodes Live b b .a .b .a .b .a .b .a .b .b .a div “text” a span div Select all child nodes of the Select the child nodes of the div .a span Select all child elements of the current element .b div element Select the child elements of the div a span is a descendant of the current current element b div element Select the first element with the class a that is a descendant of the div .a a descendants of the current matches the CSS selector that .b span a Select all element with the class a that are descendants of the div Element .b div element Select the first element that querySelector div.querySelector(“.a”) .b descendants of the current Select all elements that match querySelectorAll div.querySelectorAll(“.a”) .a .a Select all b elements that are descendants of the div NodeList span element Select all elements of a #d #c div descendants of the current Select all elements with the class a that are descendants of the div HTMLCollection #b #a “text” a span Siblings Name nextElementSibling div.nextElementSibling nextSibling div.nextSibling previousElementSibling div.previousElementSibling previousSibling div.previousSibling Return Type Results Description Select the first element that Element comes after the current element b div “text” a b div “text” a b div “text” a b div “text” a Select the a element directly after the div Select the first node that Node comes after the current element Select the text node directly after the div Select the first element that Element comes before the current element Select the b element directly before the div Select the first node that Node comes before the current element Select the b element directly before the div
