1. Перед тем как найти элемент, нужно придумать переменную, в которую мы будем сохранять результат поиска. Имя переменной должно отражать ее содержимое, например если мы хотим найти все input'ы на странице, то логично назваить переменную как-нибудь так inputList (или input_list), если нам нужен например список DIV'ов, то переменную можно назвать divList (или div_list) и т.д. Если нам нужен 1 элемент, то переменную будем называть просто input или просто div
2. Дальше нужно определить каким способом мы хотим найти элемент. Всего существует 3 способа поиска:
getElementById() вернет нам 1 элемент с конкретным указанным ID, и мы не знаем какой элемент нам вернется.
Код test = document.getElementById('test'); запишет в переменную test элемент с id=test.
Теперь допустим внутри элемента test нам нужно найти элемент test2 для этого можно сделать так
test2 = test.getElementById('test2');
!!Поиск внутри элемента может не работать (в зависимости от браузера). В таких случаях нужно искать test2 так же как и test, а затем проверить является ли test родителем test2.
Второй вариант поиска элемента - поиск по тэгу.
inputs = document.getElementsByTagName('input');
Этот способ всегда возвращает коллекцию элементов. Чтобы перебрать все элементы коллекции можно использовать цикл, например
for(i=0; i<inputs.length; ++i) {
console.log(inputs.item(i).nodeName);
}
Третий вариант поиска это поиск по классу
elements = document.getElementsByClassName('myClass');
Этот поиск возвращает коллекцию любых html-элементов у которых будет найден аттрибут class="myClass"
Чтобы обратиться к конкретному элементу коллекции, нужно знать его порядковый номер и выполнить поиск по позиции в коллекции. Допустим input_list это коллекция, тогда если я хочу получить второй элемент коллекции я буду выполнять код
secondElem = input_list.item(1); //в js как и в остальных языках нумерация элементов коллекции и нумерация элементов массива начинается с 0. Теперь допустим я хочу обратиться к первому потомку этого элемента, для этого можно использовать следующий код:
child = secondElem.childNodes.item(0); //так мы обратились к первому потомку элемента.
Если мне нужно узнать количество потомков конкретного элемента я буду использовать код secondElem.childNodes.length; или используя только что созданную переменную child.length
Получив какой-то один элемент в переменную я могу сделать следующие действия:
Допустим что у нас в переменной input хранится один <input>
Я хочу проверить есть ли у него аттрибут type
if(input.hasAttribute('type')) {
console.log('true'); //выводим в консоль сообщение что аттрибут найден
console.log(input.getAttribute('type')); //выводим в консоль значение аттрибута type
} else {
console.log(false); //ой, атрибут не найден
attr = input.setAttribute('type', 'date'); //создадим аттрибут type="date"
console.log(input); //выводим в консоль весь input чтобы проверить что аттрибут правда добавился
}
Теперь я хочу получить значение, которое записано в тэг
elemValue = input.value;
Список команд:
document.getElementById(' '); //вернет конкретный элемент с тем id который мы указали
document.getElementsByTagName(' '); //вернет коллекцию элементов по имени тэга
document.getElementsByClassName(''); //вернет коллекцию элементов по имени класса
.item(номер) //вернет элемент коллекции по его номеру
.childNodes.item(номер) //вернет потомка элемента по его номеру
.childNodes.length //вернет количество потомков
.hasAttributes() //вернет true если у элемента есть какие-то аттрибуты
.hasAttribute(' ') //вернет true если найден указанный аттрибут
.getAttribute(' ') //вернет значение указанного аттрибута
.setAttribute('name', 'value') //добавит аттрибут к элементу
newElem = document.createElement(' ') //создаст элемент в документе
.appendChild(newElem); //добавит один элемент в другой
.removeChild(newElem); //удалит элемент (этот метод нужно вызывать у родителя элемента)
.parentNode //вернет родителя элемента (может выполняться несколько раз, например elem.parentNode.parentNode)
document.createTextNode(' ') //создаст новый текст, созданный текст нужно вставлять в родителя как обычный элемент
.style.имяCssСвойства //получает сss свойство, например elem.style.width вернет ширину указанную в css. Нужно помнить что дефис использовать нельзя поэтому например свойство margin-top в JS нужно писать как marginTop
.value //вернет значение элемента
События в js
onclick - срабатывает при клике на элемент
oncontextmenu - срабатывает при клике на элемент правой кнопкой мыши
onmouseover - при наведении мыши (в старых версиях onhover)
onmousedown - при нажатии кнопки мыши
onmouseup - при отжатии кнопки мыши
onmousemove - при движении мыши
onsubmit - при отправке формы
onfocus - при фокусе элемента, например если курсор ввода текста находится в input
onkeydown - нажатие клавиши на клавиатуре
onkeyup - когда отпускаем кнопку на клавиатуре
onload - когда загружен документ/элемент
onunload - когда пытаемся выйти из браузера (в старых версиях может работать onexit и onclose)
События можно вешать на окно window.onload = function() {alert('Hello');} или на элемент elem.onclick = function() {alert('hi');}
Браузерная консоль
console.log() выводит текст в консоль
console.error() выводит сообщение с иконкой ошибки
console.info() выводит сообщение с иконкой информации
console.warn() выводит сообщение с иконкой предупреждения
