Tag Archives: HTML DOM

HTML5 Features & How HTML5 helpful On Web Development?

HTML5 is the latest version of HTML and XHTML or simply it is a new standard for HTML, XHTML, and the HTML DOM.
The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous version of HTML and addresses the needs of Web App(new attributes and tags), an area previously not covered.

 

HTML5 work is still in progress or we can say it is just a Draft.However, most modern browsers have some HTML5 support(no browser have full support).

But all major browsers (Firefox, Safari, Chrome, Opera, IE) continue to add new HTML5 features to their latest versions.

 

There are some new attributes added in HTML5 and some useless attributes has been removed.

 

The attractive things behind HTML5 are.

* New Elements (Semantic Elements as headers, footers, menus, sections, articles)

* New Attributes (Shadow Effects, Rounded Corners, Animations)

* Full CSS3 Support

* Video and Audio (tags <video>, <audio>)

* 2D/3D Graphics (tag <canvas>)

* Local Storage (local file access, application cache, JavaScript)

* Local SQL Database

* Web Applications

 
 
Benefits of HTML5
 

1.Reduce the need for external plugins (like Flash)

2.Better error handling (some in build validation attributes added)

3.More mark-up to replace scripting(new tags has been added)

4.HTML5 should be device independent(uniform on mobile, web, notebook, tablet PC)

5.The development process should be visible to the public.

Drawback of HTML5

 

1.Currently, No browser supports HTML5 fully.

 

What is the HTML DOM(Document Object Model)?

The HTML DOM views an HTML document as a tree-structure. The tree structure that is defined known as a node-tree.All nodes can be accessed through the tree. Their contents can be modified or deleted, and new elements can be created.

 

Programming Interface
In the DOM, HTML documents consist of a set of node objects. The nodes can be accessed with JavaScript (Client side programming language).
The programming interface of the DOM is defined by standard properties and methods.

 

HTML DOM Properties are
x known as HTML element or object of DOM
x.innerHTML – the text value of x
x.nodeName – the name of x
x.nodeValue – the value of x
x.parentNode – the parent node of x
x.childNodes – the child nodes of x
x.attributes – the attributes nodes of x

 

HTML DOM Methods
Some simple DOM methods are
x.getElementById(id) – get the element with a specified id
x.getElementsByTagName(name) – get all elements with a specified tag name
x.appendChild(node) – insert a child node to x
x.removeChild(node) – remove a child node from x

 

The innerHTML Property
The easiest way to get or modify the content of an element is by using the innerHTML property.innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browser.

 

Events
Every element on a web page has certain events which can trigger JavaScript functions. Events are normally used in combination with functions, and the function will not be executed before the event occurs!
Events examples
> A mouse click
> A web page or an image loading
> Mousing over a hot spot on the web page
> Selecting an input box in an HTML form
> Submitting an HTML form
> A keystroke

 

 

Document Object Model (DOM)

The Document Object Model (DOM) is a platform- and language-independent interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.

 

We can say It is convention for representing and interacting with objects in HTML, XHTML and XML documents.Aspects of the DOM (such as its “Elements”) may be addressed and manipulated within the syntax of the programming language in use(JavaScript or others). The public interface of a DOM is specified in its application programming interface (API) called as client side programming.

 

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

 

The DOM is a W3C (World Wide Web Consortium) standard.The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

 

In simple words : The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

 

According to the DOM, everything in an HTML document (layout) is a node.

 

DOM says that:

  • The entire document is a document node
  • Every HTML element is an element node
  • The text in the HTML elements are text nodes
  • Every HTML attribute is an attribute node
  • Comments are comment nodes