Справочник по javascript dom: Манипуляции с DOM на чистом JavaScript JavaScript DOM – JS JavaScript Справочник примеры

Объект Document | DOM справочник

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

Объект Document используется для получения, изменения или добавления содержимого в HTML-документ и для обработки событий в этом документе.

Методы

МетодОписание
addEventListener()Позволяет установить обработчик события для документа.
createElement()Создает новый элемент.
createTextNode()Создает и возвращает текстовый узел с указанным текстом. Принимает один аргумент (строку с текстом).
getElementById()Возвращает ссылку на элемент, с указанным идентификатором.
getElementsByClassName()Возвращает коллекцию элементов, соответствующих указанному классу.
getElementsByName()Возвращает коллекцию всех элементов в документе, которые имеют атрибут name с указанным значением. Элементы хранятся в коллекции в том порядке, в котором они встречаются в исходном коде документа.

Метод document.getElementsByName() относится к объекту HTMLDocument, а не к объекту Document, поэтому он доступен только в HTML-документах и не доступен в XML-документах.

getElementsByTagName()Возвращает массив элементов, указанного типа.
querySelector()Возвращает первый элемент, совпавший с одним из указанных селекторов.
querySelectorAll()Возвращает массив элементов, соответствующих указанным селекторам.
removeEventListener()Удаляет обработчик события, который был установлен с помощью метода addEventListener().
write()Записывает переданные ему аргументы в документ.
writeln()Записывает переданные ему аргументы в документ, вставляя после вывода данных пробел.

Свойства

СвойствоОписание
activeElementВозвращает элемент, который в данный момент находится в фокусе.
documentURIВозвращает строку, содержащую URL-адрес документа.
imagesВозвращает массив, содержащий все элементы <img> документа.
linksВозвращает массив, содержащий все элементы <a> и <area>, которые имеют атрибут href.

Справочники и спецификации

В этом разделе мы познакомимся со справочниками и спецификациями.

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

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

Самая полная и подробная информация по JavaScript и браузерам есть в справочниках.

Её объём таков, что перевести всё с английского невозможно. Даже сделать «единый полный справочник» не получается, так как изменений много и они происходят постоянно.

Тем не менее, жить вполне можно если знать, куда смотреть.

Есть три основных справочника по JavaScript на английском языке:

  1. Mozilla Developer Network – содержит информацию, верную для основных браузеров. Также там присутствуют расширения только для Firefox (они помечены).

    Когда мне нужно быстро найти «стандартную» информацию по RegExp – ввожу в Google «RegExp MDN», и ключевое слово «MDN» (Mozilla Developer Network) приводит к информации из этого справочника.

  2. MSDN – справочник от Microsoft. Там много информации, в том числе и по JavaScript (они называют его «JScript»). Если нужно что-то, специфичное для IE – лучше лезть сразу туда.

    Например, для информации об особенностях RegExp в IE – полезное сочетание: «RegExp msdn». Иногда к поисковой фразе лучше добавить термин «JScript»: «RegExp msdn jscript».

  3. Safari Developer Library – менее известен и используется реже, но в нём тоже можно найти ценную информацию.

Есть ещё справочники, не от разработчиков браузеров, но тоже хорошие:

  1. http://help.dottoro.com – содержит подробную информацию по HTML/CSS/JavaScript.
  2. http://javascript.ru/manual – справочник по JavaScript на русском языке, он содержит основную информацию по языку, без функций для работы с документом. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: http://javascript.ru/RegExp.
  3. http://www.qu

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

Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById, getElementsByTagName и getElementsByName.

Более мощные способы поиска предлагают javascript-библиотеки.

Самый удобный способ найти элемент в DOM — это получить его по id. Для этого используется вызов document.getElementById(id)

Например, следующий код изменит цвет текста на голубой в div‘е c id="dataKeeper":

document.getElementById('dataKeeper').style.color = 'blue'

Следующий способ — это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag). Она возвращает массив из элементов, имеющих такой тег.

Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li:

document.getElementsByTagName('LI')[1]

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

При этом будут найдены только те объекты, которые находятся под этим элементом.

Например, следующий вызов получает список элементов LI, находящихся внутри первого тега div:

document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')

Вызов elem.getElementsByTagName('*') вернет список из всех детей узла elem в порядке их обхода.

Например, на таком DOM:

<div>
  <ol>
    <li>1</li>
    <li>2</li>
  </ol>
</div>

Такой код:

var div = document.getElementById('d1')
var elems = div.getElementsByTagName('*')

for(var i=0; i<elems.length; i++) alert(elems[i].id)

Выведет последовательность: ol1, li1, li2.

Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name) равно данному.

Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name: это form, input, a, select, textarea и ряд других, более редких.

Метод document.getElementsByName не будет работать с остальн

Задачи на продвинутую работу с DOM на JavaScript

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Работа с классами

Для решения задач данного блока вам понадобятся следующие свойства: classList.

Дан элемент #elem. Добавьте ему класс www.

Дан элемент #elem. Удалите у него класс www.

Дан элемент #elem. Проверьте наличие у него класса www.

Дан элемент #elem. Добавьте ему класс www, если его нет и удалите — если есть.

Дан элемент #elem. Узнайте количество его классов.

Дан элемент #elem. Выведите последовательно алертом его классы.

Работа с CSS

Для решения задач данного блока вам понадобятся следующие свойства: cssText.

Дан элемент #elem. Сделайте его красного цвета, размером 30px, добавьте ему границу. Решите задачу с помощью свойства cssText.

Свойство tagName

Для решения задач данного блока вам понадобятся следующие свойства: tagName.

Дан элемент #elem. По клику на него выведите название его тега.

Дан элемент #elem. По клику на него выведите название его тега в нижнем регистре.

Даны элементы с классом www. Добавьте каждому элементу в конец название его тега в нижнем регистре.

Вставка элементов через appendChild

Для решения задач данного блока вам понадобятся следующие методы: createElement, appendChild.

Дан ol. Вставьте ему в конец li с текстом ‘пункт’.

Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li.

Привязывание событий при вставке

Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li. Сделайте так, чтобы к вставляемым li было привязано следующее событие: по нажатию на li она должна вывести на экран свой текст.

Вставка элементов через insertBefore

Для решения задач данного блока вам понадобятся следующие методы: insertBefore.

Дан элемент ul, а в нем li #elem. Вставьте перед элементом #elem новую li с текстом ‘!!!’.

Вставка элементов через insertAdjacentHTML

Для решения задач данного блока вам понадобятся следующие методы: insertAdjacentHTML.

Дан элемент #elem. Вставьте перед ним span с текстом ‘!!!’.

Дан элемент #elem. Вставьте после него span с текстом ‘!!!’.

Дан элемент #elem. Вставьте ему в начало span с текстом ‘!!!’.

Дан элемент #elem. Вставьте ему в конец span с текстом ‘!!!’.

Потомки

Дан элемент #elem. Найдите первого потомка этого элемента и сделайте его текст красного цвета.

Дан элемент #elem. Найдите последнего потомка этого элемента и сделайте его текст красного цвета.

Дан элемент #elem. Найдите всех потомков этого элемента и добавьте им в конец текст ‘!’.

Соседи

Дан элемент #elem. Найдите его соседа сверху и добавьте ему в конец текст ‘!’.

Дан элемент #elem. Найдите его соседа снизу и добавьте ему в конец текст ‘!’.

Дан элемент #elem. Найдите его соседа снизу его соседа снизу (следующий элемент за соседним) и добавьте ему в конец текст ‘!’.

Родители

Для решения задач данного блока вам понадобятся следующие свойства: parentElement, parentNode.

Дан элемент #elem. Найдите его родителя и покрасьте его в красный цвет.

Дан элемент #elem. Найдите родителя его родителя и покрасьте его в красный цвет.

Удаление и клонирование

Для решения задач данного блока вам понадобятся следующие свойства: removeChild.

Дан элемент #parent, внутри него дан элемент #child. Дана кнопка. По нажатию на эту кнопку удалите элемент #child.

Дан ol. По нажатию на кнопку получите его последнего потомка и удалите его.

Дан элемент. Сделайте так, чтобы по нажатию по нему этот элемент удалялся.

Дан ol, а внутри него li. Сделайте так, чтобы по нажатию на любую li эта li удалялась.

Клонирование

Для решения задач данного блока вам понадобятся следующие свойства: cloneNode.

Дан инпут. Дана кнопка. По нажатию на кнопку клонируйте этот инпут.

Практика

Дан массив. Создайте ul через createElement, затем вставьте каждый элемент этого массива в отдельную li внутри этой ul, затем вставьте эту ul в конец body.

Дан инпут. Рядом с ним находится кнопочка «+». По нажатию на эту кнопку под нашим инпутом должен появится еще один пустой инпут.

Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы каждая цифра вставилась в новый инпут. Инпутов для цифр изначально не существует, они должны создаться в процессе работы скрипта.

Дана кнопка. Сделайте так, чтобы по нажатию на эту кнопку, скрывался родитель этой кнопки.

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

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