Inspired by https://github.com/dunxrion/voyeur.js
##Usage
<nav>
<ul>
<li>1st</li>
<li>2nd</li>
<li>3rd</li>
</ul>
</nav>
domster( document.body.querySelectorAll('*') ) // => undefined
document.body.nav.ul.li // => <li>3rd</li>
document.body.nav.ul.lis // => [li, li, li]
The following is 150
-bytes, but more compliant. It returns the root element (what makes the usage more voyeur-like) and specifies the first instead of the last dom-node:
function (
a, // A Nodelist whichto use as root
b, // iterate-placeholder
c, // elem-placeholder
d, // tags-placeholder
e, // tag-placeholder
f, // parent-placeholder
g // root-placeholder
) {
for (b = 0; c = a[b++];
// parent has already the same `tagName` as property
// so there is more than one element in the tree
(f = c.parentNode)[e] && f[d].push(c) ||
// otherwise add/assign an array
// containing the element
(f[d] = [c]),
// assign the first single node to the parent-node
f[e] = f[e] || c,
// assign the root element
g = g || f
)
d = (e = c.tagName.toLowerCase()) + 's';
// return the root element
return g
}
var dom = domster( document.body.querySelectorAll('*') ) // => document.body
dom.nav.ul.li // => <li>1st</li>
dom.nav.ul.lis // => [li, li, li]
Use the for loop - don't waste those semicolons/brackets: