- Главная
- Информатика
- Объектная модель документа DOM
Содержание
- 2. DOM Объектная модель документа (Document Object Model, DOM) - это прикладной программный интерфейс (API) для HTML-
- 3. Иерархия узлов Любой HTML- или ХМL-документ можно представить с помощью DOM как иерархию узлов. Есть несколько
- 4. Пример: Sample Page Hello World !
- 5. Элемент документа Корнем каждого документа является его узел. В этом примере у документа есть единственный дочерний
- 6. Узлы: Всем элементам разметки соответствуют узлы в дереве: НТМL-элементам - узлы элементов, атрибутам - узлы атрибутов,
- 7. Тип Document Узел документа представляется в JavaScript с помощью типа Document. В браузерах объект документа является
- 8. Сведения о документе В качестве экземпляра типа HTMLDocument объект document имеет несколько свойств, которых нет у
- 9. Свойства страниц Следующие три свойства связаны с запросами веб-страниц. Свойство URL содержит полный URL-aдpec страницы (который
- 10. Пример // получение полного URL-aдpeca const url = document.URL; // получение домена const domain = document.domain;
- 11. Получение элементов Одной из наиболее востребованных возможностей работы с DOM является получение элементов при помощи CSS
- 12. Метод getElementByid Метод getElementByid() принимает идентификатор элемента, который нужно получить, и возвращает этот элемент или null,
- 13. метод querySelector Данный метод принимает CSS-запрос и возвращает первый соответствующий ему элемент, либо значение null если
- 14. метод querySelectorAll Но что делать если нам нужно например изменить сразу несколько элементов с одинаковым классом?
- 15. метод getElementsByClassName Метод принимает строку с одним или несколькими именами классов и возвращает массив. Является одним
- 16. Задача 1 Найти в документе элемент с id “my-first-elem” Найти все элементы с классом “container” Найти
- 17. Свойство classList Это свойство существует специально для добавления, удаления либо замены имен классов. То есть, мы
- 18. Добавим к элементу новый класс: const block = document.querySelector(".root"); block.classList.add("newClass"); console.log(block);
- 19. Свойство readyState Свойство document.readyState является индикатором загрузки документа. Имеет два значения: loading - документ загружается complete
- 20. Стили и их изменение при помощи Java Script У любого HTML элемента есть свойство style, доступное
- 21. Примеры свойств:
- 22. Попробуем изменить цвет текста нашего элемента: const block = document.querySelector(".root"); block.style.color = "red"; console.log(block);
- 23. Элементы HTML Все НТМL-элементы представляются объектами типа HTML Element или его подтипов. Тип HTML Element унаследован
- 24. Свойства: id - уникальный идентификатор элемента в документе; title - дополнительные сведения об элементе, обычно отображаемые
- 25. Получение свойств Каждое из этих свойств можно использовать для получения и изменения значения соответствующего атрибута. Рассмотрим
- 26. Изменение свойств Также можно изменить атрибуты, присвоив свойствам новые значения: div.id = "someOtherid"; div.className = "ft";
- 27. Получение атрибутов У каждого элемента могут быть атрибуты, которые обычно предоставляют дополнительные сведения о нем или
- 28. Задание атрибутов У метода getAttribute () есть обратный метод setAttribute ( ) , принимающий два аргумента:
- 29. Метод removeAttribute () Метод removeAttribute () полностью удаляет атрибут элемента, не ограничиваясь очисткой его значения: div.removeAttribute("class");
- 30. Создание элементов Элементы можно создавать с помощью метода document . createElement ( ) , который принимает
- 31. Метод createElement () Метод createElement () создает элемент и задает его свойство ownerDocument, после чего можно
- 32. Добавление элементов Задание этих атрибутов для нового элемента только настраивает его, но не влияет на его
- 33. Методы вставки node.append(...nodes or strings) – добавляет узлы или строки в конец node, node.prepend(...nodes or strings)
- 34. Методы вставки
- 35. Свойство innerHTML Свойство Element.innerHTML устанавливает или получает разметку дочерних элементов. Например, elem.innerHTML = ' test! '
- 36. Удаление узлов node.remove() ! Все методы вставки автоматически удаляют узлы со старых мест. Клонирование узлов elem.cloneNode(true/false)
- 37. document.write - устаревший метод Вызов document.write работает только во время загрузки страницы. Если вызвать его позже,
- 38. Задание 1 Создать элемент p с классом “text” и с текстом - “Это всего лишь текст”,
- 39. Задание 2 Создать список элементов с помощью тега со значениями из массива строк: ["Viktor", "Tatiana", "Eduard",
- 40. Задание 3 Напишите функцию showMessage, которая будет вставлять на страницу div с классом “message” на странице
- 42. Скачать презентацию
Слайд 2
DOM
Объектная модель документа (Document Object Model, DOM) - это прикладной программный
DOM
Объектная модель документа (Document Object Model, DOM) - это прикладной программный
интерфейс (API) для HTML- и ХМL-документов. DOM представляет документ как иерархическое дерево узлов, позволяя добавлять, удалять и изменять отдельные части страницы. Основанная первоначально на ранних инновационных технологиях DHTML (Dynamic HTML) от Netscape и Microsoft, DOM обеспечивает по-настоящему кроссплатформенный и не зависящий от языка способ представле
ния страниц и изменения их разметки.
Слайд 3
Иерархия узлов
Любой HTML- или ХМL-документ можно представить с помощью DOM как
иерархию
Иерархия узлов
Любой HTML- или ХМL-документ можно представить с помощью DOM как иерархию
узлов. Есть несколько типов узлов, каждый из которых соответствует разным данным и (или) элементам разметки в документе. Каждый тип узлов обладает определенными характеристиками, данными и методами и может быть связан с другими узлами. Эти связи формируют иерархию, которая позволяет изобразить разметку в виде дерева с конкретным узлом в качестве корня.
Слайд 4
Пример:
Sample Page
Hello World !
Пример:
Hello World !
Слайд 5
Элемент документа
Корнем каждого документа является его узел. В этом примере у
Элемент документа
Корнем каждого документа является его узел. В этом примере у
документа есть единственный дочерний узел - элемент < html>, который называется элементом документа (document element).
Элемент документа - это самый внешний элемент в документе, содержащий все остальные элементы. В документе может быть только один элемент документа. В НТМL-страницах им всегда является элемент < html>, а в ХМL-разметке, где нет предопределенных элементов, им может быть любой элемент.
Элемент документа - это самый внешний элемент в документе, содержащий все остальные элементы. В документе может быть только один элемент документа. В НТМL-страницах им всегда является элемент < html>, а в ХМL-разметке, где нет предопределенных элементов, им может быть любой элемент.
Слайд 6
Узлы:
Всем элементам разметки соответствуют узлы в дереве: НТМL-элементам - узлы элементов,
Узлы:
Всем элементам разметки соответствуют узлы в дереве: НТМL-элементам - узлы элементов,
атрибутам - узлы атрибутов, типу документа - узел типа документа, а комментариям - узлы комментариев. Всего существует 12 типов узлов, которые наследуются от одного базового типа.
Слайд 7
Тип Document
Узел документа представляется в JavaScript с помощью типа Document. В
Тип Document
Узел документа представляется в JavaScript с помощью типа Document. В
браузерах объект документа является экземпляром типа HTMLDocument (производного от Document) и соответствует всей НТМL-странице. Объект document доступен глобально как свойство объекта window.
Тип Document может представлять НТМL-страницы или другие ХМL-документы, но чаще всего он фигурирует в коде как объект document типа HTMLDocument. Этот объект можно использовать для получения сведений о странице, а также для изменения ее вида и структуры.
Тип Document может представлять НТМL-страницы или другие ХМL-документы, но чаще всего он фигурирует в коде как объект document типа HTMLDocument. Этот объект можно использовать для получения сведений о странице, а также для изменения ее вида и структуры.
Слайд 8
Сведения о документе
В качестве экземпляра типа HTMLDocument объект document имеет несколько
Сведения о документе
В качестве экземпляра типа HTMLDocument объект document имеет несколько
свойств, которых нет у стандартных объектов Document. Эти свойства предоставляют сведения о загруженной веб-странице. Первое из них, title, содержит текст элемента , отображаемый в заголовке или на вкладке окна браузера. С помощью этого свойства можно получить заголовок текущей страницы или изменить его, при этом элемент <title> не изменяется, например:<br>const originalTitle = document.title; // получение заголовка документа<br>// задание заголовка документа<br>document.title = "New page title"; // новый заголовок страницы<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 9</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-8.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойства страниц Следующие три свойства связаны с запросами веб-страниц. Свойство URL" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-8.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-8.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-8.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-8.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойства страниц<br><p>Следующие три свойства связаны с запросами веб-страниц. Свойство URL содержит</div></h2><div class="slides-content">полный URL-aдpec страницы (который отображается в адресной строке), свойство domain - только доменное имя страницы, а referrer - URL-aдpec страницы, с которой был выполнен переход на текущую страницу. Свойство referrer может быть пустой строкой, если текущая страница была открыта без ссылки. Все эти сведения есть в НТТР-заголовке запроса, а указанные свойства просто предоставляют доступ к ним в javaScript:<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 10</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-9.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Пример // получение полного URL-aдpeca const url = document.URL; // получение" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-9.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-9.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-9.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-9.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример<br><p>// получение полного URL-aдpeca<br>const url = document.URL;<br>// получение домена<br>const domain =</div></h2><div class="slides-content">document.domain;<br>// получение источника ссылки<br>const referrer = document.referrer;<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 11</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-10.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Получение элементов Одной из наиболее востребованных возможностей работы с DOM является" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-10.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-10.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-10.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-10.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Получение элементов <br><p>Одной из наиболее востребованных возможностей работы с DOM является получение</div></h2><div class="slides-content">элементов при помощи CSS селекторов, и последующая работа с ними. <br>Например, изменение каких-либо их свойств, а также дальнейшее использование при работе скрипта.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 12</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-11.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Метод getElementByid Метод getElementByid() принимает идентификатор элемента, который нужно получить, и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-11.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-11.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-11.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-11.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Метод getElementByid<br><p>Метод getElementByid() принимает идентификатор элемента, который нужно получить, и возвращает</div></h2><div class="slides-content">этот элемент или null, если его не существует. Сравнение идентификатора с атрибутом id элемента на странице выполняется с учетом регистра.
Возьмем для примера следующий элемент:<br>
<div id="myDiv">Some text</div>
Этот элемент можно получить так:
const div = document.getElementByid( "myDiv" ); // получение ссылки на <div><br>const div = myDiv; // еще получение ссылки на <div><br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 13</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-12.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="метод querySelector Данный метод принимает CSS-запрос и возвращает первый соответствующий ему" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-12.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-12.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-12.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-12.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>метод querySelector<br><p>Данный метод принимает CSS-запрос и возвращает первый соответствующий ему элемент,</div></h2><div class="slides-content">либо значение null если таковой не найден.<br> const block = document.querySelector("div");
console.log(block);<br>А теперь попробуем получить точно так же элемент, но по классу.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 14</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-13.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="метод querySelectorAll Но что делать если нам нужно например изменить сразу" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-13.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>метод querySelectorAll<br><p>Но что делать если нам нужно например изменить сразу несколько</div></h2><div class="slides-content">элементов с одинаковым классом?<br>Выручает метод querySelectorAll.<br>Данный метод принимает CSS-запрос и возвращает массив со всеми свойствами.<br>const block = document.querySelectorAll("div");
console.log(block);<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 15</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-14.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="метод getElementsByClassName Метод принимает строку с одним или несколькими именами классов" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-14.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>метод getElementsByClassName<br><p>Метод принимает строку с одним или несколькими именами классов и</div></h2><div class="slides-content">возвращает массив.
Является одним из самых быстрых.<br> const block = document.getElementsByClassName("class");
console.log(block);<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 16</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-15.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задача 1 Найти в документе элемент с id “my-first-elem” Найти все" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-15.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Задача 1<br><p>Найти в документе элемент с id “my-first-elem”<br>Найти все элементы с</div></h2><div class="slides-content">классом “container”<br>Найти первый элемент с классом “wrapper”<br>Найти первые 2 элемента с классом “element”<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 17</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-16.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойство classList Это свойство существует специально для добавления, удаления либо замены" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-16.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойство classList<br><p>Это свойство существует специально для добавления, удаления либо замены имен</div></h2><div class="slides-content">классов. То есть, мы можем получить элемент с классом item и добавить к нему класс active.<br>У него есть дополнительные методы:<br>add -добавляет класс<br>contains - указывает, есть ли указанный класс в элементе<br>remove - удаляет класс<br>toggle - удаляет класс, если он уже есть, и добавляет, если отсутствует<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 18</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-17.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Добавим к элементу новый класс: const block = document.querySelector(".root"); block.classList.add("newClass"); console.log(block);" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-17.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Добавим к элементу новый класс:<br><p> const block = document.querySelector(".root");<br> block.classList.add("newClass");<br> console.log(block);<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 19</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-18.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойство readyState Свойство document.readyState является индикатором загрузки документа. Имеет два значения:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-18.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойство readyState<br><p>Свойство document.readyState является индикатором загрузки документа.
Имеет два значения:<br>loading -</div></h2><div class="slides-content">документ загружается<br>complete - документ загружен полностью<br>Код внутри условного оператора будет выполнен только если документ полностью загрузился:<br>if (document.readyState == ‘complete’) {<br> alert(“Я загрузился!”);<br>}<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 20</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-19.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Стили и их изменение при помощи Java Script У любого HTML" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-19.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-19.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-19.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-19.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Стили и их изменение при помощи Java Script<br><p>У любого HTML элемента</div></h2><div class="slides-content">есть свойство style, доступное при помощи JS.<br>Каждое CSS свойство можно определять либо переопределять при помощи обращения к свойству style элемента, который должен быть изменен.<br>Имена свойств преобразуются в имена JavaScript напрямую, за исключением свойства float. Именно это свойство является зарезервированным в самом языке, поэтому вместо него применяется cssFloat (в IE ниже 8-й версии - styleFloat).
Свойства, которые в CSS пишутся через дефис, в JS используются без него, без пробела, с верхним регистром каждого следующего после первого слова свойства: backgroundColor (background-color)<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 21</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-20.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Примеры свойств:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-20.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-20.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-20.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-20.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Примеры свойств:<br><p> <br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 22</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-21.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Попробуем изменить цвет текста нашего элемента: const block = document.querySelector(".root"); block.style.color = "red"; console.log(block);" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-21.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-21.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-21.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-21.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Попробуем изменить цвет текста нашего элемента:<br><p> const block = document.querySelector(".root");<br> block.style.color = "red";<br> console.log(block);<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 23</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-22.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Элементы HTML Все НТМL-элементы представляются объектами типа HTML Element или его" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-22.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-22.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-22.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-22.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элементы HTML<br><p>Все НТМL-элементы представляются объектами типа HTML Element или его подтипов.</div></h2><div class="slides-content">Тип HTML Element унаследован непосредственно от Element и содержит несколько дополнительных свойств. Каждое свойство соответствует одному из следующих стандартных атрибутов, доступных у каждого НТМL-элемента:<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 24</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-23.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойства: id - уникальный идентификатор элемента в документе; title - дополнительные" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-23.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-23.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-23.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-23.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойства:<br><p>id - уникальный идентификатор элемента в документе;
title - дополнительные сведения</div></h2><div class="slides-content">об элементе, обычно отображаемые во всплывающей подсказке;
lang - язык содержимого элемента (используется редко);
dir - направление языка (" ltr" - слева направо или " rtl" - справа налево;
также используется редко);
className - эквивалент атрибута class, который указывает для элемента СSS класс. Это свойство нельзя было назвать class, потому что class - зарезервированное слово в ECMAScгipt<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 25</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-24.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Получение свойств Каждое из этих свойств можно использовать для получения и" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-24.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-24.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-24.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-24.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Получение свойств<br><p>Каждое из этих свойств можно использовать для получения и изменения</div></h2><div class="slides-content">значения соответствующего атрибута. Рассмотрим следующий НТМL-элемент:
<div id="myDiv" class="bd" title="Body text " lang="en" dir="ltr"></div>
Все атрибуты этого элемента можно получить следующим образом:
const div = document.getElementByid( "myDiv " );
alert (div.id); /1 "myDiv"
alert(div.className); // "bd"
alert(div.title) ; // " Body text "
alert(div.lang) ; // "en"
alert (div.dir) ; /1 " ltr"<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 26</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-25.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Изменение свойств Также можно изменить атрибуты, присвоив свойствам новые значения: div.id" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-25.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-25.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-25.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-25.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Изменение свойств<br><p>Также можно изменить атрибуты, присвоив свойствам новые значения:
div.id = "someOtherid";
div.className</div></h2><div class="slides-content">= "ft";
div.title = "Some other text";
div.lang = "fr" ;
div.dir = "rtl";
<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 27</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-26.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Получение атрибутов У каждого элемента могут быть атрибуты, которые обычно предоставляют" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-26.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-26.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-26.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-26.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Получение атрибутов<br><p>У каждого элемента могут быть атрибуты, которые обычно предоставляют дополнительные</div></h2><div class="slides-content">сведения о нем или его содержимом. Три основных DОМ-метода для работы с атрибутами - getAttribute(), setAttribute() и removeAttribute() . Они предназначены для работы с любыми атрибутами, включая те, которые определены как свойства типа HTMLElement, например:
var div = document . getElementByid( " myDiv" );
alert (div.getAttribute ( "id" )); // " myDiv "
alert(div.getAttribute ("class" )); // "bd"
alert (div.getAttribute ( "title" )); // " Body text "
alert (div.getAttribute ( "lang" )); // "еп"
alert (div.getAttribute ( "dir" )); // " ltr"<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 28</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-27.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание атрибутов У метода getAttribute () есть обратный метод setAttribute (" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-27.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-27.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-27.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-27.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Задание атрибутов<br><p>У метода getAttribute () есть обратный метод setAttribute ( )</div></h2><div class="slides-content">, принимающий два аргумента: имя атрибута, который нужно задать, и его значение. Если атрибут уже существует, метод setAttribute () обновляет его значение. Если атрибут не существует, метод setAttribute () создает его и присваивает ему значение, например:<br>div . setAttribute ( "class", "ft " );<br>div . setAttribute ( "id", " someOtherid" );<br> div . setAtt ribute ( "title", " Some other text " );<br>div . setAttribute("lang" , " fr" );<br>div . setAtt ribute ( "dir" , " rt l " );<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 29</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-28.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Метод removeAttribute () Метод removeAttribute () полностью удаляет атрибут элемента, не" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-28.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-28.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-28.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-28.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Метод removeAttribute ()<br><p>Метод removeAttribute () полностью удаляет атрибут элемента, не ограничиваясь</div></h2><div class="slides-content">очисткой его значения:
div.removeAttribute("class");
Этот метод используется не очень часто, но может быть полезен для отбора нужных атрибутов.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 30</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-29.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание элементов Элементы можно создавать с помощью метода document . createElement" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-29.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-29.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-29.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-29.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Создание элементов<br><p>Элементы можно создавать с помощью метода document . createElement (</div></h2><div class="slides-content">) , который принимает имя тега создаваемого элемента. В НТМL-документах регистр имени тега не учитывается, а в ХМL-документах (включая XHTML) - учитывается. Например, создать элемент <div> можно следующим образом:<br>
const div = document.createElement("div");<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 31</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-30.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Метод createElement () Метод createElement () создает элемент и задает его" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-30.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-30.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-30.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-30.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Метод createElement ()<br><p>Метод createElement () создает элемент и задает его свойство</div></h2><div class="slides-content">ownerDocument, после чего можно манипулировать атрибутами элемента, добавлять к нему дочерние элементы и т. д., например:<br>
div.id = "myNewDiv ";
div.className = "bох"<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 32</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-31.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Добавление элементов Задание этих атрибутов для нового элемента только настраивает его," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-31.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-31.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-31.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-31.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Добавление элементов<br><p>Задание этих атрибутов для нового элемента только настраивает его, но</div></h2><div class="slides-content">не влияет на его отображение в браузере, потому что он не является частью дерева документа. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide33" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 33</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-32.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Методы вставки node.append(...nodes or strings) – добавляет узлы или строки в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-32.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-32.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-32.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-32.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Методы вставки<br><p>node.append(...nodes or strings) – добавляет узлы или строки в конец</div></h2><div class="slides-content">node,<br>node.prepend(...nodes or strings) – вставляет узлы или строки в начало node,<br>node.before(...nodes or strings) –- вставляет узлы или строки до node,<br>node.after(...nodes or strings) –- вставляет узлы или строки после node,<br>node.replaceWith(...nodes or strings) –- заменяет node заданными узлами или строками.<br>
Эти методы также могут вставлять несколько узлов и текстовых фрагментов за один вызов.<br>
Как только элемент добавлен в дерево документа, браузер сразу же его визуализирует. Любые последующие изменения элемента немедленно отражаются в браузере.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide34" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 34</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-33.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Методы вставки" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-33.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-33.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-33.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-33.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Методы вставки<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide35" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 35</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-34.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Свойство innerHTML Свойство Element.innerHTML устанавливает или получает разметку дочерних элементов. Например, elem.innerHTML = ' test! '" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-34.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-34.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-34.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-34.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Свойство innerHTML<br><p>Свойство Element.innerHTML устанавливает или получает разметку дочерних элементов.<br>
Например,
elem.innerHTML = '<p>test!</p>'<br></div></h2><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide36" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 36</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-35.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Удаление узлов node.remove() ! Все методы вставки автоматически удаляют узлы со" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-35.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-35.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-35.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-35.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Удаление узлов<br>node.remove()
! Все методы вставки автоматически удаляют узлы со старых мест.<br>Клонирование</div></h2><div class="slides-content">узлов<br>elem.cloneNode(true/false)<br>Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false), тогда клон будет без дочерних элементов.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide37" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 37</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-36.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="document.write - устаревший метод Вызов document.write работает только во время загрузки" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-36.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-36.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-36.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-36.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>document.write - устаревший метод<br>
Вызов document.write работает только во время загрузки страницы.<br>Если</div></h2><div class="slides-content">вызвать его позже, то существующее содержимое документа перезапишется.<br>Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide38" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 38</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-37.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание 1 Создать элемент p с классом “text” и с текстом" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-37.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-37.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-37.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-37.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Задание 1<br><p>Создать элемент p с классом “text” и с текстом -</div></h2><div class="slides-content">“Это всего лишь текст”, после него вставьте div с классом “alert” и с текстом “А это сообщение об ошибке” с красным фоном, белым текстом и полями (padding) размером 20px<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide39" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 39</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-38.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание 2 Создать список элементов с помощью тега со значениями из" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-38.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-38.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-38.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-38.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Задание 2<br><p>Создать список элементов с помощью тега <ol> со значениями из</div></h2><div class="slides-content">массива строк: ["Viktor", "Tatiana", "Eduard", "Michael", "Denis", "Peter", "Ann", "Dmitry", "Sergey", "Ivan", "Alan"]<br>Каждый четный элемент должен иметь css класс “even” и иметь зеленый фон, а нечетный - “odd” и иметь синий фон.<br>*Если это пользователь, у которого в имени встречаются минимум 2 одинаковые буквы без учета регистра (например, Peter, Tatiana) - цвет текста должен стать белым.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide40" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 40</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-39.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Задание 3 Напишите функцию showMessage, которая будет вставлять на страницу div" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/656143/slide-39.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/656143/slide-39.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/656143/slide-39.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/656143/slide-39.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Задание 3<br><p>Напишите функцию showMessage, которая будет вставлять на страницу div с</div></h2><div class="slides-content">классом “message” на странице с указанными аргументами: текст сообщения, цвет фона сообщения, положение от верхнего края страницы (css свойство top) и положение от левого края страницы (css свойство left)<br>Пример вызова функции: showMessage(“Всем привет”, ‘yellow’, 100, 50);<br>Примечание: Задать для .message позиционирование fixed, для корректного расчета положения сообщения<br>* Количество сообщений на странице не может быть больше 3-х. Если на странице 3 сообщения и мы вызываем showMessage(), то 1 сообщение необходимо удалить, а 2,3 и 4 должны остаться. <br>** Необходимо проверить, есть ли у нас уже на странице сообщение в таких же координатах (такие же и top, и left). Если есть - занять позицию +25px left и top. Если и в этот раз у нас имеется сообщение в данной позиции - повторять процедуру, пока не найдем свободное место.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/ekonomika/inflyatsionnye-protsessy-v-rossii" class="navigation-link">Инфляционные процессы в России</a></div><div class="navigation-item"><div>Следующая -</div><a href="/pedagogika/attestatsionnaya-rabota-nauchnoe-obshchestvo-shkolnikov-1" class="navigation-link">Аттестационная работа. Научное общество школьников</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/kulturologiya-kak-nauka-ssylki-na-gruppy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/711331/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/711331/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/711331/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/711331/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/711331/slide-0.jpg 1440w" class="slides-image related-itemImage"> Культурология как наука. Ссылки на группы в ВК</a></div><div class="related-item"><a href="/informatika/interfeysy-9" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/629812/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/629812/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/629812/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/629812/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/629812/slide-0.jpg 1440w" class="slides-image related-itemImage"> Интерфейсы</a></div><div class="related-item"><a href="/informatika/prezentaciya-na-temu-kompyuter-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1282769/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1282769/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1282769/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1282769/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1282769/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация на тему КОМПЬЮТЕР </a></div><div class="related-item"><a href="/informatika/prezentaciya-quotustrojstvo-kompyutera-i-ego-rabotaquot--skachat-prezentacii-po-informatike" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1257209/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1257209/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1257209/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1257209/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1257209/slide-0.jpg 1440w" class="slides-image related-itemImage">
Презентация на тему «Устройство компьютера» Ученицы 9 класса «А» ГОУСОШ 867 Сафоновой Яны </a></div><div class="related-item"><a href="/informatika/24018-prezentaciya-quotmyshquot--skachat-prezentacii-po-informatike" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1152560/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1152560/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1152560/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1152560/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1152560/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация "мышь" - скачать презентации по Информатике</a></div><div class="related-item"><a href="/informatika/hyper-v-chto-takoe-hyper-v" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/788453/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/788453/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/788453/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/788453/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/788453/slide-0.jpg 1440w" class="slides-image related-itemImage"> Hyper-V. Что такое Hyper-V?</a></div><div class="related-item"><a href="/informatika/shiny-rasshireniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1240755/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1240755/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1240755/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1240755/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1240755/slide-0.jpg 1440w" class="slides-image related-itemImage">
Шины расширения </a></div><div class="related-item"><a href="/informatika/ponyattya-pro-multimedia" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1450832/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1450832/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1450832/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1450832/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1450832/slide-0.jpg 1440w" class="slides-image related-itemImage"> Поняття про мультимедіа</a></div><div class="related-item"><a href="/informatika/sistema-orgnaizatsii-raboty-laboratorii-kouchinga" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/703182/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/703182/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/703182/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/703182/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/703182/slide-0.jpg 1440w" class="slides-image related-itemImage"> Система оргнаизации работы лаборатории коучинга</a></div><div class="related-item"><a href="/informatika/ukazateli-pointers" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/465385/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/465385/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/465385/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/465385/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/465385/slide-0.jpg 1440w" class="slides-image related-itemImage"> Указатели (pointers)</a></div><div class="related-item"><a href="/informatika/panel-haas-knopki-rezhima-ruchnogo-upravleniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/532157/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/532157/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/532157/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/532157/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/532157/slide-0.jpg 1440w" class="slides-image related-itemImage"> Панель HAAS. Кнопки режима ручного управления</a></div><div class="related-item"><a href="/informatika/informatika-kontrolna-robota-5-klas" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1452815/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1452815/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1452815/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1452815/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1452815/slide-0.jpg 1440w" class="slides-image related-itemImage"> Інформатика. Контрольна робота 5 клас</a></div><div class="related-item"><a href="/informatika/vvedenie-v-programmirovanie-turbo-pascal-9-klass" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1216576/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1216576/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1216576/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1216576/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1216576/slide-0.jpg 1440w" class="slides-image related-itemImage"> Введение в программирование Turbo Pascal 9 класс</a></div><div class="related-item"><a href="/informatika/frequently-used-linux-commands" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/492422/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/492422/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/492422/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/492422/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/492422/slide-0.jpg 1440w" class="slides-image related-itemImage"> Frequently Used Linux Commands</a></div><div class="related-item"><a href="/informatika/virusy-i-antivirusy-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/583588/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/583588/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/583588/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/583588/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/583588/slide-0.jpg 1440w" class="slides-image related-itemImage"> Вирусы и антивирусы</a></div><div class="related-item"><a href="/informatika/algoritm-i-ego-harakteristiki" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/630593/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/630593/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/630593/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/630593/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/630593/slide-0.jpg 1440w" class="slides-image related-itemImage"> Алгоритм и его характеристики</a></div><div class="related-item"><a href="/informatika/nformatsyn-resursi-susplstva--nformatsyna-kultura" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580946/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580946/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580946/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580946/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580946/slide-0.jpg 1440w" class="slides-image related-itemImage"> Інформаційні ресурси суспільства і інформаційна культура (тема 1)</a></div><div class="related-item"><a href="/informatika/klassifikatsiya-kompyuternyh-setey-lektsiya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/470154/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/470154/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/470154/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/470154/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/470154/slide-0.jpg 1440w" class="slides-image related-itemImage"> Классификация компьютерных сетей. Лекция 1</a></div><div class="related-item"><a href="/informatika/programmnoe-obespechenie-informatika-v-shkole" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/726742/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/726742/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/726742/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/726742/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/726742/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программное обеспечение. Информатика в школе</a></div><div class="related-item"><a href="/informatika/sposoby-kodirovaniya-informatsii-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/449814/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/449814/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/449814/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/449814/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/449814/slide-0.jpg 1440w" class="slides-image related-itemImage"> Способы кодирования информации</a></div><div class="related-item"><a href="/informatika/segmentatsya-merezh-z-vikoristannyam-komutatorv" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/524430/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/524430/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/524430/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/524430/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/524430/slide-0.jpg 1440w" class="slides-image related-itemImage"> Сегментація мереж з використанням комутаторів</a></div><div class="related-item"><a href="/informatika/kompyuternye-virusy-i-antivirusnye-programmy-28" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/489659/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/489659/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/489659/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/489659/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/489659/slide-0.jpg 1440w" class="slides-image related-itemImage"> Компьютерные вирусы и антивирусные программы</a></div><div class="related-item"><a href="/informatika/organizatsiya-kontrolya-dostupa-raspredelennaya-sluzhba-bezopasnosti" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/482271/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/482271/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/482271/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/482271/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/482271/slide-0.jpg 1440w" class="slides-image related-itemImage"> Организация контроля доступа. Распределенная служба безопасности</a></div><div class="related-item"><a href="/informatika/tablichnye-informatsionnye-modeli-9" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/555735/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/555735/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/555735/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/555735/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/555735/slide-0.jpg 1440w" class="slides-image related-itemImage"> Табличные информационные модели</a></div><div class="related-item"><a href="/informatika/tolko-vperyod-novye-tehnologii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/664170/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/664170/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/664170/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/664170/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/664170/slide-0.jpg 1440w" class="slides-image related-itemImage"> Только вперёд! Новые технологии</a></div><div class="related-item"><a href="/informatika/osnovy-algoritmizatsii-i-programmirovaniya-22" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/698294/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/698294/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/698294/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/698294/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/698294/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основы алгоритмизации и программирования</a></div><div class="related-item"><a href="/informatika/upravlenie-sistemami" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/631610/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/631610/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/631610/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/631610/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/631610/slide-0.jpg 1440w" class="slides-image related-itemImage"> Управление системами</a></div><div class="related-item"><a href="/informatika/git--sistema-kontrolya-versiy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582212/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/582212/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/582212/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/582212/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582212/slide-0.jpg 1440w" class="slides-image related-itemImage"> Git – система контроля версий</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><div class="footer-text">Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.</div><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><div class="footer-text"><a href="/page/dlyapravoobladatelei">Для правообладателей</a></div><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q){return {data:{meta:{result:{meta:{h1:k,main_text:a,main_title:l,main_description:m,main_keywords:n,main_image:a},app:{logo_image:a,logo_image_width:o,logo_image_height:p,logo_text:q,image_width_full:r,image_width_min:s,recaptcha_key:t,yandex_search:u,ya_context:d,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:v,footer_before:w,footer:x,dark_theme:d,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C},colors:{header_text:j,header_bg:D,accent:E}},social:F}},item:{result:{id:656143,name:"Объектная модель документа DOM",category:G,count:41,jpg:"jpg\u002F656143",hits:36,download:b,h1:a,meta:{h1:"Объектная модель документа DOM ",title:"Объектная модель документа DOM презентация",description:"Объектная модель документа DOM - Информатика, презентация, доклад, проект, конспект",keywords:"Объектная модель документа DOM, Информатика, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс",download_link:a},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Объектная модель документа DOM, из раздела: Информатика. Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EDOM\u003Cbr\u003E\u003Cp\u003EОбъектная модель документа (Document Object Model, DOM) - это прикладной программный интерфейс (API) для HTML- и ХМL-документов. DOM представляет документ как иерархическое дерево узлов, позволяя добавлять, удалять и изменять отдельные части страницы. Основанная первоначально на ранних инновационных технологиях DHTML (Dynamic HTML) от Netscape и Microsoft, DOM обеспечивает по-настоящему кроссплатформенный и не зависящий от языка способ представле\r\nния страниц и изменения их разметки.\u003Cbr\u003E \u003Cp\u003EИерархия узлов\u003Cbr\u003E\u003Cp\u003EЛюбой HTML- или ХМL-документ можно представить с помощью DOM как\r\nиерархию узлов. Есть несколько типов узлов, каждый из которых соответствует разным данным и (или) элементам разметки в документе. Каждый тип узлов обладает определенными характеристиками, данными и методами и может быть связан с другими узлами. Эти связи формируют иерархию, которая позволяет изобразить разметку в виде дерева с конкретным узлом в качестве корня.\u003Cbr\u003E",texts:["\u003Cp\u003EОбъектная модель документа\u003Cbr\u003E\u003Cp\u003EDOM\u003Cbr\u003E","\u003Cp\u003EDOM\u003Cbr\u003E\u003Cp\u003EОбъектная модель документа (Document Object Model, DOM) - это прикладной программный интерфейс (API) для HTML- и ХМL-документов. DOM представляет документ как иерархическое дерево узлов, позволяя добавлять, удалять и изменять отдельные части страницы. Основанная первоначально на ранних инновационных технологиях DHTML (Dynamic HTML) от Netscape и Microsoft, DOM обеспечивает по-настоящему кроссплатформенный и не зависящий от языка способ представле\r\nния страниц и изменения их разметки.\u003Cbr\u003E","\u003Cp\u003EИерархия узлов\u003Cbr\u003E\u003Cp\u003EЛюбой HTML- или ХМL-документ можно представить с помощью DOM как\r\nиерархию узлов. Есть несколько типов узлов, каждый из которых соответствует разным данным и (или) элементам разметки в документе. Каждый тип узлов обладает определенными характеристиками, данными и методами и может быть связан с другими узлами. Эти связи формируют иерархию, которая позволяет изобразить разметку в виде дерева с конкретным узлом в качестве корня.\u003Cbr\u003E","\u003Cp\u003EПример:\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Ctitle\u003ESample Page\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Cp\u003EHello World ! \u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EЭлемент документа\u003Cbr\u003E\u003Cp\u003EКорнем каждого документа является его узел. В этом примере у документа есть единственный дочерний узел - элемент \u003C html\u003E, который называется элементом документа (document element).\u003Cbr\u003E Элемент документа - это самый внешний элемент в документе, содержащий все остальные элементы. В документе может быть только один элемент документа. В НТМL-страницах им всегда является элемент \u003C html\u003E, а в ХМL-разметке, где нет предопределенных элементов, им может быть\r\nлюбой элемент.\u003Cbr\u003E","\u003Cp\u003EУзлы:\u003Cbr\u003E\u003Cp\u003EВсем элементам разметки соответствуют узлы в дереве: НТМL-элементам - узлы элементов, атрибутам - узлы атрибутов, типу документа - узел типа документа, а комментариям - узлы комментариев. Всего существует 12 типов узлов, которые наследуются от одного базового типа.\u003Cbr\u003E","\u003Cp\u003EТип Document\u003Cbr\u003E\u003Cp\u003EУзел документа представляется в JavaScript с помощью типа Document. В браузерах объект документа является экземпляром типа HTMLDocument (производного от Document) и соответствует всей НТМL-странице. Объект document доступен глобально как свойство объекта window.\u003Cbr\u003EТип Document может представлять НТМL-страницы или другие ХМL-документы, но чаще всего он фигурирует в коде как объект document типа HTMLDocument. Этот объект можно использовать для получения сведений о странице, а также для изменения ее вида и структуры.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСведения о документе\u003Cbr\u003E\u003Cp\u003EВ качестве экземпляра типа HTMLDocument объект document имеет несколько свойств, которых нет у стандартных объектов Document. Эти свойства предоставляют сведения о загруженной веб-странице. Первое из них, title, содержит текст элемента \u003Ctitle\u003E, отображаемый в заголовке или на вкладке окна браузера. С помощью этого свойства можно получить заголовок текущей страницы или изменить его, при этом элемент \u003Ctitle\u003E не изменяется, например:\u003Cbr\u003Econst originalTitle = document.title; \u002F\u002F получение заголовка документа\u003Cbr\u003E\u002F\u002F задание заголовка документа\u003Cbr\u003Edocument.title = \"New page title\"; \u002F\u002F новый заголовок страницы\u003Cbr\u003E","\u003Cp\u003EСвойства страниц\u003Cbr\u003E\u003Cp\u003EСледующие три свойства связаны с запросами веб-страниц. Свойство URL содержит полный URL-aдpec страницы (который отображается в адресной строке), свойство domain - только доменное имя страницы, а referrer - URL-aдpec страницы, с которой был выполнен переход на текущую страницу. Свойство referrer может быть пустой строкой, если текущая страница была открыта без ссылки. Все эти сведения есть в НТТР-заголовке запроса, а указанные свойства просто предоставляют доступ к ним в javaScript:\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EПример\u003Cbr\u003E\u003Cp\u003E\u002F\u002F получение полного URL-aдpeca\u003Cbr\u003Econst url = document.URL;\u003Cbr\u003E\u002F\u002F получение домена\u003Cbr\u003Econst domain = document.domain;\u003Cbr\u003E\u002F\u002F получение источника ссылки\u003Cbr\u003Econst referrer = document.referrer;\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EПолучение элементов\t\u003Cbr\u003E\u003Cp\u003EОдной из наиболее востребованных возможностей работы с DOM является получение элементов при помощи CSS селекторов, и последующая работа с ними. \u003Cbr\u003EНапример, изменение каких-либо их свойств, а также дальнейшее использование при работе скрипта.\u003Cbr\u003E","\u003Cp\u003EМетод getElementByid\u003Cbr\u003E\u003Cp\u003EМетод getElementByid() принимает идентификатор элемента, который нужно получить, и возвращает этот элемент или null, если его не существует. Сравнение идентификатора с атрибутом id элемента на странице выполняется с учетом регистра.\r\nВозьмем для примера следующий элемент:\u003Cbr\u003E\r\n\u003Cdiv id=\"myDiv\"\u003ESome text\u003C\u002Fdiv\u003E\r\nЭтот элемент можно получить так:\r\nconst div = document.getElementByid( \"myDiv\" ); \u002F\u002F получение ссылки на \u003Cdiv\u003E\u003Cbr\u003Econst div = myDiv; \u002F\u002F еще получение ссылки на \u003Cdiv\u003E\u003Cbr\u003E","\u003Cp\u003Eметод querySelector\u003Cbr\u003E\u003Cp\u003EДанный метод принимает CSS-запрос и возвращает первый соответствующий ему элемент, либо значение null если таковой не найден.\u003Cbr\u003E\tconst block = document.querySelector(\"div\");\r\n\tconsole.log(block);\u003Cbr\u003EА теперь попробуем получить точно так же элемент, но по классу.\u003Cbr\u003E","\u003Cp\u003Eметод querySelectorAll\u003Cbr\u003E\u003Cp\u003EНо что делать если нам нужно например изменить сразу несколько элементов с одинаковым классом?\u003Cbr\u003EВыручает метод querySelectorAll.\u003Cbr\u003EДанный метод принимает CSS-запрос и возвращает массив со всеми свойствами.\u003Cbr\u003E\t\u003Cbr\u003Econst block = document.querySelectorAll(\"div\");\r\n\tconsole.log(block);\u003Cbr\u003E","\u003Cp\u003Eметод getElementsByClassName\u003Cbr\u003E\u003Cp\u003EМетод принимает строку с одним или несколькими именами классов и возвращает массив.\r\nЯвляется одним из самых быстрых.\u003Cbr\u003E\tconst block = document.getElementsByClassName(\"class\");\r\n\tconsole.log(block);\u003Cbr\u003E","\u003Cp\u003EЗадача 1\u003Cbr\u003E\u003Cp\u003EНайти в документе элемент с id “my-first-elem”\u003Cbr\u003EНайти все элементы с классом “container”\u003Cbr\u003EНайти первый элемент с классом “wrapper”\u003Cbr\u003EНайти первые 2 элемента с классом “element”\u003Cbr\u003E","\u003Cp\u003EСвойство classList\u003Cbr\u003E\u003Cp\u003EЭто свойство существует специально для добавления, удаления либо замены имен классов. То есть, мы можем получить элемент с классом item и добавить к нему класс active.\u003Cbr\u003EУ него есть дополнительные методы:\u003Cbr\u003Eadd -добавляет класс\u003Cbr\u003Econtains - указывает, есть ли указанный класс в элементе\u003Cbr\u003Eremove - удаляет класс\u003Cbr\u003Etoggle - удаляет класс, если он уже есть, и добавляет, если отсутствует\u003Cbr\u003E","\u003Cp\u003EДобавим к элементу новый класс:\u003Cbr\u003E\u003Cp\u003E\tconst block = document.querySelector(\".root\");\u003Cbr\u003E\tblock.classList.add(\"newClass\");\u003Cbr\u003E\tconsole.log(block);\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСвойство readyState\u003Cbr\u003E\u003Cp\u003EСвойство document.readyState является индикатором загрузки документа. \r\nИмеет два значения:\u003Cbr\u003Eloading - документ загружается\u003Cbr\u003Ecomplete - документ загружен полностью\u003Cbr\u003EКод внутри условного оператора будет выполнен только если документ полностью загрузился:\u003Cbr\u003Eif (document.readyState == ‘complete’) {\u003Cbr\u003E\talert(“Я загрузился!”);\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EСтили и их изменение при помощи Java Script\u003Cbr\u003E\u003Cp\u003EУ любого HTML элемента есть свойство style, доступное при помощи JS.\u003Cbr\u003EКаждое CSS свойство можно определять либо переопределять при помощи обращения к свойству style элемента, который должен быть изменен.\u003Cbr\u003EИмена свойств преобразуются в имена JavaScript напрямую, за исключением свойства float. Именно это свойство является зарезервированным в самом языке, поэтому вместо него применяется cssFloat (в IE ниже 8-й версии - styleFloat).\r\nСвойства, которые в CSS пишутся через дефис, в JS используются без него, без пробела, с верхним регистром каждого следующего после первого слова свойства: backgroundColor (background-color)\u003Cbr\u003E","\u003Cp\u003EПримеры свойств:\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EПопробуем изменить цвет текста нашего элемента:\u003Cbr\u003E\u003Cp\u003E\tconst block = document.querySelector(\".root\");\u003Cbr\u003E\tblock.style.color = \"red\";\u003Cbr\u003E\tconsole.log(block);\u003Cbr\u003E \u003Cbr\u003E","\u003Cp\u003EЭлементы HTML\u003Cbr\u003E\u003Cp\u003EВсе НТМL-элементы представляются объектами типа HTML Element или его подтипов. Тип HTML Element унаследован непосредственно от Element и содержит несколько дополнительных свойств. Каждое свойство соответствует одному из следующих стандартных атрибутов, доступных у каждого НТМL-элемента:\u003Cbr\u003E","\u003Cp\u003EСвойства:\u003Cbr\u003E\u003Cp\u003Eid - уникальный идентификатор элемента в документе;\r\n title - дополнительные сведения об элементе, обычно отображаемые во всплывающей подсказке;\r\n lang - язык содержимого элемента (используется редко);\r\ndir - направление языка (\" ltr\" - слева направо или \" rtl\" - справа налево;\r\nтакже используется редко);\r\nclassName - эквивалент атрибута class, который указывает для элемента СSS класс. Это свойство нельзя было назвать class, потому что class - зарезервированное слово в ECMAScгipt\u003Cbr\u003E","\u003Cp\u003EПолучение свойств\u003Cbr\u003E\u003Cp\u003EКаждое из этих свойств можно использовать для получения и изменения значения соответствующего атрибута. Рассмотрим следующий НТМL-элемент:\r\n\r\n\u003Cdiv id=\"myDiv\" class=\"bd\" title=\"Body text \" lang=\"en\" dir=\"ltr\"\u003E\u003C\u002Fdiv\u003E\r\nВсе атрибуты этого элемента можно получить следующим образом:\r\nconst div = document.getElementByid( \"myDiv \" );\r\nalert (div.id); \u002F1 \"myDiv\"\r\nalert(div.className); \u002F\u002F \"bd\"\r\nalert(div.title) ; \u002F\u002F \" Body text \"\r\nalert(div.lang) ; \u002F\u002F \"en\"\r\nalert (div.dir) ; \u002F1 \" ltr\"\u003Cbr\u003E","\u003Cp\u003EИзменение свойств\u003Cbr\u003E\u003Cp\u003EТакже можно изменить атрибуты, присвоив свойствам новые значения:\r\ndiv.id = \"someOtherid\";\r\ndiv.className = \"ft\";\r\ndiv.title = \"Some other text\";\r\ndiv.lang = \"fr\" ;\r\ndiv.dir = \"rtl\";\r\n\r\n\u003Cbr\u003E","\u003Cp\u003EПолучение атрибутов\u003Cbr\u003E\u003Cp\u003EУ каждого элемента могут быть атрибуты, которые обычно предоставляют дополнительные сведения о нем или его содержимом. Три основных DОМ-метода для работы с атрибутами - getAttribute(), setAttribute() и removeAttribute() . Они предназначены для работы с любыми атрибутами, включая те, которые определены как свойства типа HTMLElement, например:\r\nvar div = document . getElementByid( \" myDiv\" );\r\nalert (div.getAttribute ( \"id\" )); \u002F\u002F \" myDiv \"\r\nalert(div.getAttribute (\"class\" )); \u002F\u002F \"bd\"\r\nalert (div.getAttribute ( \"title\" )); \u002F\u002F \" Body text \"\r\nalert (div.getAttribute ( \"lang\" )); \u002F\u002F \"еп\"\r\nalert (div.getAttribute ( \"dir\" )); \u002F\u002F \" ltr\"\u003Cbr\u003E","\u003Cp\u003EЗадание атрибутов\u003Cbr\u003E\u003Cp\u003EУ метода getAttribute () есть обратный метод setAttribute ( ) , принимающий два аргумента: имя атрибута, который нужно задать, и его значение. Если атрибут уже существует, метод setAttribute () обновляет его значение. Если атрибут не существует, метод setAttribute () создает его и присваивает ему значение, например:\u003Cbr\u003Ediv . setAttribute ( \"class\", \"ft \" );\u003Cbr\u003Ediv . setAttribute ( \"id\", \" someOtherid\" );\u003Cbr\u003E div . setAtt ribute ( \"title\", \" Some other text \" );\u003Cbr\u003Ediv . setAttribute(\"lang\" , \" fr\" );\u003Cbr\u003Ediv . setAtt ribute ( \"dir\" , \" rt l \" );\u003Cbr\u003E","\u003Cp\u003EМетод removeAttribute ()\u003Cbr\u003E\u003Cp\u003EМетод removeAttribute () полностью удаляет атрибут элемента, не ограничиваясь очисткой его значения:\r\ndiv.removeAttribute(\"class\");\r\nЭтот метод используется не очень часто, но может быть полезен для отбора нужных атрибутов.\u003Cbr\u003E","\u003Cp\u003EСоздание элементов\u003Cbr\u003E\u003Cp\u003EЭлементы можно создавать с помощью метода document . createElement ( ) , который принимает имя тега создаваемого элемента. В НТМL-документах регистр имени тега не учитывается, а в ХМL-документах (включая XHTML) - учитывается. Например, создать элемент \u003Cdiv\u003E можно следующим образом:\u003Cbr\u003E\r\nconst div = document.createElement(\"div\");\u003Cbr\u003E","\u003Cp\u003EМетод createElement ()\u003Cbr\u003E\u003Cp\u003EМетод createElement () создает элемент и задает его свойство ownerDocument, после чего можно манипулировать атрибутами элемента, добавлять к нему дочерние элементы и т. д., например:\u003Cbr\u003E\r\ndiv.id = \"myNewDiv \";\r\ndiv.className = \"bох\"\u003Cbr\u003E","\u003Cp\u003EДобавление элементов\u003Cbr\u003E\u003Cp\u003EЗадание этих атрибутов для нового элемента только настраивает его, но не влияет на его отображение в браузере, потому что он не является частью дерева документа. \u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EМетоды вставки\u003Cbr\u003E\u003Cp\u003Enode.append(...nodes or strings) – добавляет узлы или строки в конец node,\u003Cbr\u003Enode.prepend(...nodes or strings) – вставляет узлы или строки в начало node,\u003Cbr\u003Enode.before(...nodes or strings) –- вставляет узлы или строки до node,\u003Cbr\u003Enode.after(...nodes or strings) –- вставляет узлы или строки после node,\u003Cbr\u003Enode.replaceWith(...nodes or strings) –- заменяет node заданными узлами или строками.\u003Cbr\u003E\r\nЭти методы также могут вставлять несколько узлов и текстовых фрагментов за один вызов.\u003Cbr\u003E\r\nКак только элемент добавлен в дерево документа, браузер сразу же его визуализирует. Любые последующие изменения элемента немедленно отражаются в браузере.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EМетоды вставки\u003Cbr\u003E","\u003Cp\u003EСвойство innerHTML\u003Cbr\u003E\u003Cp\u003EСвойство Element.innerHTML устанавливает или получает разметку дочерних элементов.\u003Cbr\u003E\r\n\r\nНапример,\r\n\r\nelem.innerHTML = '\u003Cp\u003Etest!\u003C\u002Fp\u003E'\u003Cbr\u003E","\u003Cp\u003EУдаление узлов\u003Cbr\u003Enode.remove()\r\n\r\n! Все методы вставки автоматически удаляют узлы со старых мест.\u003Cbr\u003EКлонирование узлов\u003Cbr\u003Eelem.cloneNode(true\u002Ffalse)\u003Cbr\u003EВызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false), тогда клон будет без дочерних элементов.\u003Cbr\u003E","\u003Cp\u003Edocument.write - устаревший метод\u003Cbr\u003E\r\nВызов document.write работает только во время загрузки страницы.\u003Cbr\u003EЕсли вызвать его позже, то существующее содержимое документа перезапишется.\u003Cbr\u003EМетод пишет прямо в текст страницы, пока DOM ещё в процессе создания.\u003Cbr\u003E","\u003Cp\u003EЗадание 1\u003Cbr\u003E\u003Cp\u003EСоздать элемент p с классом “text” и с текстом - “Это всего лишь текст”, после него вставьте div с классом “alert” и с текстом “А это сообщение об ошибке” с красным фоном, белым текстом и полями (padding) размером 20px\u003Cbr\u003E","\u003Cp\u003EЗадание 2\u003Cbr\u003E\u003Cp\u003EСоздать список элементов с помощью тега \u003Col\u003E со значениями из массива строк: [\"Viktor\", \"Tatiana\", \"Eduard\", \"Michael\", \"Denis\", \"Peter\", \"Ann\", \"Dmitry\", \"Sergey\", \"Ivan\", \"Alan\"]\u003Cbr\u003EКаждый четный элемент должен иметь css класс “even” и иметь зеленый фон, а нечетный - “odd” и иметь синий фон.\u003Cbr\u003E*Если это пользователь, у которого в имени встречаются минимум 2 одинаковые буквы без учета регистра (например, Peter, Tatiana) - цвет текста должен стать белым.\u003Cbr\u003E\u003Cbr\u003E \u003Cbr\u003E","\u003Cp\u003EЗадание 3\u003Cbr\u003E\u003Cp\u003EНапишите функцию showMessage, которая будет вставлять на страницу div с классом “message” на странице с указанными аргументами: текст сообщения, цвет фона сообщения, положение от верхнего края страницы (css свойство top) и положение от левого края страницы (css свойство left)\u003Cbr\u003EПример вызова функции: showMessage(“Всем привет”, ‘yellow’, 100, 50);\u003Cbr\u003EПримечание: Задать для .message позиционирование fixed, для корректного расчета положения сообщения\u003Cbr\u003E* Количество сообщений на странице не может быть больше 3-х. Если на странице 3 сообщения и мы вызываем showMessage(), то 1 сообщение необходимо удалить, а 2,3 и 4 должны остаться. \u003Cbr\u003E** Необходимо проверить, есть ли у нас уже на странице сообщение в таких же координатах (такие же и top, и left). Если есть - занять позицию +25px left и top. Если и в этот раз у нас имеется сообщение в данной позиции - повторять процедуру, пока не найдем свободное место.\u003Cbr\u003E","\u003Cp\u003EЗадание 4\u003Cbr\u003E\u003Cp\u003EДинамическое создание списка\u003Cbr\u003EЗапрашивайте число у пользователя с помощью prompt.\u003Cbr\u003EСоздавайте элемент \u003Cli\u003E и добавляйте его к \u003Cul\u003E.\u003Cbr\u003EКаждый следующий элемент \u003Cli\u003E списка должен должен иметь значение суммы всех предыдущих элементов + введенного значения\u003Cbr\u003EПроцесс прерывается, когда пользователь нажимает Esc, вводит пустую строку или не числовое значение\u003Cbr\u003EВсе элементы должны создаваться динамически.\u003Cbr\u003E Например, пользователь ввел 3, затем 5, затем 9, затем 15, затем 1, а затем нажал esc (или ввели не число), тогда на странице должно быть:\u003Cbr\u003E\u003Cul\u003E\r\n \u003Cli\u003E3\u003C\u002Fli\u003E 3\r\n \u003Cli\u003E8\u003C\u002Fli\u003E \u002F\u002F 3 + 5\r\n \u003Cli\u003E20\u003C\u002Fli\u003E \u002F\u002F 3 + 8 + 9\r\n \u003Cli\u003E46\u003C\u002Fli\u003E \u002F\u002F 3 + 8 + 20 + 15\r\n \u003Cli\u003E78\u003C\u002Fli\u003E \u002F\u002F 3 + 8 + 20 + 46 + 1\r\n\u003C\u002Ful\u003E\u003Cbr\u003E"],href:"\u002Finformatika\u002Fobektnaya-model-dokumenta-dom",href_category:"\u002Finformatika",date:1660092221,related:[{id:711331,name:"Культурология как наука. Ссылки на группы в ВК",href:"\u002Finformatika\u002Fkulturologiya-kak-nauka-ssylki-na-gruppy",jpg:"jpg\u002F711331"},{id:629812,name:"Интерфейсы",href:"\u002Finformatika\u002Finterfeysy-9",jpg:"jpg\u002F629812"},{id:1282769,name:"Презентация на тему КОМПЬЮТЕР ",href:"\u002Finformatika\u002Fprezentaciya-na-temu-kompyuter-2",jpg:"jpg\u002F1282769"},{id:1257209,name:" \r\n Презентация на тему «Устройство компьютера» Ученицы 9 класса «А» ГОУСОШ 867 Сафоновой Яны ",href:"\u002Finformatika\u002Fprezentaciya-quotustrojstvo-kompyutera-i-ego-rabotaquot--skachat-prezentacii-po-informatike",jpg:"jpg\u002F1257209"},{id:1152560,name:"Презентация \"мышь\" - скачать презентации по Информатике",href:"\u002Finformatika\u002F24018-prezentaciya-quotmyshquot--skachat-prezentacii-po-informatike",jpg:"jpg\u002F1152560"},{id:788453,name:"Hyper-V. Что такое Hyper-V?",href:"\u002Finformatika\u002Fhyper-v-chto-takoe-hyper-v",jpg:"jpg\u002F788453"},{id:1240755,name:" \r\n Шины расширения ",href:"\u002Finformatika\u002Fshiny-rasshireniya",jpg:"jpg\u002F1240755"},{id:1450832,name:"Поняття про мультимедіа",href:"\u002Finformatika\u002Fponyattya-pro-multimedia",jpg:"jpg\u002F1450832"},{id:703182,name:"Система оргнаизации работы лаборатории коучинга",href:"\u002Finformatika\u002Fsistema-orgnaizatsii-raboty-laboratorii-kouchinga",jpg:"jpg\u002F703182"},{id:465385,name:"Указатели (pointers)",href:"\u002Finformatika\u002Fukazateli-pointers",jpg:"jpg\u002F465385"},{id:532157,name:"Панель HAAS. Кнопки режима ручного управления",href:"\u002Finformatika\u002Fpanel-haas-knopki-rezhima-ruchnogo-upravleniya",jpg:"jpg\u002F532157"},{id:1452815,name:"Інформатика. Контрольна робота 5 клас",href:"\u002Finformatika\u002Finformatika-kontrolna-robota-5-klas",jpg:"jpg\u002F1452815"},{id:1216576,name:"Введение в программирование Turbo Pascal 9 класс",href:"\u002Finformatika\u002Fvvedenie-v-programmirovanie-turbo-pascal-9-klass",jpg:"jpg\u002F1216576"},{id:492422,name:"Frequently Used Linux Commands",href:"\u002Finformatika\u002Ffrequently-used-linux-commands",jpg:"jpg\u002F492422"},{id:583588,name:"Вирусы и антивирусы",href:"\u002Finformatika\u002Fvirusy-i-antivirusy-4",jpg:"jpg\u002F583588"},{id:630593,name:"Алгоритм и его характеристики",href:"\u002Finformatika\u002Falgoritm-i-ego-harakteristiki",jpg:"jpg\u002F630593"},{id:580946,name:"Інформаційні ресурси суспільства і інформаційна культура (тема 1)",href:"\u002Finformatika\u002Fnformatsyn-resursi-susplstva--nformatsyna-kultura",jpg:"jpg\u002F580946"},{id:470154,name:"Классификация компьютерных сетей. Лекция 1",href:"\u002Finformatika\u002Fklassifikatsiya-kompyuternyh-setey-lektsiya-1",jpg:"jpg\u002F470154"},{id:726742,name:"Программное обеспечение. Информатика в школе",href:"\u002Finformatika\u002Fprogrammnoe-obespechenie-informatika-v-shkole",jpg:"jpg\u002F726742"},{id:449814,name:"Способы кодирования информации",href:"\u002Finformatika\u002Fsposoby-kodirovaniya-informatsii-4",jpg:"jpg\u002F449814"},{id:524430,name:"Сегментація мереж з використанням комутаторів",href:"\u002Finformatika\u002Fsegmentatsya-merezh-z-vikoristannyam-komutatorv",jpg:"jpg\u002F524430"},{id:489659,name:"Компьютерные вирусы и антивирусные программы",href:"\u002Finformatika\u002Fkompyuternye-virusy-i-antivirusnye-programmy-28",jpg:"jpg\u002F489659"},{id:482271,name:"Организация контроля доступа. Распределенная служба безопасности",href:"\u002Finformatika\u002Forganizatsiya-kontrolya-dostupa-raspredelennaya-sluzhba-bezopasnosti",jpg:"jpg\u002F482271"},{id:555735,name:"Табличные информационные модели",href:"\u002Finformatika\u002Ftablichnye-informatsionnye-modeli-9",jpg:"jpg\u002F555735"},{id:664170,name:"Только вперёд! Новые технологии",href:"\u002Finformatika\u002Ftolko-vperyod-novye-tehnologii",jpg:"jpg\u002F664170"},{id:698294,name:"Основы алгоритмизации и программирования",href:"\u002Finformatika\u002Fosnovy-algoritmizatsii-i-programmirovaniya-22",jpg:"jpg\u002F698294"},{id:631610,name:"Управление системами",href:"\u002Finformatika\u002Fupravlenie-sistemami",jpg:"jpg\u002F631610"},{id:582212,name:"Git – система контроля версий",href:"\u002Finformatika\u002Fgit--sistema-kontrolya-versiy",jpg:"jpg\u002F582212"}],navigation:{next:"\u002Fpedagogika\u002Fattestatsionnaya-rabota-nauchnoe-obshchestvo-shkolnikov-1",next_name:"Аттестационная работа. Научное общество школьников",prev:"\u002Fekonomika\u002Finflyatsionnye-protsessy-v-rossii",prev_name:"Инфляционные процессы в России"}}},categories:{result:[{id:H,ordering:b,name:"Разное",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес и предпринимательство",pseudoname:"biznes-i-predprinimatelstvo"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:H,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:h,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:I,SITE_HOST:"vseprezentacii.com",SITE_LANG:J,API_BASE_URL:"https:\u002F\u002Fvseprezentacii.com\u002Fapi\u002F",pwaManifest:{name:I,short_name:a,description:a,lang:J,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.6bbe8d3f.png",type:c,sizes:K,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.6bbe8d3f.png",type:c,sizes:K,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.6bbe8d3f.png",type:c,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.6bbe8d3f.png",type:c,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.6bbe8d3f.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.6bbe8d3f.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.6bbe8d3f.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.6bbe8d3f.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.6bbe8d3f.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.6bbe8d3f.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.6bbe8d3f.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.6bbe8d3f.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.6bbe8d3f.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.6bbe8d3f.png",type:c,sizes:Q,purpose:g}]},yandexMetrika:{id:"94843251",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:k,main_text:a,main_title:l,main_description:m,main_keywords:n,main_image:a},app:{logo_image:a,logo_image_width:o,logo_image_height:p,logo_text:q,image_width_full:r,image_width_min:s,recaptcha_key:t,yandex_search:u,ya_context:d,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:v,footer_before:w,footer:x,dark_theme:d,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C},colors:{header_text:j,header_bg:D,accent:E}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable",11,"h2","#ffffff","Презентации, проекты в PowerPoint","Презентации в PowerPoint","Презентации, проекты, доклады в PowerPoint ","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект, скачать",28,32,"VsePrezentacii.com",720,480,"6LdGr9gnAAAAAKdcDqFL5n46upSHwwYHs5ccQSJh","3212391","abusetheslide@ya.ru","Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.","\u003Ca href=\"\u002Fpage\u002Fdlyapravoobladatelei\"\u003EДля правообладателей\u003C\u002Fa\u003E","div","images_before","category","both",77,"#333333","#8a8888","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика",1,"VsePrezentacii","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.08fba208.js" crossorigin></script></body>
</html>