"menu > li:first-child" как переменная для "getBoundingClientRect().left"

Question

У меня есть следующая иерархия:

menu > li:first-child
menu > li:nth-child(2)
menu > li:nth-child(3)
menu > li:nth-child(4)
menu > li:nth-child(5)
menu > li:nth-child(6)
menu > li:nth-child(7)
menu > li:nth-child(8)
menu > li:nth-child(9)

Я пытаюсь поместить каждый из них в переменную, чтобы:

var fromleft = box.getBoundingClientRect().left;
var fromtop = box.getBoundingClientRect().top;

Это работает прямо сейчас с:

var box = document.getElementById('menu');
var fromleft = box.getBoundingClientRect().left;
var fromtop = box.getBoundingClientRect().top;

но не с:

var box = document.getElementById('menu > li:first-child');
var fromleft = box.getBoundingClientRect().left;
var fromtop = box.getBoundingClientRect().top;

Что мне нужно сделать, чтобы использовать first-child или nth-child в переменной?

Answer 1

Я сталкивался с этим, и я думаю, что это то, что мне нужно!

var box = document.getElementById( 'sdt_menu' ).getElementsByTagName( 'li' )[0];" 

И... 0 = первый ребенок, 1 = nth ребенок (2), т. Д.

Также... "li" можно изменить на "div" и другие.

(или так кажется!)