Skip to main content

DOCUMENT OBJECT MODEL


DOCUMENT OBJECT MODEL

 A web page is a document which can be either displayed in the browser window or as the HTML source. When a web page is loaded, the browser creates a Document Object Model of the page and this can be modified with the scripting language like JavaScript. The  DOM standard is separated into 3 different parts:
  1. Core DOM -  standard model for all document types
  2. XML DOM - standard model for XML documents
  3.  HTML DOM - standard model for HTML documents
TREE STRUCTURE
The DOM consists of a tree structure of nested nodes, which is often called as the DOM tree. Like an ancestral family tree, which consists of parents, children, and siblings. The nodes in the DOM are also referred  as parents, children, and siblings, depending on their relation to other nodes. DOM is a way to represent the webpage in the structured hierarchical way so that it will become easier for programmers and users to glide through the document. With DOM, we can easily access and manipulate tags, IDs, classes, Attributes or Elements using commands or methods provided by Document object.Mainly tree structure makes the search process in a faster way.

 The html element node is the parent node. head and body elements are siblings, children of html. 

OBJECT MODEL
 Documents are modelled using objects, and the model includes not only the structure of a document but also the behaviour of a document and the objects of which it is composed of like tag elements with attributes in HTML.Generally object Model use in-memory method that means it store data in RAM and process the data.


ADVANTAGES OF DOM

By manipulating the DOM, you have infinite possibilities. You can create applications that update the data of the page without needing a refresh. Also, you can create applications that are customizable by the user and then change the layout of the page without a refresh. You can drag, move, and delete elements.

MOSTLY USED DOM METHODS

getElementById()

This method returns the element that contains the name id passed. As we know, id’s should be unique, so it’s a very helpful method to get only the element you want.

getElementsByClassName()

This method returns an HTMLCollection of all those elements containing the specific name class passed.

getElementsByTagName()

This works the same way as those methods above: it also returns an HTMLCollection, but this time with a single difference: it returns all those elements with the tag name passed.


Comments

Post a Comment

Popular posts from this blog

NULL VS UNDEFINED

NULL VS UNDEFINED        Undefined means a variable has been declared but has not yet been assigned a value. On the other hand, null is an assignment value. It can be assigned to a variable as a representation of no value. Also, undefined and null both are two different data types: undefined is a type itself (undefined) null is an object. var a;//undefined var b = null; var c=5; var d = a+c // NaN var e = b+c  //5   If  I am trying to do any mathematical  operation with null and number it gives me some  number as output,  instead of null if i am doing it with undefined and number the result is NaN null !== 0;    undefined !==0;
Post a Comment
Read more

AUTH and CORS

   CORS 1. CORS is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own. 2. An example of a cross-origin request: the front-end JavaScript code served from https://domain-a.com uses XMLHttpRequest to make a request for https://domain-b.com/data.json. 3. For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request resources from the same origin the application was loaded from unless the response from other origins includes the right CORS headers. 4. The CORS mechanism supports secure cross-origin requests and data transfers between bro...
Post a Comment
Read more

JAVASCRIPT OBJECT & ITS INTERNAL REPRESENTATION

OBJECT Objects are same in all programming languages i.e they represent real-world things that we want to represent inside our programs with characteristics/properties and methods. In JavaScript Objects are kind of String/Number   Index Array represented inside curly brackets Var obj = { 1: “NAME”, "Maths" :100 } KEY VALUE PAIR In the above example obj is an object with 2 properties with key as 1 and Maths and value as Name and 100 .Here the index are called as KEY.KEY :VALUE pair together called as entries Object literals are a comma-separated list of key-value pairs wrapped in curly braces. Object literal property values can be of any data type, including array literals, functions, nested object literals or primitive data type. Obj Values   in the above can be accessed via Dot notation i.e obj.1 ,obj.Maths   or via a square bracket notation i.e obj[1] ,obj[“Maths”] Object.assign() METHOD As we discussed earlier in JavaScript Objects are kind of...
Post a Comment
Read more