В данном уроке мы разберем разные полезные темы JavaScript: работу с выделением, работу с формами.
Работа с формами
Можно получить все HTML формы на странице через document.forms. В результате мы получим массив форм, будто он был получен с помощью getElementsByTagName (точнее это будет не массив, а псевдомассив (или коллекция) элементов).
Мы можем, к примеру, обратиться к любой форме, как к энному элементу массива, например, к форме с номером 0:
<body>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
</body>
document.forms[0].innerHTML = '!';
HTML код станет выглядеть так:
<body>
<form>
!
</form>
<form>
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="2">
</form>
</body>
А можем перебрать все формы с помощью цикла:
<body>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
</body>
var forms = document.forms;
for (var i = 0; i < forms.length; i++) {
forms[i].innerHTML = '!';
}
HTML код станет выглядеть так:
<body>
<form>
!
</form>
<form>
!
</form>
</body>
Следующем образом - document.forms[i].elements - можно найти общее количество форм на странице.
Кроме того, к формам можно обращаться по имени вместо номера. Это имя задается в атрибуте name тега <form>. Например, если форме дать имя test, то к ней можно обратиться так - document.forms['test'] или так - document.forms.test.
В следующем примере форме с именем form1 поставим текст '!', а форме с именем form2 - текст '?' (двумя разными способами):
<body>
<form name="form1">
<input value="1">
<input value="2">
<input value="3">
</form>
<form name="form2">
<input value="1">
<input value="2">
<input value="3">
</form>
</body>
document.forms.form1.innerHTML = '!';
document.forms['form2'].innerHTML = '?';
HTML код станет выглядеть так:
<body>
<form name="form1">
!
</form>
<form name="form2">
?
</form>
</body>
Обращение к элементам форм
У каждой формы есть свойство elements, которое содержит массив элементов формы. С его помощью можно обратиться к определенному элементу формы по его номеру.
Для примера давайте обратимся к форме номер 1, а затем к ее элементу номер 0:
<body>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
</body>
document.forms[1].elements[0].value = '!';
HTML код станет выглядеть так:
<body>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
<form>
<input value="!">
<input value="2">
<input value="3">
</form>
</body>
Можно также перебрать все элементы формы с помощью цикла. Давайте получим форму с номером 1 и всем элементам этой формы поставим value '!':
<body>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
</body>
var elements = document.forms[1].elements;
for (var i = 0; i < elements.length; i++) {
elements[i] = '!';
}
HTML код станет выглядеть так:
<body>
<form>
<input value="1">
<input value="2">
<input value="3">
</form>
<form>
<input value="!">
<input value="!">
<input value="!">
</form>
</body>
При необходимости с помощью двух вложенных циклов можно перебрать все формы и все элементы внутри них.
Обращение к элементам форм по имени
К элементам формы, так же, как и к самим формам, можно обращаться по имени из атрибута name:
<body>
<form name="form1">
<input value="1" name="input1">
<input value="2" name="input2">
<input value="3" name="input3">
</form>
</body>
document.forms.form1.elements.input1.value = '!';
HTML код станет выглядеть так:
<body>
<form name="form1">
<input value="!" name="input1">
<input value="2" name="input2">
<input value="3" name="input3">
</form>
</body>
Тег fieldset
Свойство elements также есть у тегов fieldset.
Работа с селектами
Посмотрите также новый видеоурок на рекурсию, там этот материал раскрыт подробнее: https://youtu.be/dtuQ0EyoNsU
Давайте теперь разберем, как работать с выпадающими списками select через JavaScript.
Пусть в переменной select лежит выпадающий список, тогда так - select.value - мы можем получить value выбранного пункта списка:
<select id="select">
<option value="one">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var select = document.getElementById('select');
alert(select.value); //выведет 'one'
Результат выполнения кода:
Если записать в select.value значение атрибута value определенного тега option - он станет выбранным:
<select id="select">
<option value="one">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var select = document.getElementById('select');
select.value = 'one';
HTML код станет выглядеть так:
<select id="select">
<option value="one" selected>Один</option>
<option value="two">Два</option>
<option value="three">Три</option>
</select>
Можно обращаться к пунктам списка не по value, а по порядковому номеру таким образом - select.selectedIndex (нумерация начинается с нуля).
Давайте сделаем выбранным нулевой пункт списка:
<select id="select">
<option value="one">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var select = document.getElementById('select');
select.selectedIndex = 0;
HTML код станет выглядеть так:
<select id="select">
<option value="one" selected>Один</option>
<option value="two">Два</option>
<option value="three">Три</option>
</select>
А теперь выведем номер выбранного пункта:
<select id="select">
<option value="one">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var select = document.getElementById('select');
alert(select.selectedIndex); //выведет 1
Результат выполнения кода:
Если в select.selectedIndex присвоить -1, то не один из пунктов списка не будет выбран:
<select id="select">
<option value="one">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var select = document.getElementById('select');
select.selectedIndex = -1;
HTML код станет выглядеть так:
<select id="select">
<option value="one">Один</option>
<option value="two">Два</option>
<option value="three">Три</option>
</select>
Есть и альтернативный способ сменить отмеченный пункт списка - обратиться не к селекту, а в нужному пункту списка вот так - option.selected (option - это название переменной, в которой лежит пункт списка). Если присвоить свойству selected значение true - этот пункт станет выбранным, если false - наоборот.
Посмотрите как работать с этим свойством на следующем примере:
<select>
<option value="one" id="option">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var option = document.getElementById('option');
option.selected = true;
HTML код станет выглядеть так:
<select id="select">
<option value="one" id="option" selected>Один</option>
<option value="two">Два</option>
<option value="three">Три</option>
</select>
Можно также не только указывать новое значение этому свойству, но и считывать его, например, чтобы узнать, выбран данный пункт или нет.
Для тега option также есть свойство index, в котором хранится порядковый номер пункта списка (только для чтения), и свойство text, в котором хранится текст пункта списка.
Обращение к тегам option
Для тега select есть свойство options, в котором хранится список пунктов.
Давайте с его помощью последовательно выведем содержимое атрибутов value тегов option:
<select id="select">
<option value="one">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var select = document.getElementById('select');
var options = select.options;
for (var i = 0; i < options.length; i++) {
alert(options[i].value);
}
А теперь в текст каждого тега option запишем '!', если это выбранный пункт, и '?' - если не выбранный:
<select id="select">
<option value="one">Один</option>
<option value="two" selected>Два</option>
<option value="three">Три</option>
</select>
var select = document.getElementById('select');
var options = select.options;
for (var i = 0; i < options.length; i++) {
if (options[i].selected === true) {
options[i].text = '!';
} else {
options[i].text = '?';
}
}
HTML код станет выглядеть так:
<select id="select">
<option value="one">?</option>
<option value="two" selected>!</option>
<option value="three">?</option>
</select>