Непонятная строчка document.body.children

@marrk · Регистрация: 01.12.2013

Студворк — интернет-сервис помощи студентам

Пример из учебника:

JavaScript
1
2
3
4
5
6
7
8
<input type="text"> oninput: <span id="result"></span>
<script>
  var input = document.body.children[0];
 
  input.oninput = function() {
    document.getElementById('result').innerHTML = input.value;
  };
</script>

Низ понятен, как только меняется значение в input срабатывает функция. А выше что за document.body.children если 0, то видимо что-то с массивом связано... А если input'ов несколько на странице как их правильно развести в этом случае?

@kalabuni · 30.08.2015, 15:56

хороший вопрос, годный

вообще ВСЁ программирование на браузерном яваскрипте можно кратко сформулировать в виде следующей схемы (читаем вдумчиво, по пунктам!!!):

а) по какому-то событию
б) на каком-то объекте
в) изменяется значение какого-то свойства
г) какого-то объекта

строки 5-7 вашего кода

JavaScript
1
2
3
input.oninput = function() {
    document.getElementById('result').innerHTML = input.value;
  };

в соответствии с формулировками пунктов выше можно воспроизвести так:

а) при событии ввода oninput
б) в какой-то объект input
в) изменяется значение свойства innerHTML
г) объекта с id="result"

сравните пункты из верхнего абзаца с теми же пунктами нижнего абзаца
заметили, что все неопределённости (красного цвета) из верхнего абзаца заменены на конкретности (синего цвета) в нижнем абзаце?

за исключением пункта б), где осталось слово "какой-то" по отношению к объекту

так вот, в строке 3 вашего кода

JavaScript
1
var input = document.body.children[0];

эта неопределённость как раз и раскрывается -- вместо какого-то объекта указывается конкретный объект - тег <input>, который является самым первым тегом после тега <body>

document.body.children - это коллекция всех тегов, находящихся внутри тегов <body></body> -- коллекция очень похожа на массив, но таковым не является... у коллекции есть длина (количество членов), её можно перебрать циклом, но большинство других операций, которые можно проделать с массивом, с коллекцией произвести нельзя... например, коллекцию нельзя отсортировать, нельзя удалить какой-то её член, нельзя добавить новый член...)

этот способ конкретизации объекта здесь применён, по-видимому, потому, что у тега <input> в HTML-коде не прописан идентификатор id
--------------

снова возвращаюсь к сформулированной выше схеме:
итак, чтобы успешно программировать на браузерном яваскрипте, необходимо:

-- знать, какие именно события поддерживаются теми или иными объектами (например, только теги <input> поддерживают событие oninput)

-- знать, какие именно объекты можно рассматривать в браузере (это не только теги, но и, например, окно window, загружаемый в это окно document, и тыдыитыпы)

-- знать, какие именно свойства поддерживаются разными объектами (например, у инпутов имеется свойство value, но нет свойства innerHTML, а у спанов всё наоборот) и какие именно значения могут принимать те или иные свойства

-- уметь использовать хотя бы несколько (из тысячи существующих) способов, чтобы указать на конкретный объект (про один из них, через коллекцию children я вам как раз и рассказал), а всяких разных коллекций и методов для этого есть очень-очень много

@marrk · 30.08.2015, 16:26 **[ТС]**

Да, всё понятно, решение с body.children не универсально и годится только для учебника.
Вы просто божественно всё объяснили, я прям сел сам и переписал под 2 инпута и всё заработало (тест https://jsfiddle.net/je7dLxfr/ ). Вопрос, код оптимален? На каждый инпут по функции надо или реально их в одну функцию свести?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input type="text" id="one"> oninput: <span id="result1"></span><br>
<input type="text" id="two"> oninput: <span id="result2"></span>
<script>
  var input1 = document.getElementById("one");
  var input2 = document.getElementById("two");
 
  input1.oninput = function() {
    document.getElementById('result1').innerHTML = input1.value;
  };
 
  input2.oninput = function() {
    document.getElementById('result2').innerHTML = input2.value;
  };
</script>

@kalabuni · 30.08.2015, 17:13

яваскрипт тем хорош, что любую задачу можно решить несколькими способами
так что как бы "оптимального" среди них нет - всё зависит от личных предпочтений и опыта

при наличии на странице только двух инпутов и двух соответствующих им спанов и при данной конкретной HTML-разметке - я решил бы так:

HTML5
1
2
3
4
5
6
<input> oninput: <span></span><br>
<input> oninput: <span></span>
<script>
for (var inpts = document.getElementsByTagName ('input'), j = 0, J = inpts.length; j < J; j++)
inpts [j].oninput = function () {with (this) nextElementSibling.innerHTML = value}
</script>

@BANO · 30.08.2015, 21:54

marrk, в подтверждение высказывания

Сообщение от kalabuni

яваскрипт тем хорош, что любую задачу можно решить несколькими способами ... всё зависит от личных предпочтений и опыта

я приведу свой пример решения задачи, решённой kalabuni

HTML5
1
2
3
4
5
6
7
<input> oninput: <span></span><br>
<input> oninput: <span></span>
<script>
[].forEach.call(document.getElementsByTagName('input'),function(){
    this.oninput=function(){this.nextElementSibling.innerHTML=this.value}
})
</script>

который всего-то на 33(-4 пробела для наглядности) символа короче и использует меньше переменных, хотя по сути тот же самый

@marrk · 30.08.2015, 22:08 **[ТС]**

Код у вас обоих довольно компактный, но читать JS код мне кажется сложнее чем php

@BANO · 30.08.2015, 22:18

marrk, просто "чтение кода" приходит со временем, а у php просто нету методов как в js, там только функции методы аля preg_match, тут же будет круче, "строка в которой ищем".match(/и/gi) и всё,

js сделан для компактности, поскольку он передаётся по инету, а есть люди, которые платят за каждые 10 байт инета, по этому и появились минификаторы, а php, поскольку никому не передаётся может себе позволить много пробелов и методы не встроенные в prototype, и может себе позволить вообще не знать, что такое prototype

@marrk · 30.08.2015, 22:19 **[ТС]**

Да всё верно говорите, поэтому большой js это такая каша адская )))

@BANO · 30.08.2015, 22:47

marrk,

Сообщение от marrk

большой js

по сути js действительно менее читаем, поскольку можно не ставить ; вообще, использовать хаки аля [].forEach.call и многое другое, но это сделано для сокращения кода, каша дейвствиетльно получается адской

но вот на счёт большой или маленький это ещё не известно, поскольку о величине языка можно судить по его, скажем так, операторам, то есть не количеству кода, который нужно написать для выполнения задачи, а по количеству встроенных в дефалтовые библиотеки методов и, даже не знаю как это назвать, ну скажем логических предложений(да название хреновое), пример в js: var, function, for(;

, for( .. in .. ), for(of)([jnz это вроде из es6), if .. else ну и т. д.

считать методы в каждом языке - дело нудное и не интересное,
хотя количество "логических предложений" говорит о богадстве языка

но у js есть проблемы, он вообще-то рассчитан на тот список действий, приведённый моим коллегой, и для выполнения приведённых в списке действий например совершенно не нужны классы, такие как в php, но js программисты делают хаки через prototype, модулей тоже нету, короче язык ограничен окном браузера

но скоро браузеры будут поддерживать es6 harmony, который добавит и модули, и классы, и ещё более краткие написания всяких вещей

короче js становится более менее нормальным языком программирования, и может быть, когда-нибудь будут компиляторы в .exe именно из .js файлов, а не из .ts

Добавлено через 15 минут
ооооооооооооооооооо вот я дебил, что-то я после jquery вообще поехал, код мой не рабочий получается

JavaScript
1
2
3
4
5
6
7
<input> oninput: <span></span><br>
<input> oninput: <span></span>
<script>
[].forEach.call(document.getElementsByTagName('input'),function(e){
    e.oninput=function(){this.nextElementSibling.innerHTML=this.value}
})
</script>

а вот так рабочий, и теперь он ещё меньше

ps
jquery растлевает js программистов

@marrk · 30.08.2015, 22:50 **[ТС]**

jquery растлевает js программистов

Да я знаю и его пока не трогаю, а ещё http://youmightnotneedjquery.com/

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	30.08.2015, 22:08 [ТС]
	Код у вас обоих довольно компактный, но читать JS код мне кажется сложнее чем php 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	30.08.2015, 22:18
	marrk, просто "чтение кода" приходит со временем, а у php просто нету методов как в js, там только функции методы аля preg_match, тут же будет круче, "строка в которой ищем".match(/и/gi) и всё, js сделан для компактности, поскольку он передаётся по инету, а есть люди, которые платят за каждые 10 байт инета, по этому и появились минификаторы, а php, поскольку никому не передаётся может себе позволить много пробелов и методы не встроенные в prototype, и может себе позволить вообще не знать, что такое prototype 0

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	30.08.2015, 22:19 [ТС]
	Да всё верно говорите, поэтому большой js это такая каша адская ))) 0

Непонятная строчка document.body.children

Решение