Шпаргалка: методы DOM
5.07.2023Краткая памятка по часто используемым методам Объектной модели документа DOM.
Поиск элементов в документе.
- document.getElementById('id')
- Возвращает элемент с указанным id в качестве объекта.
- document.getElementsByTagName('tagname')
- Находит в документе все элементы с тегом, указанным в tagname и возвращает их в виде массива объектов.
- node.getElementsByTagName('tagname')
- Находит все дочерние по отношению к node элементы с тегом, указанным в tagname и возвращает их в виде массива объектов.
- document.getElementsByName('name')
- В HTML 4.01 находит все элементы с аттрибутом name, значение которого указано в name и возвращает их в виде массива объектов. В XHTML 1.0 этот метод возвращает элементы управления форм с искомым значением атрибута name.
Чтение атрибутов элементов, значений узлов и прочих данных.
- node.getAttribute('attribute')
- Возвращает значение атрибута с именем, указанным в attribute.
- node.setAttribute('attribute', 'value')
- Устанавливает значение value атрибуту attribute.
- node.nodeType
- Возвращает константу, которая соответствует типу данного узла node (1 = элемент, 2 = атрибут, 3 = текст...).
- node.nodeName
- Возвращает имя узла node в зависимости от его типа.
- node.nodeValue
- Возвращает или устанавливает значение узла node в зависимости от его типа (текст в случае с текстовым узлом).
Перемещение между узлами
- node.previousSibling
- Возвращает узел, находящийся непосредственно перед узлом node.
- node.nextSibling
- Возвращает узел, находящийся непосредственно после узла node.
- node.childNodes
- Возвращает список, который содержит все дочерние узлы узла node. Первый и последний дочерний узел можно найти с помощью node.firstChild и node.lastChild, которые возвращают объект.
- node.parentNode
- Возвращает родительский узел узла node в качестве объекта.
Создание новых узлов.
- document.createElement(element)
- Создает новый элемент с типом, указанным через параметр element.
- document.createTextNode(string)
- Создает текстовый узел со значением, указанным в string.
- newNode = node.cloneNode(bool)
- Создает newNode, как копию узла node. Если bool=true, newNode будет содержать также все дочерние узлы оригинального node.
- node.appendChild(newNode)
- Добавляет newNode в качестве дочернего по отношению к узлу node и делает его последним дочерним узлом.
- node.insertBefore(newNode,oldNode)
- Добавляет newNode в качестве дочернего по отношению к узлу node и размещает его перед уже существующим узлом oldNode.
- node.removeChild(oldNode)
- Удаляет из узла node его дочерний узел oldNode.
- node.replaceChild(newNode, oldNode)
- Заменяет дочерний узел oldNode узла node на новый newNode.
Особенности браузеров.
- getAttribute и setAttribute
- Не во всех браузерах работают, поэтому присвоить значение атрибуту можно непосредственно: obj.property = value.
- className и HTMLfor
- Некоторые названия атрибутов HTML-элементов состоят из зарезервированных слов. Поэтому вместо class следует использовать className и HTMLfor вместо for.
- Список childNodes
- По-настоящему DOM-совместимые браузеры возвращают переводы строк в списке дочерних элементов, как текстовые узлы. Поэтому, перед удалением дочерних узлов следует проверять их nodeType.
DOM JavaScript Cheat Sheet.
забыли:
node.getElementsByTagName(’tagname’)
и
document.getElementsByName(’name’)
2007-07-06 at 10:21 am
спасибо, добавил
2007-07-06 at 12:59 pm
а какой-нибудь справочник не подскажете по функциям JavaScript
я пользуюсь не часто – постоянно их забываю :(
2007-07-07 at 9:33 pm
STRONG внутри DT лишний. ;-)
2007-07-08 at 4:17 am
Через obj.property = value устанавливается не значание атрибута, а свойство. ?ногда при изменении свойства меняется и значение атрибута( но не всегда). Другими словами атрибут!=свойство. В чем разница, хорошо написано в этой статье:
http://xpoint.ru/know-how/JavaScript/Atributyi
2007-07-08 at 7:11 pm
MT – ты за dt{font-weight:bold;} ?
2007-07-09 at 3:34 pm
vs: конечно, это же чистое представление, семантика «заголовочного» элемента и так выражена применением DT.
2007-07-10 at 10:38 am
пожалуйста,выложите кто-то справочник по свойствам и методам javascript)
2007-07-27 at 4:53 am
Достойно внимания. Спасибо.
2007-07-28 at 12:29 am
Спасибо.
Сегодня постараюсь сверстать в pdf и тут выложить – так удобней распечатывать.
2007-08-05 at 10:56 am
Сайт забросили что-ли? Почему так редко обновляется?
2007-08-07 at 11:39 am
Спасибо за инфу! Ждем обновлений сайта
2007-09-06 at 6:23 pm
Да, сайт обновляется редко. Почаще это делайте.
2007-09-08 at 10:27 pm
В Mozilla SeaMonkey есть такая утилита, как ?нспектор DOM. Открыв в этой утилите любой HTML документ, можно посмотреть все методы и аттрибуты любого HTML элемента в документе.
2007-09-25 at 6:09 pm
есть такой удобный DOM Inspector
2007-09-28 at 8:55 am
?нтересно
2007-10-24 at 2:11 pm
берешь программку для редактирования и попер и все дела
2008-02-13 at 7:15 pm
посмотрим
2008-04-09 at 3:28 am
Блин, когда уже getElementsByClassName допишут, чет рылся в кустарных решениях, слетают временами…
2008-04-22 at 8:37 pm
DOM Inspector намного удобнее..
2008-07-16 at 4:23 pm
Классно сделано. Почти за душу цепляет, заставляет задуматься над собственным блогом. Хотя не совсем полностью тема раскрыта. Где про это посмотреть подробно? С лучшими пожеланиями, жалобный спамер :)
Зы:Я чесно старался создать такой комент, который вам понравиться ;)
2008-07-17 at 3:38 pm
Я в JavaScript не очень.
?нтересно, а этот инспектор как встраивается в документ?
? где хранится? Хотя бы в общих словах…
2008-07-19 at 4:40 pm
Спасибо, интересная статья, постараюсь воплотить на практике)
2008-08-07 at 8:30 pm
что есть “узел”?
2008-08-19 at 8:14 pm
Ща попробуем,спосибо
2008-08-29 at 7:25 pm
Благодарю за полезную имфу, блог толково.
2008-09-19 at 11:35 am