Проблема с document.querySelectorAll и document.getElementById

[PashPP]

Добого дня. Имеется хтмл

<div id="allvariants">
		<div id="i1">
			текст 1
		</div>
		<div id="i2" onclick="uuu()"> 
			текст 2
		</div>
		<div id="i3">
			текст3
		</div>
		<div id="i4">
			текст 4
		</div>
	</div>

Почему не получается взять все с <div id="allvariants">.
Пробовал

var numOfButton = document.querySelectorAll('#allvariants')
function uuu() {
	alert(numOfButton[1].innerHTML)
}

Но ничего не получается, по айди тоже.

[Deff]

PashPP,

<div id="allvariants">
		<div id="i1">
			текст 1
		</div>
		<div id="i2" onclick="uuu()"> 
			текст 2
		</div>
		<div id="i3">
			текст3
		</div>
		<div id="i4">
			текст 4
		</div>
</div>


<script type="text/javascript">
var numOfButton = document.getElementById('allvariants').querySelectorAll('div')
function uuu() {
	alert(numOfButton[1].innerHTML)
}
uuu()
</script>

[Aetae]

ID ДОЛЖЕН БЫТЬ УНИКАЛЕН.
Блджад, стабильно раз в неделю это спрашивают.
Нужно в поле ответа добавить чекбокс: "Я знаю, что id - уникальный идентификатор.", и пока он не стоит не давать постить.

[Deff]

Aetae,
Там типо вопрос криво задал - id - то уникальны

"Почему не получается взять все div из <div id="allvariants">."

[PashPP]

Aetae,
Все уникально.
Deff,
Спасибо, но почему-то, и этот вариант у меня локально не работает, а вот если так:

function uuu() {
	alert(ocument.getElementById('allvariants').querySelectorAll('div')[1].innerHTML)
}
uuu()

или даже querySelectorAll('#allvariants div')[1].innerHTML)
То работает на ура. Но стоит прикрутить переменную и все. Даже не догадываюсь, что за фигня.

[Deff]

PashPP,
Cогласен

<div id="allvariants">
		<div id="i1">
			текст 1
		</div>
		<div id="i2" onclick="uuu()"> 
			текст 2
		</div>
		<div id="i3">
			текст3
		</div>
		<div id="i4">
			текст 4
		</div>
</div>


<script type="text/javascript">
var numOfButton = document.querySelectorAll('#allvariants div')
function uuu() {
	alert(numOfButton[1].innerHTML)
}
uuu()
</script>

[devote]

ID ДОЛЖЕН БЫТЬ УНИКАЛЕН.

ID в прошлом быть должен уникальным. А с учетом того что в браузерах появились методы querySelector/querySelectorAll можно уже хоть на сотню элементов вешать один и тот же ИД

<div id="bla"></div>
<div id="bla"></div>
<div id="bla"></div>
<div id="bla"></div>
<div id="bla"></div>
<script>
alert( document.querySelectorAll( '#bla' ).length ); // 5
</script>

да конечно, так давно решили что лучше делать ид одним уникальным, даже в спецификации упомянули о том что мол ИД он и в африке ИД, что мол он должен быть уникален и все такое.. Но по большей части это лишь по причине того что getElementById не может выбрать элементы с одним ИД.

Хотя я конечно не пропагандирую о том что ИД нужно делать не уникальным, но можно делать и не уникальным.

[PashPP]

Deff,
Но почему у меня тогда на компе не работает это:

var fff=document.querySelectorAll('#allvariants div')
function uuu() {
	 
	alert(fff[1].innerHTML)
}

Но тут же заводится это:

function uuu() {
	 
	alert(document.querySelectorAll('#allvariants div')[1].innerHTML)
}

[Deff]

PashPP,
Хм - я проверил в Опере Мозилле и хроме при сохранении страницы на раб стол

Вон - devote мож подскажет ?

[Aetae]

var fff=document.querySelectorAll('#allvariants div')
function uuu() {
	 
	alert(fff[1].innerHTML)
}

Ну во-первых в вашем случае скорее querySelectorAll('#allvariants > div'), а во-вторых скорее всего в первом случае скрипт вызывается до того как страница загружена, потому ничго не находит, а потом уже вы вызываете фукнкцию в которой обращаетесь к пустому списку.

Во втором случае поиск осуществляется в момент обращения, когда уже всё загружено.