WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit counter

Программирование на JavaScript, DOM

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

Дополнительные материалы

DOM объект - элемент

Обновлено: 07.06.2018 09:08

Объект DOM - Элемент

Этот объект порождается каждым HTML тэгом документа, таким образос каждый элемент (узел) дерева DOM  наследует все его свойства и методы.

Далее имеется в виду, что node (узел в дереве объектов DOM) может быть типа: element (узел типа: HTML элемент ), text node (узел типа: текст), attribute node (узел типа: атрибут элемента).

Свойства и методы

Свойство / Метод Описание
accessKey Задаёт или возвращает accesskey атрибут элемента
addEventListener() Добавляет к элементу обработчик событий
appendChild() Добавляет новый дочерний узел к эдементу дерева DOM , после всех существующих дочерних элементов
attributes Возвращает список атрибутов элемента
blur() Уводит фокус с элемента
childElementCount Возвращает количество дочерних элементов
childNodes Возвращает коллекцию дочерних элементов, включая тексты(text nodes) и комментарии
children Возвращает коллекцию дочерних элементов, не включая тексты(text nodes) и комментарии
classList Возвращает список классов элемента
className Задаёт или возвращает значение атрибута class 
click() Симулирует событие mouse-click для элемента
clientHeight Возвращает высоту элемента, включая отступы
clientLeft Возвращает ширину левой границы элемента
clientTop Возвращает ширину верхней границы элемента
clientWidth Возвращает ширину элемента, включая отступы
cloneNode() Клонирует элемент
compareDocumentPosition() Сравнивает позицию элемента с позицией другого
contains() Возвращает true , если данный узел - родитель узла - аргумента (содержит его), иначе - e false
contentEditable Делает элемент релактируемым
dir Задаёт иои возвращает значение атрибута dir
firstChild Возврашает первый дочерний узел элемента
firstElementChild Возврашает первый дочерний элемент
focus() Перемщает фокус на элемент
getAttribute() Возвращает указанное значение атрибута узла элемента
getAttributeNode() Возвращает указанный узел атрибута
getElementsByClassName() Возвращает коллекцию всех дочерних элементов с указанным именем класса
getElementsByTagName() Возвращает коллекцию всех дочерних элементов с указанным именем тега
getFeature()  
hasAttribute() Возвращает true, если элемент имеет указанный атрибут, иначе false
hasAttributes() Возвращает true, если элемент имеет какие-либо атрибуты, иначе false
hasChildNodes() Возвращает true, если элемент имеет какие-либо дочерние узлы, иначе false
id Устанавливает или возвращает значение атрибута id элемента
innerHTML Устанавливает или возвращает содержимое элемента
insertBefore() Вставляет новый дочерний узел перед указанным, существующим дочерним узлом
isContentEditable Возвращает true, если содержимое элемента редактируемое, иначе false
isDefaultNamespace() Возвращает true, если указанное namespaceURI является значением по умолчанию, иначе false
isEqualNode() Проверяет, идентичны ли два элемента
isSameNode()  
isSupported() Возвращает true, если указанная функция поддерживается элементом
lang Устанавливает или возвращает значение атрибута lang элемента
lastChild Возвращает последний дочерний узел элемента
lastElementChild Возвращает последний дочерний элемент элемента
namespaceURI Возвращает URI пространства имен элемента
nextSibling Возвращает следующий узел на том же уровне дерева узлов
nextElementSibling Возвращает следующий элемент на том же уровне дерева узлов
nodeName Возвращает имя узла
nodeType Возвращает тип узла узла
nodeValue Устанавливает или возвращает значение узла
normalize() Соединяет смежные текстовые узлы и удаляет пустые текстовые узлы в элементе
offsetHeight Возвращает высоту элемента, включая внутренние отступы, границу и полосу прокрутки
offsetWidth Возвращает ширину элемента, включая прописку, границу и полосу прокрутки
offsetLeft Возвращает позицию горизонтального смещения элемента
offsetParent Возвращает смещение родительского элемента
offsetTop Возвращает координату вертикального смещения элемента
ownerDocument Возвращает корневой элемент (объект document) для элемента
parentNode Возвращает родительский узел элемента
parentElement Возвращает родительский узел типа элемент для элемента
previousSibling Returns the previous node at the same node tree level
previousElementSibling Возвращает предыдущий узел на том же уровне дерева узлов
querySelector() Возвращает первый дочерний элемент, который соответствует указанному CSS-селектору  элемента
querySelectorAll() Возвращает все дочерние элементы, которые соответствуют указанному CSS-селектору  элемента
removeAttribute() Удаляет указанный атрибут из элемента
removeAttributeNode() Удаляет указанный узел атрибута и возвращает удаленный узел
removeChild() Удаляет дочерний узел из элемента
replaceChild() Заменяет дочерний узел в элементе
removeEventListener() Удаляет обработчик событий, который был присоединен с помощью метода addEventListener ()
scrollHeight Возвращает всю высоту элемента, включая отступы
scrollLeft Устанавливает или возвращает количество пикселей, на которое содержимое элемента прокручивается по горизонтали
scrollTop Устанавливает или возвращает количество пикселей, на которое элемент содержимого прокручивается по вертикали
scrollWidth Возвращает всю ширину элемента, включая отступы
setAttribute() Устанавливает или изменяет указанный атрибут на указанное значение
setAttributeNode() Устанавливает или изменяет указанный узел атрибута
style Устанавливает или возвращает значение атрибута style элемента
tabIndex Устанавливает или возвращает значение атрибута tabindex элемента
tagName Возвращает имя тега элемента
textContent Устанавливает или возвращает текстовое содержимое узла и его потомков
title Устанавливает или возвращает значение атрибута title элемента
toString() Преобразует элемент в строку
   
nodelist.item() Возвращает узел по указанному индексу в NodeList
nodelist.length Возвращает количество узлов в NodeList

 

Пример:

(распечатать все свойства объекта ELEMENT )

<html>

<head>

<script>

function myFunction() {

var outString = "<h3>All element properties:</h3>"

myObj = document.getElementById("demo");

// loop - all obbject properties

outString += "<table width='30%' border='1'><tr><th>N</th><th>Свойство </th><th>Значение</th></tr>";

i = 0;

for(let key in myObj){

outString += "<tr> <td>" + i++ + "</td>" + "<td>" + key + "</td>" + "<td>" + myObj[key] + "</td></tr>";

}

outString += "</table>";

document.getElementById("demo").innerHTML = outString;

}

</script>

</head>

<body>

<button onclick="myFunction()">Получить свойства</button>

<br>

<DIV id="demo"></DIV>

<br>

<button onclick="document.getElementById('demo').innerHTML = ''">Очистить DIV</button>

</body>

</html>

 

Основные ипы узлов DOM (node type)

 

Константа - тип узла Значение Описание
Node.ELEMENT_NODE 1 Узел типа element 
Node.TEXT_NODE 3 Узел типа текст
Node.COMMENT_NODE 8 Узел типа comment
Node.DOCUMENT_NODE 9 Узел типа: document
Node.DOCUMENT_TYPE_NODE 10 Узел типа  DocumentType 
 <!DOCTYPE html> для  HTML5 документов

 

 

 

Похожие статьи