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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

    Необходимо:

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


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

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

      // получаем доступ к объекту по его id
      var element = document.getElementById('MyElem');
      element.myProperty = 5; // назначаем свойство
      alert(element.myProperty); // выводим в диалоговое окно
    2. Следующее задание связано с атрибутом объекта. Атрибут объекта — это атрибуты тега. Т.е. в нашем случаем их два: атрибут class со значением small и атрибут id. Будем работать с атрибутом class.

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

      // получаем доступ к объекту по его id
      var element = document.getElementById('MyElem');
      alert(element.getAttribute('class')); // выводим в диалоговое окно
    3. И последнее задание: изменяем значение атрибута. Для этого у нас заготовлен стиль «big». Заменим значение атрибута class на этот стиль:

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

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

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

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

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

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

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

    ✍ Решение:
     

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

      elem.getAttribute('value')

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

      elem.attributes.value

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

      elem.attributes['value']

      4.

      elem.getAttribute(x)

    Задание:
    В html-документе создайте элемент текстовое поле с установленным по умолчанию текстом «Привет!»:
    Посмотрите на результат в браузере.

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

    <input type="text" value="Привет!" id="t1">
    <script>
    var element = document.getElementById('t1');
    alert(...)
    element.setAttribute(...);
    </script>


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

    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')

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

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

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

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

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

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

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

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

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

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

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

    1. Доступ к элементу через его атрибут id
    2. Синтаксис: document.getElementById(id)

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

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

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

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


      ✍ Решение:
       

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

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

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

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

    3. Доступ к массиву элементов через название тега name и посредством индекса массива
    4. Синтаксис:
      document.getElementsByTagName(name);

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

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

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


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

      ✍ Решение:
       

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

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

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

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

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

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


      ✍ Решение:
       

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

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

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

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

    7. Доступ к потомкам родительского элемента
    8. Доступ к потомкам в 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:

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

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

      ...
      for (var a in childMas){
      	alert(childMas[a].src);
      }
    9. Другие способы обращения к элементам
    10. Другие способы рассмотрим на примере:

      <body>
      <form name="f">
       <input type="text" id="t">
       <input type="button" id="b" value="button">
       <select id="s" name="ss">
         <option id="o1">1</option>
         <option id="o2">3</option>
         <option id="o3">4</option>
       </select>
      </form>

      Доступ:

      ...
      // нежелательные и устаревшие методы доступа к элементам:
          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
      ...

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

    Html-код:

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

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


    ✍ Решение:
     

      Вариант 1:

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

      Вариант 2:

         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>
      <script type="text/javascript">
      ...
      </script>

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

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

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

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

      Поделитесь уроком с коллегами и друзьями:
      6 комментариев

        Аделина

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

          admin

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

            Аделина

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

            Макс

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

        Eposha

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

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

          admin

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

      Добавить комментарий

      Ваш e-mail не будет опубликован. Обязательные поля помечены *

      *
      *


      Вставить формулу как
      Блок
      Строка
      Дополнительные настройки
      Цвет формулы
      Цвет текста
      #333333
      Используйте LaTeX для набора формулы
      Предпросмотр
      \({}\)
      Формула не набрана
      Вставить