Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Разница elem[0] и elem.firstChild (https://javascript.ru/forum/dom-window/37063-raznica-elem%5B0%5D-i-elem-firstchild.html)

Siter 06.04.2013 13:32

Разница elem[0] и elem.firstChild
 
Добрый день.

Расскажите мне пожалуйста о разнице

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<div>
///
</div>
<p>Привет<b>Как дела?</b>test</p>
<a href=''>Привет</a>
<script>

	var parent  = document.body.children[1].children[0];

	var newb = document.createElement('b');
	newb.innerHTML = ('дополнение');
	
	parent.insertBefore(newb,parent.firstChild);
</script>

</body>
</html>


и

<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<div>
///
</div>
<p>Привет<b>Как дела?</b>test</p>
<a href=''>Привет</a>
<script>

	var parent  = document.body.children[1].children[0];

	var newb = document.createElement('b');
	newb.innerHTML = ('дополнение');
	
	parent.insertBefore(newb,parent[0]);
</script>

</body>
</html>


Одно вставляет "дополнение" перед "Как дела", а другое после.
Не понимаю, почему так происходит.

И буду рад услышать совет, как упростить это:
var parent  = document.body.children[1].children[0]

, ибо учу js второй день.

Спасибо.

melky 06.04.2013 13:39

в одно из них может попасть HTML комментарий, или текстовый элемент, которые тоже являются элементами, и тогда firstChild не будет таким же, что и children

<body>
<!-- комментарий -->
<b>элемент</b>
</body>

<script>
    alert( 'firstChild: ' + document.body.firstChild + '\n' + 'children[0]' + document.body.children[0]  );
</script>


<body>
просто текст
<b>элемент</b>
</body>

<script>
    alert( 'firstChild: ' + document.body.firstChild + '\n' + 'children[0]' + document.body.children[0]  );
</script>

Siter 06.04.2013 14:33

Исчерпывающий ответ. Спасибо.


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