Глава 6. Работа с DOM

Координаты элементов в документе

Здравствуйте! На прошлом уроке мы  с вами разбирались с  координатами элемента в окне. А на этом поговорим о координатах элемента непосредственно в документе. Тут следует отметить, что система координат относительно документа начинается в левом верхнем углу, а не в левом нижнем как мы знаем из школьного курса геометрии.

И соответственно координаты отвечают за позицию элемента по отношению к окну, а не к браузеру в целом.

По аналогии с CSS  координаты относительно окна браузера — это фиксированное позиционирование CSS, а относительно документа — абсолютное позиционирование.

Для удобства я буду называть  такие координаты PageX/PageY.

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

координаты элемента в документе

Читать далее

Координаты элемента в окне

Здравствуйте!  В этом уроке рассмотрим такую тему как  определение координат элементов на странице.  Ведь для того чтобы поместить один элемент относительно другого на странице надо знать координаты  элемента.  Система координат в браузере построена таким образом, что  начало координат находится в левом верхнем углу, а не в нижнем левом как мы привыкли.  Для удобства координаты будем называть как  clientY/clientX.

координаты элемента на странице

Читать далее

Размеры элементов и прокрутка веб-страницы

Здравствуйте! В продолжении темы прокрутка элементов на веб-странице в этом уроке мы с вами  рассмотрим такой вопрос как прокрутка веб-страницы и манипулирование  размерами браузера.   Как можно найти ширину браузера? Как прокрутить веб-страницу средствами JavaScript ? Ответы на эти вопросы я думаю  вы найдете в этом уроке.

Прокрутка элементов на веб-странице

Читать далее

Размеры и прокрутка элементов на веб-странице

Здравствуйте! В этом уроке мы с вами рассмотрим как изменять размеры элементов и прокрутку элементов на странице с помощью JavaScript.  Но и хотелось бы напомнить, что для работы с позиционированием элементов на странице, вам необходимо знать позиционирование в  css, а для работы с размерами — знать как изменять размеры элемента в JavaScript.

размеры и прокрутка элементов на веб-странице

Читать далее

Как поменять стиль элемента через JavaScript

Здравствуйте! В этом уроке я хотел бы рассказать о  том как можно поменять стиль элемента на веб-странице, используя JavaScript.  Надо сказать, что в JavaScript для работы со  стилями  применяются, как правило, 2 подхода:

  • Изменение свойства style
  • Изменение значения класса элемента

как поменять стили через javascript

Читать далее

Работа с атрибутами и изменение содержимого HTML-элементов.

Здравствуйте!  Продолжаем изучение работы с DOM в JavaScript и в этом уроке рассмотрим свойства и методы объекта Element. То есть это непосредственно сам найденный элемент на веб-странице. Очень важно не путать объект Element с Node. Node представляет из себя коллекцию элементов на веб-странице.

Изменение html элементов и их атрибутов

Читать далее

Создание, добавление и удаление элементов HTML страницы

Здравствуйте! С помощью JavaScript можно не только находить элементы на странице (о том как это делать читайте здесь) но также создавать элементы динамически и добавлять их в DOM. О том как это делать  и пойдет разговор в этом уроке.

Для  того  чтобы создать новый  элемент  на  веб-странице — в объекте document  есть следующие методы:

  • createElement(elementName):  создает новый элемент в качестве параметра надо передать любой тег html-страницы, возвращает html-элемент
  • createTextNode(text):  создает текстовый узел и возвращает его же.

Создание и удаление элементов на веб-странице

Читать далее

Объект Node. Как перемещаться по DOM

Здравствуйте! Мы с вами уже рассмотрели  что такое объект document и в этом уроке мы разберем собственно узел объекта document или Node.  Дело в том, что каждый узел, будь то html-элемент, его атрибут или  даже текст, в структуре DOM является объектом Node.  Этот служебный объект имеет ряд свойств, с помощью которых  вы можете перемещаться по дереву элементов DOM:

навигация по dom

Читать далее

Объект document. Как найти элемент на странице

Здравствуйте!  В этом уроке рассмотрим основные методы  для поиска элементов на странице. Ведь для того, чтобы  что то сделать с элементом на веб-странице его надо для начала найти.  Для этой цели используется объект document мы уже с ним встречались в примерах когда выводили информацию в браузер с помощью функции document.write().  Здесь же  мы рассмотрим еще методы для поиска элементов в дереве DOM.

Поиск элемента в DOM

Читать далее

Введение в DOM

Здравствуйте!  Надо сказать что основное предназначение  JavaScript  это взаимодействие с HTML-элементами и непосредственно с этой темой мы и будем разбираться в сегодняшнем уроке.

DOM — сокращенно от Document Object Model(Объектная модель документа)  это модель HTML-страницы описывающая ее в виде дерева, где элементы страницы представлены в виде веток. Ее не следует путать с BOM — это модель браузера и работает она на уровень выше о ней у нас еще будет разговор.

Читать далее

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: