JavaScript урок 8. Часть 1. Объектная модель документа (javaScript DOM) и доступ к объектам

Авторadmin / Опубликовано7 комментариев

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

Назад
К оглавлению
Далее

Объекты javascript и объектная модель документа

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

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

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

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

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

    • Пример:

    <sсript async src="script.js"> 
/* Позволяет загружать js-файлы параллельно и выполнять сразу после загрузки, 
не дожидаясь обработки остальной части страницы */
</script>
<!-- Далее ничего не отобразится, пока скрипт не загрузится -->
<p>Скрипт загружен</p>
    <sсript defer src="script.js"> 
/* Позволяет браузеру начать загрузку js-файлов параллельно, 
не останавливая дальнейшую обработку страницы. 
Их выполнение происходит после полного разбора объектной модель документа */
</script>  
<!-- скрипт загружается параллельно -->
<p>Скрипт загружается</p>

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

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

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

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

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

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

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

    <div id="MyElem" class="small">Мой элемент</div>

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

    <head>
<style type="text/css">
  .small{
	color:red;
	font-size:small;
  }
  .big{
	color:blue;
	font-size:big;
  }
</style>
</head>

    Необходимо:

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

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

    1. Так как это язык javascript, то объекту можно придумать и задать любое свойство с любым значением. Но для начала получим доступ к объекту по его id. Важно! скрипт должен находиться ниже тегов, т.е. перед закрытием тега body:

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

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

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

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

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

      MyElem.setAttribute('class','big');

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

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

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

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

    • Добавление атрибута (установление для него нового значения):
      • setAttribute(attr, value)
    • Получение значения атрибута:
      • getAttribute(attr)
    • Проверка наличия данного атрибута:
      • hasAttribute(attr)
    • Удаление атрибута:
      • removeAttribute(attr)
    Разные способы работы с атрибутами
    Пример: Вывести значение атрибута value текстового блока.

    ✍ Решение:
     

    • Пусть имеется текстовый блок:
      • <input type="text" value="Имя" id="elem">
    • Рассмотрим несколько способов получения значения атрибута (для вывода используйте метод alert()):

      • 1.

      elem.getAttribute('value')

      2.

      let x = 'value';
elem.getAttribute(x)
    Задание:
    В html-документе создайте элемент текстовое поле с установленным по умолчанию текстом «Привет!»:
    Посмотрите на результат в браузере.

  • Выведите в модальное окно значение атрибута value.
  • Программно измените значение атрибута type на значение «button». Посмотрите на результат работы скрипта.

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

    <input type="text" value="Привет!" id="t1">
<sсript>
alert(...);
element.setAttribute(...);
</script>

    Установить значения атрибутов также можно несколькими способами:

    let x = 'key';
// key - название атрибута, val - значение для атрибута
// 1.
elem.setAttribute('key', 'val')
// 2.
elem.setAttribute(x, 'val')
 
alert(elem.getAttribute('key')); // val

    Свойства элемента body

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

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

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

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

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

    Дополнительные методы доступа к элементам документа в DOM javaScript

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

    1. Поиск по id (или метод getElementById), возвращает конкретный элемент
    2. Поиск по названию тега (или метод getElementsByTagName), возвращает массив элементов
    3. Поиск по атрибуту name (или метод getElementsByName), возвращает массив элементов
    4. Через родительские элементы (получение всех потомков)
    Важно:
    На сегодняшний день некоторые из перечисленных методов уже практически не используются; это методы: getElementsByTagName и getElementsByName

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

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

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

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

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

      <input id="cake" type="text" value="кол-во тортов" />
...

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

      ✍ Решение:
       

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

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

        let a=document.getElementById("cake");
alert (a.value); // выведем значение атрибута value, т.е. текст "кол-во тортов"
      Важно: Скрипт должен находиться обязательно после тега!
    2. Доступ к массиву элементов через название тега name и посредством индекса массива

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

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

      <input type="text" value="кол-во тортов" />
...

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

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

      ✍ Решение:
       

        Обращаемся к конкретному элементу по индексу:

        let a =document.getElementsByTagName("input");
alert(a[0].value); // возвращает "кол-во тортов"
    3. Доступ к массиву элементов по значению атрибута name

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

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

      <input type="text" name="MyElem" value="1">

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

      ✍ Решение:
       

        let element = document.getElementsByName('MyElem');
alert(element[0].value);

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

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

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

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

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

      document.getElementById(roditel).childNodes;

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

      <!-- контейнер для изображений -->
<div id= "div_for_img">
	<!-- массив объектов-изображений -->
	<img src="pic1.jpg" /> 
	<img src="pic2.jpg" /> 
	<img src="pic3.jpg" /> 
	<img src="pic4.jpg" />
</div>

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

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

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

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

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

    Html-код:

    <body>
<input type="text" value="" id="t1"><br>
<input type="button" value="я - кнопка" id="b1">
...

    Пояснение: скрипт необходимо вставить после тегов текстового поля и кнопки

    ✍ Решение:
     

      Вариант 1:

      t1.value="Привет!";
b1.style.background = 'red';

      Вариант 2:

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

      Вариант 3:

      document.getElementById("t1").setAttribute('value','Привет!');
document.getElementById("b1").style.backgroundColor = "red";
      Задание Js8_2. Создайте теги текстовых полей согласно изображению на рисунке. Задайте им соответствующие (указанные на рисунке) значения атрибутов id. При помощи скрипта добавьте во все числовые поля (предполагающие численные значения) значение «0»
      метод javascript getelementbyid

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

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

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

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

      javascript проверка данных формы

      <input type="text" id="name" value="">

      Т.е, проверка того, осталось ли поле пустым будет выглядеть так:

      if(document.getElementById("name").value=="")
{
    какие-то действия, например, вывод сообщения с требованием заполнить поле
};
      Кроме того, можно обойтись и без скрипта. У тега input текстового поля есть атрибут pattern. в качестве его значения указывается регулярное выражение для проверки данных в данном текстовом поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока это текстовое поле не будет заполнено правильно.
      Например, для проверки, не осталось ли поле пустым:

      <form>
<!--  \w - любой алфавитно-цифровой символ, + должен быть найден хотя бы 1 раз -->
<input type="text" pattern="\w+">
<input type="submit">
</form>
      Текст вместо числового значения: функция isNaN
      Если поле предполагает введение числового значения, а вместо этого пользователь вводит текст, то необходимо использовать функцию isNaN (с англ. «является ли не числом?»), которая проверяет тип вводимых данных и возвращает true в случае введения текстовых данных вместо числовых.

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

      минут: <input type="text" id="monutes" value="">

      Т.е. проверка будет выглядеть следующим образом:

      if(isNaN(document.getElementById("minutes").value)){
  оповещение с требованием ввести числовые данные
};
      И последнее, если все таки пользователь ввёл в текстовое поле, предназначенное для числа, и число и текст одновременно, то при помощи ранее изученной функции javascript parseInt можно вычленить из текста число:
      javascript parseint

      alert(parseInt(document.getElementById("cake").value)); // 10
      Задание Js8_3. Дана страница с элементами для заполнения:
      javascript проверка заполнения полей
      Фрагмент кода html:

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

      <form>
Имя: <input type="text" id="name"><br>
Кол-во пончиков: <input type="text" id="donuts"><br>
Минут: <input type="text" id="minutes"><br>
Подытог: <input type="text" id="poditog"><br>
Налог: <input type="text" id="tax"><br>
Итог:<input type="text" id="itog"><br>
<input type="submit" value="заказать" onclick="placeOrder();">
</form>
<sсript type="text/javascript">
...
</script>

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

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

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

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

      Назад
      К оглавлению
      Далее

      7 комментариев для “JavaScript урок 8. Часть 1. Объектная модель документа (javaScript DOM) и доступ к объектам”

      1. Почему нет ответов на задания? Как новичку понять правильность решения или сверить свой ответ?

        1. Спасибо за комментарий). Отвечаю: просто смысл задания тогда теряется; если, например, в школе или Вузе используется ресурс… Но во всяком случае я что-то придумаю

          1. Спасибо. Учусь по этим урокам, все доходчиво и понятно изложено

          2. Очень полезные, а главное доступные для понимания уроки. Полностью согласен и с комментарием Аделины и с ответом админа. Было бы неплохо использовать два похожих задания(одно для изучения в уч. заведениях, другое для самостоятельного обучения с ответом).

      2. Мне очень нравится, как выложен материал на вашем ресурсе!!
        Скажите пожалуйста будите ли вы продолжать выкладывать и разъяснять материал с появление (обновлением) новых стандартов Javascript?

        В любом случаем спасибо!!!

        1. Спасибо) По мере возможностей будем добавлять/обновлять материал 🙂

      3. Очень нравится сайт, все очень понятно , достотачно примеров и пояснений

      Обсуждение закрыто.