GetElementsByClassName(name)

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

Запись document.getElementsByClassName(name) вернет массив элементов с заданным именем класса в рамках одного документа.

Пример.

document.getElementsByClassName('test'); // вернет массив элементов с именем класса test

document.getElementsByClassName('test' 'blue'); // вернет массив элементов с именами класса test и blue

document.getElementById('test').getElementsByClassName('test1'); // вернет массив всех элементов с классом test1, которые находятся в элементе с id test

Примечание. Данный метод не работает только в версиях ниже 9 браузера IE.

Свойство innerHTML

Одной из наиболее часто встречающихся задач является задача по динамическому изменению содержимого html- документа. Для этих целей используется ряд свойств и методов объектов DOM. Проще всего изменить содержимое элемента, используя свойство innerHTML.

Пример.

1. Изменим контент элемента p:

< html>

< body>

< p id=" test" > Этот текст мы изменим с помощью DOM < p>

< script>

document.getElementById(" test" ).innerHTML = " Новый текст внутри параграфа! ";

< /script>

< /body>

< /html>

Комментарий: здесь имеется параграф с идентификатором test и текстом " Этот текст мы изменим с помощью DOM". Используя метод getElementById(значение_id), мы выбираем нужный нам параграф по значению идентификатора. Получив элемент параграфа, мы применяем свойство innerHTML для изменения текста внутри элемента.

2. Следующая запись заменит текст внутри тега h1 с идентификатором h1.

document.getElementById(" h1" ).innerHTML = " Новый текст заголовка! ";

3. Используя методы и свойства DOM, мы можем менять не только свойства, но и атрибуты тегов. Следующий пример демонстрирует замену одной картинки на другую путем изменения атрибута src тега < img>:

<! DOCTYPE html>

< html>

< body>

< img id=" change_this_image" src=" images/new_year.png" >

< script>

document.getElementById(" change_this_image " ).src = " images/christmas.jpg";

< /script>

< /body>

< /html>

Комментарий: В документе имеется картинка с уникальным идентификатором id=" change_this_image", расположенная по адресу " images/new_year.png". Задача: заменить это изображение на другое, располагающееся по адресу " images/christmas.jpg". Прежде, чем менять адрес картинки, ее нужно найти среди других изображений документа. Так как у картинки имеется уникальный идентификатор, поиск осуществляем с помощью метода getElementById(" id картинки" ). Получив нужное изображение, меняем значение его атрибута src с images/new_year.png на " images/christmas.jpg".

Изменение свойств CSS объекта DOM

DOM позволяет менять CSS стили HTML документов, что бывает очень полезно при разработке различных визуальных эффектов на странице. В общем виде синтаксис изменения стиля выглядит следующим образом:

document.getElementById(id).style.property=new style;

Пример. Изменим цвет текста параграфа с идентификатором p_id:

< html>

< body>

< p id=" p_id " > Цвет этого параграфа скоро изменится на зеленый< /p>

< script>

document.getElementById(" p_id " ).style.color = " green";

< /script>

< p> А цвет этого параграфа останется неизменным.< /p>

< /body>

< /html>

Для модификации объектов документа в DOM имеется большое количество других свойств и методов. В таблице 9 представлены основные методы и свойства объектов с описанием их действия на объекты DOM

Таблица 9 - основные методы и свойства объектов DOM

Поиск элементов
Метод	Описание
document.getElementById(id)	Поиск элемента по ID
document.getElementsByTagName(name)	Поиск элемента по имени тега(возвращает массив значений)
document.getElementsByClassName(name)	Поиск элемента по имени класса(возвращает массив значений)
Изменение HTML элементов
element.innerHTML = new html content	Изменение текста внутри элемента
element.attribute = new value	Изменение атрибута элемента
element.setAttribute(attribute, value)	Добавление нового атрибута со значением к элементу HTML
element.style.property = new style	Изменение стиля элемента
Добавление/удаление элементов HTML
document.createElement(element)	Создание HTML элемента
document.removeChild(element)	Удаление HTML элемента
document.appendChild(element)	Добавление HTML элемента
document.replaceChild(element)	Замена одногоHTML элемента на другой
Добавление обработчика событий
document.getElementById(id).onclick = function(){code}	Добавление исполняемого кода на событие " по нажатию"
Поиск HTML объектов
document.anchors	Возвращает все ссылки с заданным атрибутом name
document.baseURI	Возвращает абсолютный путь документа
document.body	Возвращает элемент body
document.cookie	Возвращает куки документа
document.doctype	Возвращает доктайп документа
document.inputEncoding	Возвращает кодировку документа
document.lastModified	Возвращает дату и время последнего изменения документа

Создание сценариев

Программы, работающие с объектами html-документа, называют сценариями. Такая программа, написанная на языке JavaScript, способна взаимодействовать с объектами среды, окружающей интерпретатор языка. Встроенный в веб-браузер интерпретатор JavaScript, предоставляет пользователю возможность использовать средства языка для доступа к ресурсам браузера и всего того, что в нем находится в данный момент, например, свойствам браузера и документа, загруженного в него.

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

Большинство тегов html имеют специальные атрибуты, определяющие события, на которые могут отреагировать соответствующие элементы. Список всех допустимых событий довольно обширен и рассчитан практически на все случаи жизни.

Названия событий довольно простые, скажем, щелчок левой кнопкой мыши имеется название onclick; изменение в поле ввода данных — onchange; событие onmouseover происходит, когда указатель мыши помещается на элемент html-документа.

Значением таких атрибутов-событий в тегах html является строка, содержащая сценарий, выполняющий роль обработчика события. Например, следующий html-код определяет заголовок второго уровня, который реагирует на щелчок кнопкой мыши тем, что выполняет некоторую функцию my_function():

< h2 onclick = " my_function()" > Щелкни здесь< /h2>

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

Как уже отмечалось, значением атрибута-события является код сценария, заключенный в кавычки. Этот код называют обработчиком события.

В приведенном выше примере обработчиком события onclick является функция my_function(). Если обработчик события содержит несколько выражений, то они разделяются точкой с запятой.

Обычно обработчики событий являются обращения к функциям.

Пример. При щелчке на изображении из файла с именем picture.jpg выведется окно с сообщением. Изображение в html-документе, как мы знаем, задается тегом img. Источник файла определяется атрибутом src. Обработчиком события onclick является функция clickimage(), которая должна быть определена в теге < script> (обычно функции записывается в области заголовка документа).

< html>

< script>

function clickimage(){

alert(" Привет! " ) }

< /script>

< img src = " pict.jpg" onclick = " clickimage() " >

< /html>

Вариант 2:

< html>

< img src = " pict.jpg" onclick = " alert(‘Привет! ’)" >

< /html>

Если сценарий обработки события небольшой и используется в html-документе единственный раз, то целесообразно оформлять его непосредственно в виде значения атрибута-события. В других случаях предпочтителен первый вариант, то есть оформление обработчика в виде функции.

Чтобы указать браузеру явным образом, что сценарий написан на языке JavaScript, можно в значении атрибута-события написать префикс " javascript: ". Например, < img onclick = " javascript: аlert(‘Привет! ’)" >. Если не указывать язык сценария, то браузер будет подразумевать JavaScript.

Каждое действие пользователя (нажатие на клавишу, щелчок кнопкой мыши и т. п.) формирует некоторое событие.

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

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

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

Пока выполняется обработчик события, объект события вместе со своими свойствами доступен сценарию, находящемуся в памяти браузера. Как только обработчик события завершит работу, объект события становится пустым (возвращается в исходное состояние).

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

Используя возможности конструкций языка JavaScript, свойства и методы объектной модели DOM и события, можно создавать самые разнообразные сценарии для работы с элементами веб-документа и добавления интерактивности на веб-страницу.

⇐ Предыдущая22232425262728293031Следующая ⇒

Поделиться:

Популярное: