Как взаимодействует объект, например, HTMLParagraphElement с объектом HTMLElement?

Question

[Димон]

Привет.
Рассмотрим DOM уровня 2. У меня есть мой документ html. В нем есть элемент параграф с какими-то атрибутами. Когда браузер анализирует документ и строит DOM в памяти, то выстраивается схема вложенности всех объектов, полученных из элементов моего документа html. Если взять мой параграф, то он становится объектом HTMLParagraphElement, в котором есть только ОДНО УНИКАЛЬНОЕ для параграфа свойство - align. Прототипом объекта HTMLParagraphElement становится объект HTMLElement, в который записываются ВСЕ ОБЩИЕ для параграфа свойства - id, style, className... krook.org/jsdom/HTMLParagraphElement.html
Иерархия прототипов DOM приведена на рисунке:

Насколько я понимаю смысл прототипов в том, чтобы НЕ ПОВТОРЯТЬ ПОВТОРЯЮЩИЕСЯ свойства и методы (экономия памяти), а заглянуть в прототип и там прочитать свойство или метод.
НЕПОНЯТНЫЙ МОМЕНТ: элемент HTMLElement один, а элементов HTMLParagraphElement в документе может быть много. И у каждого параграфа, например, свой атрибут class. Свойство className должно быть у каждого параграфа СВОЁ, а не одно на всех. То есть, по-идее у каждого объекта HTMLParagraphElement должно быть не только свойство align, но и className, id, style... По идее, наследовать можно только те свойства (и методы), которые ОДИНАКОВЫ для всех наследующих объектов.

Answer 1

[Димон]

1. Во цепи объектов прототипов лежат дефолтные свойства и методы. По цепи прототипов эти свойства и методы передаются ("стекают вниз") объектам, которые из элементов документа создаются в процессе анализа страницы (объекты p, div....).
2. В объекты p, div.... запихиваются свойства, которые создаются из одноименных атрибутов при анализе документа (надо правило верблюжьей нотации соблюдать при обращении). Эти свойства перекрывают некоторые дефолтные свойства, идущие по цепи прототипов. Это и определяет внешний вид документа.
3. На самом деле, во всех объектах-прототипах сидят не "просто свойства" (типа name:1), а геттеры и сеттеры (ФУНКЦИИ) ,которые имитируют свойство и позволяют "РАССЧИТАТЬ СВОЙСТВО НА ЛЕТУ" при, например, обращении к нему (или при изменении свойства) в коде. А ДЛЯ ФУНКЦИЙ ВАЖЕН КОНТЕКСТ ИСПОЛНЕНИЯ - ИЗНУТРИ КАКОГО ОБЪЕКТА ФУНКЦИЯ ЧЕРЕЗ ТОЧКУ ВЫЗЫВАЕТСЯ, так как в функциях куча ключевых слов this может быть. Поэтому попытка вызвать "типа свойство", например,

document.getElementById("red").__proto__.parentNode;

, а на самом деле это это вызов функции-геттера приведет к тому, что функция-геттер parentNode вызывается изнутри не того объекта, изнутри которого через точку она должна вызываться (контекст не тот). Поэтому выдаст illegal invocation.

Answer 2

[Andrew Kondratiuk]

Если я верно понял вопрос, вы хотите понять, как именно сохраняются измененные значения свойств для определенного набора екземпляров елементов одного класса. Если так, то, если простыми словами, это происходит следующим образом: если при чтении свойства нету в самого объекта оно ищется в прототипе родителя и так до самого верха иерархии пока не найдется и, соостветсвенно, либо значение либо undefined. Если вы меняете значение (присваиваете новое, измененное) екземпляру (не прототипу), тогда создается поле с указанным значением (на уровне екземпляра) и уже в следующий раз вы получите при чтении именно его (установленное вами и именно для этого екземпляра). Надеюсь, не сильно запутано ответил.

Comments

[Димон]

я разобрался теперь - нашел в developer tools вкладку elements --> properties. оказалось, что если написать в документе элемент, например, , то при анализе и построении дерева разбора в памяти создается ОДНОИМЕННЫЙ объект Р, куда все атрибуты в свойства и переписываются. Прототипом этого объекта Р является HTMLParagraphElement. Прототипом HTMLParagraphElement является объект HTMLElement. Прототипом HTMLElement является объект Еlement. Прототипом Element является объект EventTarget. А прототипом объекта EventTarget является конечный объект любой цепи прототипов - объект Object.

[Димон]

спасибо за ответ