querySelector에서 : 첫 번째 요소를 얻고 마지막 요소를 얻는 방법은 무엇입니까?

querySelector에서 : 첫 번째 요소를 얻고 마지막 요소를 얻는 방법은 무엇입니까? DOM에서 사용되는 순회 순서는 무엇입니까?

---

div에는 속성이있는 요소 (반드시 2 세대는 아님)가 move_id있습니다.

첫째, 집합의 첫 번째 요소와 마지막 요소를 가져 오는 가장 직접적인 방법을 원합니다.

다음을 통해 처음과 마지막을 시도했습니다.

var first = div.querySelector('[move_id]:first');
var last  = div.querySelector('[move_id]:last');

이 폭탄은 : first와 : last가 내 부분에서 희망찬 생각 이었기 때문에 (?)

의 배열 방법을 사용할 수 querySelectorAll있기 때문에 NodeList배열되지 않습니다 :

var first = (div.querySelectorAll('[move_id]'))[0];
var last  = (div.querySelectorAll('[move_id'])).pop();

이 폭탄 NodeList은 방법 이 없기 때문에pop()

(예, NodeList 위에 Array 메서드를 사용할 수 있습니다.

var first = div.querySelector('[move_id]');
var last = Array.prototype.pop.call(div.querySelectorAll('[move_id']));

이것은 작동하고 지금 사용하고 있지만 단순히 놓친 것보다 더 직접적인 것이 있어야한다고 생각합니다.)

둘째, http://en.wikipedia.org/wiki/Tree_traversal에 따라 사전 깊이 우선 순회에 의해 요소가 나열되는지 확인해야합니다 .

---

첫 번째와 마지막 요소에 액세스하려면 시도하십시오.

var nodes = div.querySelectorAll('[move_id]');
var first = nodes[0];
var last = nodes[nodes.length- 1];

견고성을 위해 색인 검사를 추가하십시오.

예, 노드의 순서는 사전 주문 깊이 우선입니다. DOM document order은 다음과 같이 정의됩니다.

일반 엔티티의 확장 후 문서의 XML 표현에서 각 노드의 XML 표현의 첫 번째 문자가 발생하는 순서에 해당하는 문서의 모든 노드에 정의 된 순서, 문서 순서가 있습니다. 따라서 문서 요소 노드가 첫 번째 노드가됩니다. 요소 노드는 자식보다 먼저 발생합니다. 따라서 문서 순서는 XML에서 시작 태그가 나타나는 순서대로 요소 노드를 정렬합니다 (엔티티 확장 후). 요소의 속성 노드는 요소 뒤와 자식 앞에 발생합니다. 속성 노드의 상대적 순서는 구현에 따라 다릅니다.

---

:last css 사양의 일부가 아니며 jQuery에만 해당됩니다.

당신은 찾고 있어야합니다 last-child

var first = div.querySelector('[move_id]:first-child');
var last  = div.querySelector('[move_id]:last-child');

---

마지막 입력 요소 를 가져 오는 예 :

document.querySelector(".groups-container >div:last-child input")

참조 URL : https://stackoverflow.com/questions/5684811/in-queryselector-how-to-get-the-first-and-get-the-last-elements-what-traversal