Шпаргалка: методы DOM

Краткая памятка по часто используемым методам Объектной модели документа 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.



Много комментариев (26) к “Шпаргалка: методы DOM”

  1. Irokez :

    забыли:
    node.getElementsByTagName(’tagname’)
    и
    document.getElementsByName(’name’)


  2. Баранов Андрей :

    спасибо, добавил


  3. Alexander Martynov :

    а какой-нибудь справочник не подскажете по функциям JavaScript
    я пользуюсь не часто – постоянно их забываю :(


  4. MT :

    STRONG внутри DT лишний. ;-)


  5. Yan :

    Не во всех браузерах работают, поэтому присвоить значение атрибуту можно непосредственно: obj.property = value.

    Через obj.property = value устанавливается не значание атрибута, а свойство. Иногда при изменении свойства меняется и значение атрибута( но не всегда). Другими словами атрибут!=свойство. В чем разница, хорошо написано в этой статье:
    http://xpoint.ru/know-how/JavaScript/Atributyi


  6. vs :

    MT – ты за dt{font-weight:bold;} ?


  7. MT :

    vs: конечно, это же чистое представление, семантика «заголовочного» элемента и так выражена применением DT.


  8. Andrush :

    пожалуйста,выложите кто-то справочник по свойствам и методам javascript)


  9. le`Mur :

    Достойно внимания. Спасибо.


  10. Петр Масляницын :

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


  11. Serg :

    Сайт забросили что-ли? Почему так редко обновляется?


  12. Mikael :

    Спасибо за инфу! Ждем обновлений сайта


  13. Оптимизатор :

    Да, сайт обновляется редко. Почаще это делайте.


  14. pgood :

    В Mozilla SeaMonkey есть такая утилита, как Инспектор DOM. Открыв в этой утилите любой HTML документ, можно посмотреть все методы и аттрибуты любого HTML элемента в документе.


  15. DjIn :

    есть такой удобный DOM Inspector


  16. Anton :

    Интересно


  17. Serch :

    берешь программку для редактирования и попер и все дела


  18. Dima :

    посмотрим


  19. 4ебур :

    Блин, когда уже getElementsByClassName допишут, чет рылся в кустарных решениях, слетают временами…


  20. Heeo :

    DOM Inspector намного удобнее..


  21. Plaintive :

    Классно сделано. Почти за душу цепляет, заставляет задуматься над собственным блогом. Хотя не совсем полностью тема раскрыта. Где про это посмотреть подробно? С лучшими пожеланиями, жалобный спамер :)
    Зы:Я чесно старался создать такой комент, который вам понравиться ;)


  22. dot :

    Я в JavaScript не очень.
    Интересно, а этот инспектор как встраивается в документ?
    И где хранится? Хотя бы в общих словах…


  23. Doctor :

    Спасибо, интересная статья, постараюсь воплотить на практике)


  24. tekfla :

    что есть “узел”?


  25. Dominator :

    Ща попробуем,спосибо


  26. novik14 :

    Благодарю за полезную имфу, блог толково.



22 queries 0.191 seconds.