0

I am a new beginner in web developing. I have some trouble to understand the relationship between DOM Interfaces and Objects (Object-oriented programming concept). Could someone please help me to get a definitive answer for the questions bellow?

1) Does the Node Interface in Javascript represent a Class with properties and methods as described in https://developer.mozilla.org/en-US/docs/Web/API/Node ?

2) If I am not mistaken, all DOM Interfaces such as Document and Elements are also Nodes ---> Document Nodes, Element Nodes, Text Nodes....Would that means all of those DOM Interfaces are children Classes of the Node Class? and all of the HTML elements and attributes such as (p, div, a, img,...) are both Node Objects and DOM Interface Objects - which they belong to?

Update #1:

I am trying to learn web programing from site like Codecademy, W3Schools and many other online sources. However, even with some understanding about Javascript and Object-oriented Programing, I have problem understanding and connecting the dots on how DOM Interfaces components work with each other in terms of Object-oriented Programing such as Classes, Objects, Properties and Methods... I could not find a source to actually bridge the gap between learning the Javascript Programing Language and actually using the language and its Object-oriented methodology in real life (through DOM Interfaces ofcourse).

Improve this question
3
  • 3
    First thing to understand: those things are part of the native environment exposed to JavaScript by web browsers. They are not part of JavaScript the programming language. Commented Oct 24, 2014 at 22:20
  • when you use Inspect Element in chrome, the "Properties" tab on the far-right will show you the chain of instances, from own to specific tagName constructor, to HTMLElement, to Element, to Node to EventTarget to Object... Commented Oct 24, 2014 at 22:36
  • I'm thinking that your question is motivated by a problem you're actually trying to solve and some assumptions about how object hierarchies work in javascript. Because I'm not sure your assumptions are right, I'd suggest you describe the actual problem you want to solve so we can make sure we're guiding you the right direction. Adding methods to any of the built-in DOM object prototypes is rarely considered a good practice. Commented Oct 24, 2014 at 23:27

1 Answer 1

Reset to default
1

For 1, yes, but get your terminology right. Classes are objects in javascript, they're just called classes, not "object classes".

For 2, yes as well, but they don't implement the NODE interface directly. All the different types of nodes inherit HTMLElement, which from mdn, inherits the NODE interface. You can just look up the inheritence chain: 

document.createElement('p').__proto__.__proto__ == HTMLElement.prototype
HTMLElement.prototype.__proto__ == Element.prototype
Element.prototype.__proto__ == Node.prototype
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you for your response, I have edited the terminology as you said. In your answer, the part 'but they don't implement the NODE interface directly' means that whenever I implement a Node method on the 'p' Element Node then the method actually traverses upstream from HTMLElement Interface (Class) -> Element Interface(Class) -> Node Interface (Class) to 'activate' the said method's codes in the Node Interface (Class) on my 'p'. Correct?
No, if you add a method to a p object it doesn't traverse upwards, only downwards. But if you implement it on node, it will propagate to p. This is what object orientated programming is all about. Have a look at javascript's prototype inheritence if you're interested.
I am sorry for my bad wording. What i meant by 'implement' is not to 'add' a new method to 'p' but to actually use built-in Node method such as ".appendChild()" on 'p'. In this case, the ".appendChild()" would traverse upward right?
Yes, if javascript doesn't find the method on the object, it will go up the prototype chain until Object.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.