• Страница 1 из 1
  • 1
Модератор форума: webik  
Форум » JavaScript и jQuery » JavaScript » JavaScript и динамическое изменение веб-страницы (Общие понятия о работы JavaScript с содержимым страницы)
JavaScript и динамическое изменение веб-страницы
ABCДата: Чт, 28.03.2019, 14:47 | Сообщение # 1
Offline
Если вы умеете создавать веб-страницы с помощью HTML и CSS, то вы уже знаете многое, чтобы использовать JavaScript для создания по-настоящему динамических современных сайтов!


Современное JavaScript-программирование (и особенно если это речь о дизайне пользовательского интерфейса) это не что иное как способ автоматизации создания HTML и применения CSS.

Какие типовые задачи решает JavaScript в современном дизайне? Добавляет новый контент, изменяет уже имеющийся, изменяет HTML-код веб-страницы, работает в связке с CSS-стилями. Но всё это подчиняется простому алгоритму, состоящему из двух шагов:

1. Выбор элемента(любого существующего тега) на веб-странице

2. Действия над этим элементом: изменение свойств, добавление нового содержимого, удаление, извлечение информации о нём, добавление и удаление атрибута класса.

Чтобы понимать как использовать JavaScript для работы с веб-страницами, нужно узнать про объектную модель документа (DOM)
 
профиль цитата изменить удалить
ABCДата: Чт, 28.03.2019, 16:01 | Сообщение # 2
Offline
Объектная модель документа (DOM, Document Object Model)

Любая веб-страница состоит из множества тегов HTML, расположенных в определённом порядке и имеющих свои какие-то атрибуты.

Так вот, браузер не только загружает HTML-страницу и показывает её нам оформленную с помощью CSS-стилей, но он также запоминает всю структуру(или "модель") HTML этой страницы, то есть какие теги есть на странице, в каком порядке они присутствуют, какие имеют атрибуты и т.д.

Такое представление страницы называется объектной моделью документа (или DOM).
Именно DOM предоставляет JavaScript информацию, которая ему необходима для взаимодействия с элементами на веб-странице, а также различные инструменты, необходимые для навигации по странице, изменения и добавления нового HTML-кода на страницу.

DOM - это не часть JavaScript, это стандарт консорциума W3C. DOM позволяет JavaScript обмениваться информацией с веб-страницей и изменять её HTML-код.
 
профиль цитата изменить удалить
ABCДата: Чт, 28.03.2019, 16:11 | Сообщение # 3
Offline
Чтобы понять принцип DOM, давайте рассмотрим код какой-нибудь простой веб-страницы:

Код
<!DOCTYPE HTML>
<html>
<head>
<title>Заголовок веб-страницы</title>
</head>
<body class='main'>
<h1 id='header'>Заголовок</h1>
<p>Здесь какой-то <strong>интересный</strong> текст</p>
</body>
</html>


Схематично этот код можно представить в виде дерева, где одни теги("родительские") включают в себя другие("дочерние")
Тег html включает в себя все остальные теги на странице(он как корень дерева, главный родитель всех тегов страницы), тег body - теги и содержимое, которое отображается в браузере.
head и body - это ветви, у каждой из них свой набор тегов и т.д.



Браузер видит всю структуру(модель) веб-страницы и даже отслеживает текст, находящийся в тегах(например, "Заголовок" в теге h1),а также атрибуты каждого тега(например, атрибут класса у body или идентификатора у h1).
DOM считает теги,атрибуты и текст отдельными единицами - узлами.

JavaScript даёт возможность выбора элементов на веб-странице несколькими способами. Выбрав элемент, можно с ним что-то делать (например, заставить исчезнуть, перемещаться и т.д.)

Чтобы выбрать элемент с определённым идентификатором(id), используется метод document.getElementById().
Например, если есть какой-то блок div с id="header", то выбрать его с помощью данного метода можно так:

Код
document.getElementById("header");


Если же нужно выбрать какие-то конкретные теги, например, ссылки, то это можно сделать с помощью метода document.getElementsByTagName()

Код
document.getElementsByTagName('a');


Последние версии современных браузеров поддерживают метод выбора элементов на странице на основе селекторов CSS. Например, выбрать элементы с определённым именем класса можно методом document.getElementsByClassName().
К примеру, нужно выбрать все элементы с классом "active"

Код
document.getElementsByClassName('active');


Другой, более универсальный метод, позволяет использовать любой CSS-селектор для формирования выборки элементов страницы: querySelectorAll();
Для примера, выберем только элементы div с классом news:

Код
querySelectorAll('div.news');
Прикрепления: 8874097.jpg(139.4 Kb)
 
профиль цитата изменить удалить
Форум » JavaScript и jQuery » JavaScript » JavaScript и динамическое изменение веб-страницы (Общие понятия о работы JavaScript с содержимым страницы)
  • Страница 1 из 1
  • 1
Поиск: