in a div, have elements (not necessarily 2nd generation) with attribute move_id
.
First, would like most direct way of fetching first and last elements of set
tried getting first and last via:
var first = div.querySelector('[move_id]:first'); var last = div.querySelector('[move_id]:last');
this bombs because :first and :last were wishful thinking on my part (?)
cannot use the Array methods of querySelectorAll
since NodeList
is not an Array:
var first = (div.querySelectorAll('[move_id]'))[0]; var last = (div.querySelectorAll('[move_id'])).pop();
this bombs because NodeList
does not have method pop()
(yes, one could could use Array methods on top of the NodeList:
var first = div.querySelector('[move_id]'); var last = Array.prototype.pop.call(div.querySelectorAll('[move_id']));
this works, and is what I'm using now, but thinking there has to be something more direct that I'm simply missing)
Second, need to verify that the elements are listed by pre-oder depth-first traversal as per http://en.wikipedia.org/wiki/Tree_traversal
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors.
querySelector() is a DOM Level 1 (1998) feature.
To get the last element with specific class name: Use the querySelectorAll() method to get a NodeList containing the elements with the specific class. Convert the NodeList to an array. Use the pop() method to get the last element of the array.
To access the first and last elements, try.
var nodes = div.querySelectorAll('[move_id]'); var first = nodes[0]; var last = nodes[nodes.length- 1];
For robustness, add index checks.
Yes, the order of nodes is pre-order depth-first. DOM's document order
is defined as,
There is an ordering, document order, defined on all the nodes in the document corresponding to the order in which the first character of the XML representation of each node occurs in the XML representation of the document after expansion of general entities. Thus, the document element node will be the first node. Element nodes occur before their children. Thus, document order orders element nodes in order of the occurrence of their start-tag in the XML (after expansion of entities). The attribute nodes of an element occur after the element and before its children. The relative order of attribute nodes is implementation-dependent.
:last
is not part of the css spec, this is jQuery specific.
you should be looking for last-child
var first = div.querySelector('[move_id]:first-child'); var last = div.querySelector('[move_id]:last-child');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With