Hello everyone, I have browsed all of the below resources, and I more confused.
Has anyone in his yesteryears faced the same issue of understanding what DOM is? If yes, Can they please share their insight. If I ask someone who really understands DOM how can he explain it in simple language to someone like me who is getting confused.
Although this part from W3Schools makes a certain sense to me →
the DOM is a representation of a webpage as a set of Objects, all ‘nested’ inside each other (inside the overall, ‘document’, object)
Strictly speaking they’re not nested, but linked. They are a Tree model; every element (other than the root, document) has a Parent, and may have one or more Children.
‘What are objects’ is a Javascript question, rather than a DOM question.
Most times, when you retrieve a DOM Element with Javascript, it is represented as an object of the Element Class (or something that implements the Element class, anyway).
Not quite. The DOM can be applied to any element based document - so XML can be represented by the DOM; it doesn’t contain an HTML Element object;
Which is somewhat of the point. document is a special object that represents the document as a whole; it is an instance of the Document class, rather than the Element class, and contains methods and properties related to the document as a whole.
You can differentiate these - you can invoke document.getElementsByTagName('html') and get a collection that contains a single Element object. That Element object represents the <html> node within the element tree.
You will likely benefit from learning about Object Oriented Programming (OOP). At least then you will understand the concept of objects. One way of defining objects is that they are instances of classes but for this context it helps to understand that objects are a very general concept that can apply to most anything.
See Document Object Model Core. That is the actual specification of the DOM, written not for beginners like you but for experienced programmers that are developing DOM parsers and processors such as what exist in browsers for use by JavaScript. Note that the DOM specification defines it as interfaces and classes. For beginners, interfaces are classes and are more of C++ things.
JavaScript is not the best implementation of OOP and I do not know what book to recommend to read to learn about OOP in JavaScript but I hope you are able to learn about OOP.
Object models (that could alternatively be called an API) exist for many things, such as word processing documents and spreadsheets, such as the following.
I’m afraid i don’t understand your question. Correct me if i’m answering the wrong thing.
The DOM itself has no direct bearing on the display of the output, that’s the HTML being parsed by the browser.
What the DOM can be used to do is to manipulate that HTML, which would cascade a change in the display.
so there’s two different ‘sides’ to fiddle sites like these.
The first side is the ‘input’ side. You put your code there. You type something in the text box, and when you do, javascript kicks off a parser, which parses the text box and does syntax highlighting by inserting a bunch of HTML around what you’ve typed.
Take this line from the W3S example’s input box:
<html>
you see a colorized HTML tag. You’ve typed 6 characters inside a textbox. You may think this looks something like:
The parser has taken the input by reading it from the DOM, run it through its code, and used the DOM to replace its content with the formatted result.
The OUTPUT side of a fiddle site is usually as simple as taking the non-parsed text from your code blocks, using the DOM to create a blank page in an iframe, and then inserting your code blocks into it. Some may use a backend engine to render the page instead.
If you can would it be possible for you to throw more insight here. Is there any thing I can search? some keyword with pictorial demonstration that can help me understand this.
You type: <html>
Javascript starts.
Javascript says “DOM, give me the contents of text box.”
DOM says: “The contents of the text box are: <html>”
Javascript parses this string, replaces the brackets with colorized brackets because its the start and end of a tag, recognizes a bare string immediately after the tag opening bracket, and colors that as the element name.
Javascript says “DOM, replace the contents of the text box with <span class='bracket'><</span><span class='elemname'>html</span><span class='bracket'>></span>”
DOM replaces the text box contents with that HTML.
Browser sees a change has happened to the HTML, rerenders the box to reflect the change.
You see colorized text.
I understand, and do not understand. with time these confusions and lack of clear understanding will disappear. Thanks for being patient in the whole discussions and with few questions that may be insensible to you sometimes.