Why DOM has object oriented structure when JS is not?

May 28, 2022

In DOM (JS rappresentation of HTML parsed file) we have this structure(where < is for "inherited"):

   Object(JS object) < Node < Element < HTMLElment < HTMLBodyElement, HTMLDivElement, etc..
   Object(JS object) < Node < DOcument < HTMLDocument
   ...

All these nodes are called interfaces (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) in every documentation I have checked.

I don’t understand how is this possible in JS (not object-oriented, no interfaces, etc)? I have a background in C++, so maybe I am confusing DOM "object-oriented" structure with a real one. Any clarification?

>Solution :

I don’t understand how is this possible in JS (not object-oriented, no interfaces, etc)?

There’s no problem modelling the DOM’s structure in JavaScript. JavaScript is very object-oriented, including supporting inheritance. JavaScript uses prototypical inheritance. Example:

// Create an object with a method
const base = {
    baseMethod() {
        console.log("baseMethod");
    }
};

// Create an object using `base` as its prototype,
// perhaps add a property to it
const sub = Object.assign(Object.create(base), {
    subMethod() {
        console.log("subMethod");
    }
});

// Sub inherits `base`'s properties
sub.baseMethod(); // "baseMethod"

// And has its own
sub.subMethod();  // "subMethod"

JavaScript also overlays something on top of prototypical inheritance that seems rather class-like (it isn’t, it’s still prototypical, but it’s more comfortable for people coming from class-based languages). For instance, here’s a three-layer inheritance model (rather like Node < Element < HTMLElement) using class syntax (but again, we could do all of this without class syntax, too):

class Base {
    baseMethod() {
        console.log("baseMethod");
    }
}

class Sub extends Base {
    subMethod() {
        console.log("subMethod");
    }
}

class SubSub extends Sub {
    subSubMethod() {
        console.log("subSubMethod");
    }
}

const x = new SubSub();
x.baseMethod();                     // "baseMethod"
x.subMethod();                      // "subMethod"
x.subSubMethod();                   // "subSubMethod"
console.log(x instanceof Base);     // true
console.log(x instanceof Sub);      // true
console.log(x instanceof SubSub);   // true
console.log(x instanceof Date);     // false (just to show it's not always true ;-) )

(The Object base of that structure is implicit.)