Что является свойством объекта входящего в dom

В предыдущем примере getElementById – это метод, а innerHTML – свойство.

Метод getElementById

Самый частый способ получить доступ к элементу HTML – это использовать идентификатор id элемента.

В предыдущем примере метод getElementById использует id=»demo», чтобы найти нужный элемент.

Свойство innerHTML

Самый простой способ прочитать содержимое элемента — это воспользоваться свойством innerHTML.

Свойство innerHTML полезно тем, что оно позволяет прочитать или изменить содержимое любого элемента HTML, включая и .

Атрибуты и DOM-свойства

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/dom-attributes-and-properties.

При чтении HTML браузер генерирует DOM-модель. При этом большинство стандартных HTML-атрибутов становятся свойствами соответствующих объектов.

Например, если тег выглядит как , то у объекта будет свойство body.id = «page» .

Но это преобразование – не один-в-один. Бывают ситуации, когда атрибут имеет одно значение, а свойство – другое. Бывает и так, что атрибут есть, а свойства с таким названием не создаётся.

Если коротко – HTML-атрибуты и DOM-свойства обычно, но не всегда соответствуют друг другу, нужно понимать, что такое свойство и что такое атрибут, чтобы работать с ними правильно.

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в document.body новое свойство и запишем в него объект:

document.body.myData = < name: 'Пётр', familyName: 'Петрович' >; alert( document.body.myData.name ); // Пётр

Что является свойством объекта входящего в dom

Главная / Лекции / Программное обеспечение компьютерных сетей

Большинство свойств объектов соответствуют параметрам представляемых ими элементов html документа и имеют такие же имена, что и имена параметров.
В сценарии можно получить значение интересующих параметров элемента или наоборот изменить их установку.
Динамическое изменение свойств объектов и соответственно представляемых ими элементов html является основной концепцией DHTML.
Имена некоторых свойств объектов отличаются от имен параметров, но обычно достаточно близки к ним.
Пример: свойство className соответствует параметру class. Подобное несоответствие вызвано конфликтами с зарезервированными ключевыми словами основных языков сценария.
В DOM существует свойство, представляющее целое множество свойств объекта. По существу такие свойства являются наборами и к ним применима описанная выше технология работы с наборами. Свойство style объекта — одно из таких свойств. Оно содержит все свойства CSS, применимые к соответствующему элементу и которые можно задавать в параметре style тэга элемента.
Некоторые свойства не соответствуют никаким параметрам тэгов. Эти свойства представляют дополнительную информацию об элементе и обычно являются свойствами только для чтения.

Пример: свойство tagName — не соответствует никакому параметру и предоставляет информацию о типе тэга элемента.
sourceIndex — его значение — индекс элемента в наборе all.

• getAttribute() — получить значение параметра элемента без обращения к его свойствам
• setAttribute() — установить значение параметра элемента без обращения к его свойствам
• removeAttribute() — удалить параметр

Пример:
alert(«Значение параметра ALIGN равно: «+p1.getAttribute(‘align’));
p1.setAttribute(‘align’,’right’);
alert(«Значение параметра ALIGN равно: «+p1.getAttribute(‘align’));
p1.removeAttribute(‘align’);
(«Значение параметра ALIGN равно: «+p1.getAttribute(‘align’));

Фрагмент сценария использует все 3 метода для получения и установки значения параметра ALIGN объекта p1, а также для удаления этого параметра из тэга элемента, соответствующего объекту p1.
Если исходно объект p1 будет соответствовать абзацу с параметром ALIGN=center, то при выдаче первого сообщения в фрагменте будет указано CENTER, в следующем — right, в последнем — будет выведена пустая строка (значение не определено).
В соответствии с изменением значения параметра ALIGN будет изменяться и отображение абзаца в окне браузера. При удалении параметра, абзац по умолчанию сдвинется влево (left).
Иногда возникает необходимость показать в окне браузера часть документа, расположенного достаточно далеко от того места страницы, где в данный момент находится читатель. Обычно на страницу помещают ссылку, по которой читатель сможет осуществить переход.
Метод scrollIntoView() элемента позволяет выполнить процедуру перехода из сценария. Метод прокручивает содержимое окна браузера, чтобы указанный элемент оказался внизу или вверху окна.

Пример: var myH1=document.all.tags['H1']; if (myH1.length>0) myH1[2].scrollIntoView(true);

• innerHTML
• innerText
• outerHTML
• outerText

Пример: contents = p1.outerText

Этот оператор присвоит переменной строку, являющуюся текстом абзаца p1.
Абзац в документе определен следующим образом:

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

В результате выполнения оператора присваивания переменная contents будет содержать строку с текстом.
Если в операторе присваивания заменить свойство outerText на outerHTML, то переменная contents будет содержать полное содержание абзаца на языке html со всеми входящими тэгами, параметрами и их значениями.

4.4. Событийная модель.

В DOM DHTML с каждым элементом страницы можно связать определенные действия пользователя: щелчок мышью, нажатие клавиатуры и т.д. Эта технология основана на фундаментальном понятии события в ОС с графическим интерфейсом пользователя.
Каждое действие пользователя является причиной возникновения сообщения в ОС, которая представляется объектом в DOM DHTML.
Свойства объектов событий можно использовать во встраиваемых сценариях для получения информации о событиях. При возникновении любого события динамически создается свойство event объекта window, входящего в DOM и представляющего окно браузера. Это свойство и является объектом, соответствующим сгенерированному событию.

1. Происходит действие пользователя или возникает условие, которое возбуждает событие.
2. В тот час же корректируется объект event, чтобы отразить параметры возникшего события.
3. Событие генерируется — это и есть истинное сообщение о возникшем событии.
4. Вызов обработчика событий элемента источника, который выполняет определенные программистом действия и завершает свою работу.
5. Событие передается вверх по иерархии объектов (bubble up) и вызывается обработчик события объекта, являющегося родителем объекта источника события. Это всплытие вверх по иерархии объектов продолжается, пока не будет достигнут самый верх иерархии — объект window или обработчик события какого-либо объекта не аннулирует событие.
6. Выполняются заключительные действия по умолчанию, если такие определены, но при условии, что событие не было аннулировано.

 < html>< head>< title>Всплывание событий < /title> < /head> < body onclick="alert('Не надо щелкать!')">< h1 >Привет! < /h1>< p >Это простой пример, < b >ну очень простой < /b>пример. < /p> < /body>< /html>

В этом примере щелчки кнопкой мыши на всех элементах страницы обрабатываются централизованно обработчиком событий элемента body, который является родителем всех элементов страницы.
Если какому-нибудь элементу добавить собственный обработчик событий, то будут выполнены две процедуры: самого объекта и элемента родителя.
Объект event имеет свойство cancelBubble, которое позволяет аннулировать событие, если установить его значение равным true. После этого соответствующее событие не существует и обработчики этого события для всех расположенных выше элементов не вызываются.

Аннулирование события

Привет!
Это простой пример, ну очень простой пример.

4.5. Объект event.

Объект event создается автоматически всякий раз, когда возникает какое-либо событие. Этот объект не зависит от используемого языка сценария. Обращение к объекту event для получения достоверной информации о событии является предпочтительным способом.
Каждое событие характеризуется параметрами, которые передаются в сценарии через свойства объекта event.
Существуют параметры, общие для всех типов событий (например, координаты курсора мыши в окне браузера) и специфические для определенного события (код нажатой клавиши для событий клавиатуры).
Свойства объекта event, как и сам он являются динамическими и создаются в зависимости от типа произошедшего события.
Свойство srcElement определяет элемент документа, явившийся источником события.
cancelBubble — аннулирует событие.
returnValue — возвращает true/false после завершения выполнения процедуры обработки события. При передаче события вверх по иерархии, значение этого свойства можно использовать для альтернативной обработки события.

4.6. DOM в MS IE5.0.

• перемещать часть структуры документа в другое место, не разрушая и не создавая ее заново
• создавать новые элементы и присоединять их к структуре документа в любом его месте
• организовать и манипулировать новыми или существующими ветвями структуры фрагмента документа для помещения объектов в структурное дерево документа

< table > < tr>< td>ячейка 1 первого ряда < /td>< td>ячейка 2 первого ряда < /td> < /tr> < tr>< td>ячейка 1 второго ряда < /td>< td>ячейка 2 второго ряда < /td> < /tr> < tr style="background-color:#cfcfcf">< td>Этот ряд перемещаем < /td>< td>Этот ряд перемещаем < /td> < /tr> < /table>function fncInterchange(row)

Задана таблица из 3-х рядов. Необходимо переместить последний ряд на место предшествующего. Сценарий ориентирован на DOM 4.0. Переменная rowMove сохраняет индекс перемещаемого ряда, передаваемый в качестве индекса. Переменные rowMove_cell1 и rowMove_cell2 хранят содержимое двух ячеек перемещаемого ряда. После этих действий ряд удаляется методом rowDelete объекта table.
В таблицу вставляется новый ряд перед рядом, предшествующим удаленному (номер строки в rowMove уменьшается на 1). Последние операторы функции добавляют две ячейки в новый ряд и помещают в них содержимое соответствующих ячеек удаленного ряда.
В объектной модели документа IE 5.0 функция изменяется следующим образом:

function fncInterchange(row)
Методом swapNode можно просто поменять местами узлы в структуре документа.

Если у вас есть программы, предложения или замечания — пишите: chemisk@mail.ru

Атрибуты и свойства

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.

Например, для такого тега у DOM-объекта будет такое свойство body.id=»page» .

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

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

document.body.myData = < name: 'Caesar', title: 'Imperator' >; alert(document.body.myData.title); // Imperator

Мы можем добавить и метод:

document.body.sayTagName = function() < alert(this.tagName); >; document.body.sayTagName(); // BODY (значением "this" в этом методе будет document.body)

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Element.prototype.sayHi = function() < alert(`Hello, I'm $`); >; document.documentElement.sayHi(); // Hello, I'm HTML document.body.sayHi(); // Hello, I'm BODY

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

• Им можно присвоить любое значение.
• Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?

Конечно. Все атрибуты доступны с помощью следующих методов:

• elem.hasAttribute(name) – проверяет наличие атрибута.
• elem.getAttribute(name) – получает значение атрибута.
• elem.setAttribute(name, value) – устанавливает значение атрибута.
• elem.removeAttribute(name) – удаляет атрибут.

Эти методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

• Их имена регистронезависимы ( id то же самое, что и ID ).
• Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

1. getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

• Изменение атрибута value обновило свойство.
• Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

 checkbox  

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Hello
  

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

link  

Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

 /* стили зависят от пользовательского атрибута "order-state" */ .order[order-state="new"] < color: green; >.order[order-state="pending"] < color: blue; >.order[order-state="canceled"] 
A new order.
 
A pending order.
 
A canceled order.
 

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:

// немного проще, чем удаление старого/добавление нового класса div.setAttribute('order-state', 'canceled');

Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.

Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

Вот переписанный пример «состояния заказа»:

 .order[data-order-state="new"] < color: green; >.order[data-order-state="pending"] < color: blue; >.order[data-order-state="canceled"] 
A new order.
  

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

• Атрибуты – это то, что написано в HTML.
• Свойства – это то, что находится в DOM-объектах.

Методы для работы с атрибутами:

• elem.hasAttribute(name) – проверить на наличие.
• elem.getAttribute(name) – получить значение.
• elem.setAttribute(name, value) – установить значение.
• elem.removeAttribute(name) – удалить атрибут.
• elem.attributes – это коллекция всех атрибутов.

В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:

• Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
• Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

Задачи

Получите атрибут

важность: 5

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

   
Choose the genre