Document Object Model - The eternal confusion

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 HTML elements as objects


https://www.w3schools.com/js/js_htmldom.asp


whatever this guy has written was very good, and for sure I have some understanding regarding DOM

so I think these are objects (of DOM) in a form of some algorithm or tree that browsers use to render visible part what we see in browsers) →

The basic elements of an HTML page are: The below list is not exhaustive though.

  • A text header, denoted using the <h1> , <h2> , <h3> , <h4> , <h5> , <h6> tags.
  • A paragraph, denoted using the <p> tag.
  • A horizontal ruler, denoted using the <hr> tag.
  • A link, denoted using the <a> (anchor) tag.
  • A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
  • An image, denoted using the <img> tag
  • A divider, denoted using the <div> tag
  • A text span, denoted using the <span> tag

(ullllltra simplified.)

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.

2 Likes

What are objects?
Are they HTML Elements?

‘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).

1 Like

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.

1 Like

What you are describing is the <object> HTML tag, which itself would be an Element Object within the DOM, but that wasn’t the OP’s question.

5 Likes

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.

1 Like

I have a related question → see, for example
https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle

or may be codepen.io

There are two parts:

  1. syntax highlight
  2. displaying content output in browser

#2 is associated with DOM?

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.

1 Like

Ok. so in case of codepen and w3s what is parsing the HTML+CSS+JS?

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:

<textarea><html></textarea>

what does this code ACTUALLY look like?

<div class="CodeMirror-code" style="">
  <pre class=" CodeMirror-line ">
    <span style="padding-right: 0.1px;">
      <span class="cm-m-xml cm-tag cm-bracket">&lt;</span>
      <span class="cm-m-xml cm-tag">html</span>
      <span class="cm-m-xml cm-tag cm-bracket">&gt;</span>
    </span>
  </pre>
</div>

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.

1 Like

Backend engines are also PHP engines?

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'>&lt;</span><span class='elemname'>html</span><span class='bracket'>&gt;</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.

1 Like

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.

Look at the example code and play with
https://www.php.net/manual/en/function.highlight-string.php

It wraps characters in <span> tags that have inline style color attributes.

Perhaps not the best approach and almost certainly other highlighters differ somewhat, but it should help you see a working technique.

1 Like