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

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

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

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

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

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

Свойства и атрибуты объекта 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)

Свойства элемента 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
    ...

Пример: При помощи скрипта раскрашивать фон кнопки и выводить надпись в текстовом поле.
Использовать атрибут текстового окна value и атрибут (свойство) кнопки — style.backgroundColor

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


Выполнение:

<body>
<input type="text" value="Привет!" id="t1"><br>
<input type="button" value="я - кнопка" id="b1">
...

Вариант 1:

    alert(document.getElementById("t1").value);
    document.getElementById("b1").style.backgroundColor = "red";

Вариант 2:

    alert(document.getElementById("t1").getAttribute('value'));
    document.getElementById("b1").style.backgroundColor = "red";

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

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

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

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

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

alert(document.getElementById("name").value=="");// true

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

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

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

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

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

alert(isNaN(document.getElementById("minutes").value));// true

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

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

И последнее, если все таки пользователь ввёл в текстовое поле, предназначенное для числа, и число и текст, то при помощи ранее изученной функции javascript parseInt можно вычленить из текста число:
javascript parseint

alert(parseInt(document.getElementById("cake").value)); // 10

Задание Js8_3. Дана страница с элементами для заполнения:
javascript проверка заполнения полей
Фрагмент кода:

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

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

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

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

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

    Аделина

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

      admin

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

        Аделина

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

        Макс

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

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

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

*
*

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