dom traversal

Glossary DOM - document object model which represents a web page. DOM tree consists of different Nodes: document , documentFragment , documentType , element , text , comment . Element - Node object, which represents html tag. Ancestors - all elements up the DOM tree Descendants - all elements down the DOM tree Children - all elements 1 level down the DOM tree Siblings - elements on the same DOM level (children of the same parent) Selection DOM elements can be selected by CSS selectors via following methods el.querySelectorAll('selector') static Collection of els or or an empty NodeList if no matches. el.querySelector('selector') static element, null if no matches, same as el.querySelectorAll('selector')[0] document.getElementById('id') element with id or null if no matches. el.getElementsByClassName('className') live Collection of elements with the given class name. el.getElementsByTagName('tagName') live Collection of elements with the given tag name or null if no matches. Tag can be * for any tags. document.getElementsByName('nameVal') live Collection of elements with a given name attribute. Main DOM objects & shortcuts window global parent object, which contains DOM document , same as window.document , top node, entry point into DOM document.documentElement , same as document.querySelector('HTML') , <html> element document.head , same as document.querySelector('head') , <head> element document.body , same as document.querySelector('body') , <body> element CSS selectors Testing el.matches('selectorStr') true if the el matches selectorStr node.contains(otherNode) true if the node contains otherNode or if they are same nodes node.hasChildNodes() true if node has child nodes node.isEqualNode(otherNode) true if the two nodes are alike node.isSameNode(otherNode) true if the two nodes are same object Navigation HTML elements el.parentElement parent element one level up the DOM el.children elements one level down the DOM el.childElementCount number of children el.firstElementChild first child el.lastElementChild last child el.nextElementSibling next element on the same DOM level el.previousElementSibling previous element on the same DOM level el.closest('selector') first matching element starting from itself and upwards, null if no matches el.shadowRoot shadow root el that is hosted by the element, or null Nodes node.parentNode node.parentElement node.childNodes live NodeList with all children (one level down) node.firstChild = Node.childNodes[0] node.lastChild = Node.childNodes[Node.childNodes.length - 1] node.nextSibling node.previousSibling node.getRootNode() - return HTMLDocument or ShadowRoot Table let tbl = document.querySelector('table') tbl.caption <caption> tbl.tHead <thead> tbl.tBodies tBodies collection tbl.tBodies[0] <tbody> tbl.tFoot <tfoot> tbl.rows collection of table rows (tr) tbl.tHead.rows tr collection tbl.tBodies[0].rows tr collection tbl.tFoot.rows tr collection tbl.rows[1].sectionRowIndex 0, index of the given <tr> inside <thead> , <tbody> , <tfoot> tbl.rows[1].rowIndex 1, index of the given <tr> inside table tbl.tBodies[0].rows[1].cells collection of cells <td> in 2nd row tbl.tHead.rows[0].cells[3].cellIndex 3, cell index inside <tr> Form Forms are members of the special collection document.forms document.forms collection of forms document.forms[0] first form in the document document.forms.login form with attribute name="login" document.forms["login"] same document.forms["login"].elements collection of elements in the form document.forms["login"].elements.password collection of elements with attribute name="password" document.forms["login"].elements["password"] same document.forms["login"].password same, short notation Forms are members of the special collection document.forms input.value = "new value" xxx jQuery Select jQuery('selector') , same as $('selector') , searches in DOM and returns a new jQuery obj with found elements $('span', this) , same as $(this).find('span') $(el) can feed html element into jQuery to make it a jQ object $("div").get() - returns array instead of jQ object $("div").get(0) , same as $("div")[0] - returns first DOM element All CSS selectors works for jQ Additional selectors $("[attr!='val']") elements without attr value // $("textarea[placeholder!='Word']") $(":hidden") hidden elements $(":visible") not hidden elements, elements with visibility: hidden; & opacity: 0 are also visible $(":eq(index)") element at index within the matched set. Deprecated , .eq() is better. $(":first") first matched DOM element. Deprecated , .first() is better. $(":last") last one. Deprecated , .last() is better. $(":even") 1st, 3rd element, and so on. Deprecated , .even() is better. $(":odd") 2nd, 4th element, and so. Deprecated , .odd() is better. $(":gt(index)") elements at an index greater than. Deprecated , .slice(4) is better. $(":lt(index)") elements at an index less than. Deprecated , .slice(0, 3) is better. $(":header") elements that are headers, like h1, h2, H and so on. Better to use .filter(":header") $(":animated") elements that are in the progress of an animation. Better to use .filter(":animated") $(":contains(text)") elements that contain the specified text $(":has(selector)") elements which contain at least one element. Better to use .has() $(":parent") elements that have at least one child node $(":checkbox") inputs of type 'checkbox' $(":radio") inputs of type 'radio' $(":selected") options that are selected $(":button") button elements and elements of type 'button' $(":file") elements of type 'file' $(":input") input, textarea, select and button elements $(":image") elements of type 'image' $(":submit") elements of type 'submit' $(":password") elements of type 'password' $(":reset") elements of type 'reset' $(":text") inputs of type 'text' + inputs without type Traverse up $().parent() first parent element $().offsetParent() first positioned element up in the DOM tree $().parents() all parents in the DOM tree up to <html> $().parentsUntil(selector) all parents until selector $().closest(selector) first element up in the DOM tree Traverse down $().children() elements one level down the DOM $().children('span') same, but filters $().find('span'); searches all the way down Traverse sideways $().siblings() elements around on the same DOM level $().next() next element $().prev() previous element $().nextAll() next elements $().prevAll() previous elements $().nextUntil(selector) next elements until selector $().prevUntil(selector) previous elements until selector Reduce $().first() first element from jQ object $().last() last element from jQ object $().filter(selector) reduce the list to match the selector $().eq(1) elements with specified index $().eq(-1) negative index is possible $().even() even ones, numbered from zero $().odd() odd ones, numbered from zero $().slice(6, 8) els from start to optional end $().has(selector) els having matching descendants $().not(selector) els not matching selector Expand $().add(selector) union of elements $('#th2').next().addBack() add previous set of elements on the stack // th#th2, th#tH $('textarea').first().end() restores previous filtering Test $().has(selector).length check if an element is inside another $().is(selector) test against selector or el Index $().eq(1).index() 1, returns index $('span').eq(0).index('*') 56, returns index of 1st span from collection of all elements