What's the difference between a node and an object, in the DOM?-CodePudding

When describing DOM trees, most sources I found online describe the DOM tree as consisting of nodes.

I found this incredibly confusing, as I thought the DOM tree was actually just a tree of JS objects built into the Browser Runtime Environment.

My questions are as follows:

Is the DOM tree really just consisting of ECMAScript objects?
How are these objects connected to create the tree? E.g., is there a children property on each?
Is Node an actual object, to which other objects are prototype linked? For example, an element in a HTML document is represented in the DOM tree as an instance of the HTMLElement constructor function (const foo = new HTMLElement()), which in turn is [[prototype]]-linked to Element.prototype, which in turn is [[prototype]]-linked to Node.protoype?

CodePudding user response：

Is the DOM tree really just consisting of ECMAScript objects?

No. The Document Object Model describes generic objects, specifying how their attributes and methods model a document. It does not say anything about how those objects are constructed or what language they are implemented in. You'll find DOM implementations written in C , Rust, Java, JavaScript, and probably more.

How are these objects connected to create the tree? E.g., is there a children property on each?

Not all objects in the DOM are tree nodes, but for those that are, yes: childNodes and parentNode form a tree. The nodeName, nodeValue and attributes model the contents of the tree.

Is Node an actual object, to which other objects are prototype linked?

Yes, the ECMAScript bindings for the DOM (via WebIDL) stipulate that nodes are represented as ECMAScript objects with a prototype inheritance chain for interfaces like Node.

I thought the DOM tree was actually just a tree of JS objects built into the Browser Runtime Environment.

They might be native JS objects, but most commonly they are host objects that wrap/proxy the builtin DOM implementation of the browser. The wrappers are often constructed on the spot by getters only when they are accessed, not already created when the page is loaded.