What is the DOM and BOM in JavaScript? - javascript

What is the DOM and BOM in JavaScript? If someone could explain these in layman terms it would be great! I like to get a deeper understanding of these.

The BOM (Browser Object Model) consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using javascript.

DOM - Document Object Model
BOM - Browser Object Model
This article explains relationship between Javascript, DOM and BOM.

They're just different objects you're dealing with:
The DOM is the Document Object Model, which deals with the document, the HTML elements themselves, e.g. document and all traversal you would do in it, events, etc.
The BOM is the Browser Object Model, which deals with browser components aside from the document, like history, location, navigator and screen (as well as some others that vary by browser).

DOM means Document Object model..when the webpage is loaded the browser creates a document object model for the page..All the objects are arranged as tree structure...
BOM means Browser Object Model.window object is supported by all browsers it represents the window browser..All global JavaScript objects, functions, and variables automatically become members of the window object.

You can find more information about Javascript on Mozilla Foundation.
DOM
https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Introduction
BOM
https://developer.mozilla.org/en-US/docs/WebAPI/Browser

DOM :
The document object represents the whole html document. When html document is loaded in the browser, it becomes a document object.
BOM :
The window object represents a window in browser. An object of window is created automatically by the browser.

BOM means Browser Object Model . These are objects that you can use to manipulate the browser. they are navigator
navigator
screen
location
history
document
they are all children of the Window Object.
DOM is Document Object Model is part of the BOM and it helps you manipulate the content of the loaded page file. this include the HTML and CSS

DOM -> Document Object Model in JavaScript is the API to access the elements inside the document. It maps the entire Document into an hierarchy of parent and child tree. Each node can hold number of children element or can inherit to other parent element in some or the other way.
BOM -> Browser Object Model is a larger representation of everything provided by the browser including the current document, location, history, frames, and any other functionality the browser may expose to JavaScript. The Browser Object Model is not standardized and can change based on different browsers.

BOM stands for Browser Object Model. Unlike DOM, there is no standard defined for BOM, hence different browsers implement it in different ways. The collection of browser objects is collectively known as the Browser Object Model.
BOM main task is to manage browser windows and enable communication between the windows (i.e BOM deals with entire browser). Each HTML page which is loaded into a browser window becomes a Document object and a document object is an object in the BOM. You can say BOM is a superset of DOM. BOM has many objects, methods, and properties that are not part of the DOM structure.
while
DOM stands for Document Object Model. It is a standard defined by W3C (World Wide Web Consortium) and is specific to current HTML document (i.e DOM deals with document alone). DOM is a programming interface (API) for representing and interacting with HTML, XHTML and XML documents. It organizes the elements of the document in a tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.
DOM tree objects can be accessed and manipulated with the help of any programming language since it is cross-platform and language-independent. DOM is a subset of BOM, we can manipulate DOM tree with the help of JavaScript and jQuery for example.

What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
DOM Methods:
document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)
document.createElement(element)
document.removeChild(element)
Properties:
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode
More details
The Browser Object Model (BOM)
There are no official standards for the Browser Object Model (BOM).
Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM. It consists:
window
screen
location
history
navigator
popup alert
timing
cookies
More Details

Related

Are document.URL and location.href considered part of the DOM?

Simply put, are document.URL and location.href considered part of the DOM (Document Object Model)?
The "DOM" (Document Object Model) is the name for the entire standardised in-browser API - not just the part that's concerned with the actual HTML document (i.e. [window.]document) - it also includes the window, navigator, and location objects.
Granted, many parts of what's available to you in JavaScript are not part of the DOM, namely JavaScript's built-in library, such as String, Array, parseInt, and so on - and given that people generally learn both JavaScript and the DOM at the same time it's often very hard to tell them apart.
There are also pseudo-standard components that are not officially part of the DOM (until recently, or post-facto or defacto standardisation), such as XMLHttpRequest (originally a Windows/IE-only COM component exposed through Microsoft's proprietary ActiveXObject JScript API).
...but the DOM is not always available in JavaScript, you can use JavaScript as a shell-scripting language (e.g. Windows Script Host), or in server roles (Node.js) - there's no document and navigator element there, for example (though strictly speaking, there are "server-side DOMs" used for generating markup dynamically).
And conversely, you can have the DOM without JavaScript: the DOM is simply an API specification, there are implementations for Java, .NET, and others. The DOM was originally designed for both Tcl and JavaScript, for example.

javascript objects vs DOM objects

this is maybe a stupid question, but when I search for an answer I get jQuery results that talk about object arrays. I'm not there yet and want to understand how javascript itself is interacting with the DOM.
The DOM is an object tree created and used to render HTML if I'm not mistaken? And javascript has objects of the same name. For example: window, document, and elements with id... Are these the same objects?
I've read that javascript is part of HTML5, is this because the javascript objects are in fact the DOM objects and that the javascript language has been built up around the DOM? If so, how could it ever be possible to use javascript without the DOM? - For example, how could you ever make a desktop app? I use a program called brackets which is coded in javascript.
I think MDN has a great definition:
The Document Object Model (DOM) is an API for manipulating HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.
So the DOM is the specification of an API which can be used to select, manipulate and create new elements in a webpage, via an API.
That API is made visible (or exposed) to us, JavaScript developers, by allowing us to access JavaScript objects which implement particular parts of the DOM API.
The window element is one of those; as MDN says
The window object implements the Window interface, which in turn inherits from the AbstractView interface.
window is the JavaScript object window.
... it implements the DOM Window interface
... which, behind the scenes (we don't really care about this) inherits the AbstractView interface.
However, as well as implementing the DOM Window interface, window also exposes several JavaScript types and functions; which are not part of the Window interface, but exist on the window object.
All the types; window.String, window.Object, window.Array.
Math
...
As you specifically mentioned document; document is part of DOM Window interface, which you can see listed here.
In short, anything which involves selecting, manipulating and creating HTML elements will usually be part of the DOM.
HTML5 is the latest HTML standard which add new HTML elements such as <audio> and <video> tags. The DOM API has been updated to allow those new elements to be controlled by the API.
In turn, the JavaScript objects which implement those API's have to be updated.
JavaScript is a programming language. The DOM can be thought of as a framework or library which lets you control HTML from JavaScript.
JavaScript can be used completely standalone, without this library; which is exactly what happens in environments such as NodeJS and Brackets.
Take it this way:
You need an environment and a program.
The environment is the browser
The program has :
an interface( web page aka document)
code (javascript)
So you end up with 3 object models
DOM document object model
BOM browser object model
JOM javascript object model
The following graph may help:
http://javascript.info/tutorial/browser-environment

what exactly is the DOM? and what is an object as taken from the DOM?

I know a bit of Javascript and have recently started trying to tie it into HTML with the code academy course. in the following code:
function sayHello(name){
document.getElementById("result").innerHTML = 'Hello ' + name + '!';
}
The "document" in the above code is the DOM?
That would mean that getElements is a property (function) of document, and that innerHTML is a function of the getElements function.... right?
If I am seeing this correctly, how is it possible that DOM objects have javascript properties/functions?
Is document the DOM
Short answer
Yes, in the sense that it is the root of it.
Slightly longer answer
The Document Object Model (DOM) is what the browser exposes to the JavaScript runtime to allow JavaScript code to manipulate the page (its nodes and associated metadata). document is one part of the DOM.
How can the DOM have JavaScript properties
Short answer
They don't.
Slightly longer answer
The DOM is not actually managed in JavaScript (yet). It is typically managed by a separate engine altogether, written in a lower-level language like C++ or Rust (in the case of Mozilla's Servo project). The JavaScript runtime is also written in a lower-level language (again, C++ is most likely) and certain attributes of the DOM are exposed to the JavaScript runtime as if they were native JavaScript objects. The fact that they are not makes all kinds of interesting things possible ... and generally make it so that these DOM objects do not always behave as you would expect "real" JavaScript objects to behave (for example typeof querySelectorAll in IE 8 returns "object", not "function" as one would reasonably expect).
the Document Object Model is a model for interacting with HTML. They do not have "javascript properties" or "functions", javascript functions are executed on HTML elements which are found through the DOM.
getElementbyID
is a function in javascript, which retrieves a HTML element based on the DOM. Below is what the DOM looks like, and is how javascript will execute the aforementioned function.
http://www.w3schools.com/js/js_htmldom.asp
Close. document is the root element in the DOM, or Document Object Model. The DOM is the in-memory representation of the current document.
Calling document.getElementById() returns an HTML element, which has the property innerHTML. Writing to innerHTML tells the browser to render the string as that element's children.
DOM objects do not have javascript-dependent properties or attributes. Javascript is just one way of accessing DOM attributes.
DOM can be thought as an Interface (provide by layout engine like Gecko in Google Chrome and Firefox ) between the HTML and Any_Other_language
{like JavaScript} that want to use the html.
Say Tomorrow If a new language is born ( something similar to javaScript but a new language that has it's engine implemented in the browser like JavaScript has V8 engine in Google Chrome ) that want to play around with HTML, then just to access the HTML they don't have to write some hefty low level code( inside the engine for this language ) instead they can use DOM_Interface ( inside the browser ) to access and this makes it easy for them to concentrate on their logic.
DOM is Document Object Model ie your whole document is the hierarchy of objects with Window being the parent of all.
It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content.

window object model?

I know that there is something called the DOM in javascript. But why isnt there such a thing as a Window Object Model? Doesn't the DOM-tree look like this?:
window <- document <- html <- head //etc
Because the document object model describes how the document is built, and you are the one defining it.
The 'window' is purely a issue of presentation and has nothing to do with the document itself. You are not defining a window or anything about the window.
window object is in fact browser dependent part of presentation tier.
document object is built depending on the very content of a file (web page) a browser reads.
Window object is part of the DOM.
I suggest you the following articles:
The Document-Object Model, chapter 12 from Eloquent Javascript.
The Gecko DOM Reference from MDN.
W3C DOM Model Core (very technical stuff..).

Augment a DOM element

Is it possible to augment a DOM element by adding a new property to it as augmenting a normal JavaScript object? For example, can we add a new property of a button or an input, say a value that indicates when was the last time user click on it?
Yes. You can sometimes find it described as bad form. The obvious drawback is that in later versions of Web standards, the DOM element may have new properties added to it which will clash with your custom property, so if you do use this technique, choose a name that is unlikely to clash, e.g. incorporate your company name into it.
Another potential problem is that DOM objects in some browsers are not properly garbage collected. Instead they are reference counted. This means that if you create a system of circular references through custom properties, you may cause a memory leak.
For example, this may cause a memory leak, because there is a circular reference between the DOM and javascript objects:
var myJsObj = {};
var myDomElt = document.getElementById('myId');
myJsObj.domElt = myDomElt;
myDomElt.jsObj = myJsObj;
It is, however, safe to add a property that just holds a primitive value:
myDomElt.fullTitle = "My DOM Element";
Although the warning that the DOM standard may change is still important; what if HTML7 defines a fullTitle property on DOM elements? Your site will have unpredictable behaviour.
An alternative is to use the $.data feature of jQuery:
$(myDomElt).data('fullTitle', 'My Dom Element');
var retrieved = $(myDomElt).data('fullTitle');
It's possible but is a really bad idea. Daniel Earwicker's answer mentions some reasons why it's a bad idea. I'd add these:
DOM nodes are host objects and host objects can do what they like. Specifically, there is no requirement in the ECMAScript spec for host objects to allow this kind of extension, so browsers are not obliged to allow it. In particular, new browsers may choose not to, and existing code relying on it will break.
Not all host objects in existing browsers allow it. For example, text nodes and all ActiveX objects (such as XMLHttpRequest in older IE and XMLDOM objects, used for parsing XML) in IE do not, and failure behaviour varies from throwing errors to silent failure.
In IE, the ability to add properties can be switched off for a whole document, including all nodes within the document, with the line document.expando = false;. Thus if any of the code in your page includes this line, all code relying on adding properties to DOM nodes will fail.

Categories