The DOM: What's the Document Object Model?

Показать описание

The DOM: What's the Document Object Model?

The DOM is the browser's internal, progrematic representation of a webpage. Languages like javascript allow you to modify the DOM, and thus the website without editing the HTML of the page.

Technically, the DOM is an API (application programming interface). There are many types of APIs, but this particular API interacts with XML and HTML documents. It's in charge of how those documents are accessed and manipulated.

Really, you can do a lot with the dom, and if you're already scripting in JS and jQuery, you're already doing it.

You can insert new things, elements, or alter style or content for elements that already exist.

This can be done with pure javascript, like:

You can also use libraries like jQuery to simplify, standardize and automate manipulating the DOM, like:
$('#box2').append("This will be added to box2!")

Рекомендации по теме

Комментарии

I'm a starting.. student web developer, I googled "what is DOM" and read and read tutorials.. and just didint get that very simple consept, and you basically brought me out the darkness and said it in 15 seconds, i had a big moment, thanks!!! :)

urmask

The best description of what the DOM is that I have heard.

namronmanelok

This clearly clarifies what I have been struggling to understand for ages. Thank you so much.

jacquitratongamanahaja

I thought hashtags( # ) select the ID and dots( . ) select the class.

chrisprass

Thanks! I thought that DOM was a completely different thing complex to understand, BOOM there it is!

LesterShipMirOleg

you switched #(id) with .(class)
but still a valid jquery example.

warkentien

This is some great stuff!
Just a quick point.
The 'hash' gives reference to an ID, not a class.
Small oversight I'm sure, keep up the great work!

simoncess

Thank you that cleared up a lot of confusions I had about the dom

tazzadk

Pure vanilla JS, this was a dope one lol

rupakacharya

let me try is I understood, DOM is a little program built-in browsers to construct a tree model of my HTML and let me modify each element by javascript? i'm not native english so i'm trying to understand and sorry for my english

reinidvalarino

So basically when I click on inspect element on a website and I start modifying the code that pops up . That’s the Dom’s code I’m experimenting with?

Codeinemadethis