Javascript найти все элементы. JavaScript - DOM: методы для поиска узлов. Не осталось ли поле пустым

На уроке будет рассмотрено начало темы: объектная модель документа (javaScript DOM) — основа динамического HTML, будут изучены методы доступа к объектам и рассмотрены способы обработки событий javascript

В целом объект – это составной тип данных, объединяющий множество значений в общий модуль и позволяющий сохранять и извлекать по запросу значения по их именам.

Ранее мы уже начали знакомство с понятием в javascript.

В javascript есть такое понятие как DOM — Document Object Model — объектная модель веб-страницы (html-страницы).
Теги документа или, как еще говорят, узлы документа — это и есть его объекты.

Давайте рассмотрим на схеме иерархию объектов в JavaScript , и то, на каком месте иерархии находится рассматриваемый в данной теме объект document .

У элемента script есть атрибуты:

defer (ожидание полной загрузки страницы).

Пример:

/* Позволяет загружать js-файлы параллельно и выполнять сразу после загрузки, не дожидаясь обработки остальной части страницы */ /* Позволяет браузеру начать загрузку js-файлов параллельно, не останавливая дальнейшую обработку страницы. Их выполнение происходит после полного разбора объектной модель документа */

Свойства и атрибуты объекта document в javaScript

Объект document представляет собой веб-страницу.

Важно: Для обращения к свойствам и методам объекта в javaScript, как и при работе с другими объектами, используется точечная нотация :

т.е. сначала пишется сам объект, затем через точку и без пробелов указывается его свойство, атрибут или метод

объект.свойство объект.атрибут объект.метод()

Рассмотрим пример:

Пример: пусть в html-документе есть тег

Мой элемент

и определенный для него стиль css (даже два стиля, второй пригодится для задания):

.small{ color : red ; font-size : small ; } .big{ color : blue ; font-size : big; }

.small{ color:red; font-size:small; } .big{ color:blue; font-size:big; }

Необходимо:

задать новое свойство объекта, присвоить ему значение и вывести это значение;

вывести значение атрибута объекта;

изменить значение атрибута объекта.

Выполним задание по порядку:
✍ Решение:

Так как это язык javascript, то объекту можно придумать и задать любое свойство с любым значением. Но для начала получим доступ к объекту (о доступе к объекту будет подробно рассказано ниже в данном уроке):

// получаем доступ к объекту по его id var element = document.getElementById("MyElem"); element.myProperty = 5; // назначаем свойство alert(element.myProperty); // выводим в диалоговое окно

Следующее задание связано с атрибутом объекта. Атрибут объекта — это атрибуты тега. Т.е. в нашем случаем их два: атрибут class со значением small и атрибут id . Будем работать с атрибутом class .

Теперь добавим javascript-код для вывода значения атрибута нашего объекта. Код должен находиться после основных тегов:

// получаем доступ к объекту по его id var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // выводим в диалоговое окно

И последнее задание: изменяем значение атрибута. Для этого у нас заготовлен стиль «big» . Заменим значение атрибута class на этот стиль:

// получаем доступ к объекту по его id var element = document.getElementById("MyElem"); element.setAttribute("class","big");

В результате наш элемент станет большего размера и окрасится в синий цвет (класс big).

Теперь подробнее рассмотрим использованные в примере методы для работы с атрибутами.

Методы для работы с атрибутами в JavaScript

Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:

Добавление атрибута (установление для него нового значения):

getAttribute(attr)

Проверка наличия данного атрибута:

removeAttribute(attr)

Разные способы работы с атрибутами

Пример: Вывести значение атрибута value текстового блока.

✍ Решение:

Пусть имеется текстовый блок:

var elem = document.getElementById("MyElem"); var x = "value";

Рассмотрим несколько способов получения значения атрибута (для вывода используйте метод alert()):

elem.getAttribute ("value" )

elem.getAttribute("value")

2. точечная нотация:

elem.attributes .value

elem.attributes.value

3. скобочная нотация:

var element = document.getElementById("t1"); alert(...) element.setAttribute(...);

var x = "key"; // key - название атрибута, val - значение для атрибута // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes["key"] = "val" // 4. elem.setAttribute(x, "val")

Через объект document можно обратиться к телу документа — тегу body — с его некоторыми полезными свойствами.

Например, у тега body есть два свойства: ширина и высота клиентского окна:

document.body.clientHeight — высота клиентского окна
document.body.clientWidth — ширина клиентского окна

Но самое главное, как мы уже узнали, это то, что через объект document посредством специальных методов осуществляется доступ ко всем элементам страницы, то есть тегам.

Важно: При такого рода обращении к тегам страницы скрипт должен находиться в конце дерева элементов, перед закрытием body ! Так как к моменту исполнения скрипта все элементы уже должны быть «нарисованы» браузером на экране

Задание js8_1 . Выдавать сообщение о размерах окна браузера: например, «размеры окна браузера 600 х 400»

Для доступа к объектам или поиска объектов предусмотрено несколько вариантов:

Поиск по id (или метод getElementById), возвращает конкретный элемент

Поиск по названию тега (или метод getElementsByTagName), возвращает массив элементов

Поиск по атрибуту name (или метод getElementsByName), возвращает массив элементов

Через родительские элементы (получение всех потомков)

Рассмотрим каждый из вариантов подробнее.

Доступ к элементу через его атрибут id

Синтаксис: document.getElementById(id)

Метод getElementById() возвращает сам элемент, который можно затем использовать для доступа к данным

Пример: На странице есть текстовое поле с атрибутом id="cake" :

...

Необходимо

✍ Решение:

alert(document.getElementById("cake").value); // возвращает "кол-во тортов"

Можно выполнить то же самое, реализовав обращение к объекту через переменную :

var a=document.getElementById("cake"); alert (a.value); // выведем значение атрибута value, т.е. текст "кол-во тортов"

Важно: Скрипт должен находиться обязательно после тега!

Доступ к массиву элементов через название тега name и посредством индекса массива

Синтаксис:
document.getElementsByTagName(name);

Пример: На странице есть текстовое поле (тег input), с атрибутом value:

...

Необходимо : вывести значение его атрибута value

Метод getElementsByTagName через переменную организует доступ ко всем элементам input (т.е. к массиву элементов input), даже если этот элемент — единственный на странице. Чтобы обратиться к конкретному элементу, например к первому, то указываем его индекс (массив начинается с нулевого индекса).

✍ Решение:

var a =document.getElementsByTagName("input"); alert(a.value); // возвращает "кол-во тортов"

Доступ к массиву элементов по значению атрибута name

Синтаксис:
document.getElementsByName(name);

Метод getElementsByName("...") возвращает массив объектов , у которых атрибут name равен указанному в качестве параметра метода значению. Если такой элемент только один на странице, то метод все равно возвращает массив (только с одним единственным элементом).

Пример: допустим в документе есть элемент:

var element = document.getElementsByName("MyElem"); alert(element.value);

В данном примере элемент один, но обращение осуществляется к нулевому элементу массива.

Важно: Метод работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name : это теги form , input , a , select , textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальными элементами типа div , p и т.п.

Доступ к потомкам родительского элемента

Доступ к потомкам в javascript происходит посредством свойства childNodes . Свойство принадлежит объекту-родителю.

document.getElementById (roditel) .childNodes ;

document.getElementById(roditel).childNodes;

Рассмотрим пример, в котором теги изображений помещены в контейнер — тег div . Таким образом, тег div является родителем данных изображений, а сами теги img , соответственно, являются потомками тега div:

Теперь выведем в модальное окно значения элементов массива с потомками, т.е. тегами img:

var myDiv=document.getElementById("div_for_img"); // обращаемся к родителю-контейнеру var childMas=myDiv.childNodes; // массив потомков for (var i =0; i < childMas.length;i++){ alert(childMas[i].src); }

Обратите внимание, что для перебора элементов массива потомков удобно использовать цикл . Т.е. в нашем примере получаем цикл:

... for (var a in childMas) { alert(childMas[ a] .src ) ; }

For (var a in childMas){ alert(childMas[a].src); }

Другие способы обращения к элементам

Другие способы рассмотрим на примере:

1 3 4

Доступ:

... // нежелательные и устаревшие методы доступа к элементам: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // text alert(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 alert(document.f .b .type ) ; // button alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // предпочтительные методы доступа к элементам alert(document.getElementById ("t" ) .type ) ; // text alert(document.getElementById ("s" ) .name ) ; // ss alert(document.getElementById ("s" ) .options [ 1 ] .id ) ; // 02 alert(document.getElementById ("o3" ) .text ) ; // 4 ...

... // нежелательные и устаревшие методы доступа к элементам: alert(document.forms.name); // f alert(document.forms.elements.type); // text alert(document.forms.elements.options.id); // o2 alert(document.f.b.type); // button alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // предпочтительные методы доступа к элементам alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Пример: В html-документе создать кнопку и текстовое поле. При помощи скрипта раскрашивать фон кнопки (свойство style.backgroundColor кнопки) и выводить надпись «Привет!» в текстовом поле (трибут value).

Html-код:

document.getElementById("t1").value = "Привет!"; document.getElementById("b1").style.backgroundColor = "red";

Вариант 2:

document.getElementById ("t1" ) .setAttribute ("value" , "Привет!" ) ; document.getElementById ("b1" ) .style .backgroundColor = "red" ;

document.getElementById("t1").setAttribute("value","Привет!"); document.getElementById("b1").style.backgroundColor = "red";

Задание Js8_2. Создайте теги текстовых полей согласно изображению на рисунке. Задайте им соответствующие (указанные на рисунке) значения атрибутов id . При помощи скрипта добавьте во все числовые поля (предполагающие численные значения) значение « 0 »

Проверка правильности внесения данных формы

Не осталось ли поле пустым?

Вводимым пользователями данным доверять нельзя. Предполагать, что пользователи при вводе данных будут их проверять, неразумно. Значит необходимо для этого использовать javascript.

Для того, чтобы проверить, не осталось ли текстовое поле пустым (например, после заполнения пользователем данных какой-либо анкеты), следует обратиться к свойству value . Если значением свойства является пустая строка (""), значит необходимо как-то оповестить об этом пользователя.

if(document.getElementById("name").value=="") { какие-то действия, например, вывод сообщения с требованием заполнить поле };

Кроме того, можно обойтись и без скрипта. У тега input текстового поля есть атрибут pattern . в качестве его значения указывается регулярное выражение для проверки данных в данном текстовом поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока это текстовое поле не будет заполнено правильно.
Например, для проверки, не осталось ли поле пустым:

Текст вместо числового значения: функция isNaN

Если поле предполагает введение числового значения , а вместо этого пользователь вводит текст, то необходимо использовать функцию isNaN (с англ. «является ли не числом?» ), которая проверяет тип вводимых данных и возвращает true в случае введения текстовых данных вместо числовых.

Т.о. если возвращено true , то необходимо оповестить пользователя о том, чтобы он ввел правильный формат, т.е. число.

if(isNaN(document.getElementById("minutes").value)){ оповещение с требованием ввести числовые данные };

Дана страница с элементами для заполнения:

Фрагмент кода html:

1 2 3 4 5 6 7 8 9 10 11 12

Имя:
Кол-во пончиков:
Минут:
Подытог:
Налог:
Итог:
...

Необходимо:
Дополните пустые места фрагмента кода, расположенного ниже, проверяющего правильность заполнения двух текстовых полей: имя (id="name") и минут (id="minutes"). Используйте проверку на оставление поля пустым ("") и правильного формата заполнения числового поля (isNaN).

* Выполнить задание также с помощью атрибута pattern текстовых полей, используя .

Фрагмент скрипта:

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

Новым понятием для вас является вызов функции в качестве обработчика события кнопки:
onclick="placeOrder();"
По щелчку на кнопке будет вызываться функция placeOrder()

Для того, чтобы скрипт мог работать с каким-то элементом страницы, этот элемент сначала нужно найти. Для Этого в JavaScript есть несколько способов. Найденный элемент обычно присваивается переменной, и в дальнейшем, через эту переменную сркипт обращается к элементу и производит с ним какие-то действия.

Поиск по id

Если в коде страницы элементу задан атрибут id , то элемент можно найти по id. Это самый простой способ. Поиск элемента производится с помощью метода getElementById() глобального объекта document.

document.getElementById (id)

Параметры:

id - id элемента, который нужно найти. id - это строка, поэтому она должна быть в кавычках.

Создадим страницу, добавим на неё элемент и зададим ему id , а в скрипте найдём этот элемент:

HTML код:

JavaScript:

var block = document.getElementById("block"); console.log(block);

Найденный элемент мы присвоили переменной block и вывели переменную в консоль. Откройте консоль браузера, в ней должен быть указан элемент.

Так как посик по id - это самый простой и удобный способ, часто используют именно его. Если с каким-то элементом нужно работать в скрипте, то в коде страницы этому элементу устанавливают атрибут id , даже если он не был установлен ранее. И находят элемент по id.

Поиск по классу

Метод getElementsByClassName() позволяет найти все элементы, относящиеся к определённому классу.

document.getElementsByClassName (класс)

Параметры:

класс - класс элементов, которые нужно найти

Метод возвращает псевдомассив, содержащий найденные элементы. Псевдомассивом он называется потому, что для него не работают многие методы массивов. Но главное свойство остаётся - можно обратиться к любому элементу массива. Даже если найден только один элемент, он всё равно находится в массиве.

Добавим на страницу элементы и зададим им класс. Часть элементов разместим внутри блока, который мы создали ранее. Другую часть создадим вне блока. Смысл этого будет понятен чуть позднее. Теперь страница будет выглядеть так:

HTML код:

JavaScript:

Теперь найдены только те элементы, которые расположены в блоке.

Поиск по тэгу

Метод getElementsByTagName() находит все элементы с конкретным тэгом. Он также возвращает псевдомассив с найденными элементами.

document.getElementsByTagName (тэг)

Параметры:

тэг - тэг элементов, которые нужно найти

Найдём все тэги p , которые есть на странице:

var p = document.getElementsByTagName("p"); console.log(p);

Этот метод можно также применять не ко всему документу, а к конкретному элементу. Найдите все тэги p , находящиеся в блоке.

Поиск по селектору

Существуют методы querySelector() и querySelectorAll() , которые находят элементы соответсвующие определённому селектору. То есть, будут найдены элементы, к которым был бы применён стиль, если бы он был указан такому селектору. При этом, наличие такого селектора в стиле страницы совсем не обязательно. Эти методы никак не связаны с CSS. Метод querySelectorAll() находит все элементы, соответствующие селектору. А метод querySelector() находит один элемент, который является первым в коде страницы. Эти методы могут заменить все способы поиска элементов, рассмотренные ранее, ведь есть селектор по id, селектор по тэгу и многие другие.

document.querySelector (селектор)

document.querySelectorAll (селектор)

Селекторы пишутся точно так же, как в CSS, только не забывайте ставить кавычки.

Добавим на страницу список и найдём его по селектору. Мы ищем только один элемент и мы точно знаем, что он будет первый, потому что он один на странице. Поэтому в данном случае удобнее использовать метод querySelector() . Но при использовании этого метода нужно учитывать, что в дальнейшем на страницу могут быть добавлены такие же элементы. Впрочем, это касается большинства методов.

HTML код:

Данные методы также могут искать элементы не во всём документе, а внутри конеретного элемента.

В примере мы использовали только селекторы по тэгу. Попробуйте найти элементы страницы с использованием других селекторов.

Соседние элементы

Для найденного элемента можно найти соседей. Каждый элемент является объектом, и соседние элементы можно получить через свойства этого объекта. Свойство previousElementSibling содкржит предыдущий элемент, а свойство nextElementSibling содержит следующий элемент.

элемент.previousElementSibling

элемент.nextElementSibling

Найдём элемент, следующий за блоком:

Дочерние элементы

Свойство children содержит массив с дочерними элементами.

элемент.children

Найдём дочерние элементы блока.

В прошлом уроке был рассмотрен метод getElementsByTagName , который возвращает массив (группу ) элементов страницы по имени тега.

Здесь продолжается практическая работа с javascript и будет рассмотрен метод getElementById , который возвращает ссылку на элемент , ориентируясь на его уникальный идентификатор id .

Метод getElementById, как и getElementsByTagName является методом объекта document .

Название метода переводится буквально: получить элемент по id .

Любому элементу (тегу ) веб-документа может быть назначен свой id -идентификатор, благодаря которому элемент становиться уникальным и к нему можно получить доступ для работы именно с ним.

Обратите внимани е: в имени метода в конце слова Element нет буквы s (в отличие от метода getElementsByTagName ). Это сделано для удобства и говорит о том, что метод служит для выбора элемента .

/* Заносим в переменную unique ссылку на тег img по id-идентификатору penguin */

Немного пояснений для фрагмента кода выше...

тег img (изображени е) имеет id -идентификатор penguin ;
при помощи метода getElementById по идентификатору penguin выбирается именно этот тег img ;
в переменную unique заносится ссылка на выбранный тег;
далее можно работать с тегом, как с объектом через переменную unique , подобно тому, как проводилась работа с объектом Date через произвольную переменную.

После получения доступа к элементу (тегу ) веб-страницы по id -идентификатору при помощи метода getElementById , мы уже работаем с ним, как с Объекто м, а значит, получаем доступ к атрибутам тега, как к свойствам Объекта.

Следовательно, значения атрибутов являются уже значениями свойств.

Продолжим работать с предыдущим примером...

"Задумчивый пингвин" >

var unique = document .getElementById ("penguin" );

alert (unique .alt ); /* Выводим на экран значение свойства alt объекта unique (значение атрибута alt тега img ) */

Пояснения для примера кода...

тег img (изображени е) имеет определенные атрибуты : src - адрес файла, width и height - ширина и высота картинки, alt - альтернативный текст;
получив доступ к тегу при помощи метода getElementById , как к объекту , мы получаем доступ к атрибутам тега, как к свойствам объекта ;
А значения атрибутов теперь уже являются значениями свойств ;
в javascript доступ к свойствам объекта осуществляется через точку. Далее выводим alt - альтернативный текст тега img при помощи метода alert на экран.

Надеюсь, что Вы не запутались во всем этом. Нужно понимать одновременно, что происходит на программном уровне javascript и на уровне разметки документа.

Тег img - это Объект unique ;

Атрибуты тега width и alt - это свойства Объекта;

Значения атрибутов "128" и "Задумчивый пингвин" - это значения свойств;

// Вот, как это выглядит с позиции javascript:

var unique = {

width : "128" ,

alt : "Задумчивый пингвин"

}

Вот так работает метод getElementById , возвращающий ссылку на любой элемент (тег ) веб-стрницы, если тот имеет уникальный идентификатор id . Далее проводится работа с этим элементом на уровне javascript уже как с объектом ...

Следует учесть что : как и в предыдущем уроке , здесь - при работе с методом getElementById строку вызова скрипта следует размещать в конце html -документа

В jQuery есть и другие возможности выбора элементов веб-документа.

На этом уроке мы рассмотрим методы объекта document , которые предназначены для поиска узла или коллекции узлов во всём документе. А также методы объекта node (узла), которые выполняют аналогичные действия, но уже среди своих дочерних узлов.

Методы, предназначенные для поиска узла или коллекции узлов в дереве

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

Метод getElementById()

Метод getElementById(elementID) возвращает элемент в документе, имеющий указанный идентификатор (id="elementID"), в виде объекта Node (узла). Если элемента с указанным идентификатором не существует, то данный метод возвращает значение null .

В соответствии стандартом у Вас в документе не может быть несколько элементов с одинаковым значением атрибута id , т.е. значение идентификатора должны быть уникальным в пределах одного документа. Тем не менее, если у Вас в документе существуют несколько элементов с указанным id , то метод getElementById() вернёт первый найденный элемент.

document.getElementById(elementID)

Данный метод имеет один обязательный параметр (elementID), представляющий собой строку, содержащую значение атрибута id элемента, который Вы хотите получить.

Например, изменить цвет текста элемента, имеющего id="nameArticie" .

Название статьи

1 пункт
2 пункт
3 пункт

//Получить элемент (узел), имеющий id="nameArticle" var nameArticle = document.getElementById("nameArticle"); //изменить цвет текста элемента nameArticle.style.color = "blue";

Метод getElementsByClassName()

Метод getElementsByClassName(className) возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), имеющих указанное имя класса (class="className"), в виде объекта NodeList (коллекции узлов). Другими словами данный метод возвращает объект NodeList , представляющий собой коллекцию элементов (узлов), имеющих указанное в параметре этого метода имя класса.

Для получения количество найденных узлов Вы необходимо использовать свойство length объекта NodeList . А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:

Var elementsList = document.getElementsByClassName("list"); for (var i=0; i