Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблема с document.querySelectorAll и document.getElementById (https://javascript.ru/forum/misc/30361-problema-s-document-queryselectorall-i-document-getelementbyid.html)

PashPP 01.08.2012 21:24

Проблема с document.querySelectorAll и document.getElementById
 
Добого дня. Имеется хтмл
<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 01.08.2012 21:32

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 01.08.2012 21:36

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

Deff 01.08.2012 21:42

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

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

PashPP 01.08.2012 21:48

Aetae,
Все уникально.
Deff,
Спасибо, но почему-то, и этот вариант у меня локально не работает, а вот если так:
function uuu() {
	alert(ocument.getElementById('allvariants').querySelectorAll('div')[1].innerHTML)
}
uuu()

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

Deff 01.08.2012 21:58

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 01.08.2012 22:06

Цитата:

Сообщение от Aetae
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 01.08.2012 22:13

Deff,
Но почему у меня тогда на компе не работает это:
var fff=document.querySelectorAll('#allvariants div')
function uuu() {
	 
	alert(fff[1].innerHTML)
}

Но тут же заводится это:
function uuu() {
	 
	alert(document.querySelectorAll('#allvariants div')[1].innerHTML)
}

Deff 01.08.2012 22:20

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

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

Aetae 01.08.2012 22:21

Цитата:

Сообщение от PashPP (Сообщение 193769)
Deff,
Но почему у меня тогда на компе неработает это:
var fff=document.querySelectorAll('#allvariants div')
function uuu() {
	 
	alert(fff[1].innerHTML)
}

Но тут же заводится это:
function uuu() {
	 
	alert(document.querySelectorAll('#allvariants div')[1].innerHTML)
}

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

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

Deff 01.08.2012 22:22

Цитата:

Сообщение от Aetae
querySelectorAll('#allvariants > div')

Да - это корректней!
================================================== ======
PashPP,
Но скорее всего Aetae прав про загрузку страницы(я ставил в самый конец и скрипт ниже

vadim5june 01.08.2012 22:25

Цитата:

Сообщение от PashPP (Сообщение 193769)
Deff,
Но почему у меня тогда на компе не работает это:
var fff=document.querySelectorAll('#allvariants div')
function uuu() {
	 
	alert(fff[1].innerHTML)
}

Но тут же заводится это:
function uuu() {
	 
	alert(document.querySelectorAll('#allvariants div')[1].innerHTML)
}

потому что Вы функцию объявили но к ней не обратились -добавьте uuu();
var fff=document.querySelectorAll('#allvariants div');uuu();
function uuu() {
	 
	alert(fff[1].innerHTML)
}

PashPP 01.08.2012 22:31

Да, скорее всего из-за того. что недозагрузился. Ссылка на скрипт стоит в хеддере.
Как поступают в таких случаях? Заносить переменные под ф-ции или строчку со ссылкой на скрипт вниз кинуть?

Deff 01.08.2012 22:34

PashPP,
Ну по window.onload (но это долго

в JQ есть событие загрузки DOM;

Можно оставить функцию в хедере - а вызов - в конце страницы

oneguy 01.08.2012 22:41

Почему
numOfButton[1].innerHTML

Ведь элементы в NodeList нумеруются с 0.

PashPP 01.08.2012 22:44

Deff,
Ладно, пока просто затащу все в функ-ции, которые вызываются потом кликами. Спасибо.
oneguy,
Эм. И что?

Aetae 01.08.2012 22:47

Накрайняк можно и извратиться:

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

..но в обычном случае не нужно.=)

Deff 01.08.2012 23:00

oneguy,
Захотелось именно второй (*у мну тож мания - не тестить первые

PashPP 01.08.2012 23:01

ВСем большое спасибо. Еще раз убедился, что туплю на ерунде. Хотя, для меня эта ерунда была не так и очевидна.

Чтоб не создавать еще одну тему, спрошу тут.
Как вернуть первоначальный стиль, если использовать elem.style.backgrondColor="red" , например.
Я додумался, конечно, вызвать еще раз elem.style.backgrondColor="green" с учетом, что первоначальный фон был зеленый. Но как вернуть без указания точного параметра, а просто "верни как было до тебя".

Aetae 01.08.2012 23:05

если стиль был прописан в самом элементе то никак, ибо его ты и менял, если же в css то просто ="" .

PashPP 01.08.2012 23:09

Aetae,
То, что нужно.

melky 01.08.2012 23:26

Цитата:

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

отписал в факу
http://javascript.ru/forum/showpost....4&postcount=86
дабы каждый раз не обьяснять :)

Astrea 07.12.2015 18:55

Закрой алерт точной с запятой.


Часовой пояс GMT +3, время: 19:40.