How to use Traversing DOM Elements using jQuery?

So in this blog, we’re going to learn that How to use Traversing DOM Elements using jQuery?

So let’s go ahead and do that for first in index.html, with help of style.css & main.js.

Traversing DOM Elements using jQuery
Tagged : / / / / / /

How to use Form Handling in javascript

Form Handling

JavaScript provides access to the forms within an HTML document through the Form object known as HTMLFormElement in the DOM. Which is a child of the Document Object.


accept-charsetUTF-8Specifies the charset used in the submitted form (default: the page charset).
actionURLContains a URL that defines where to send the data after submitting the form
autocompleteOn (default)
Determines that the browser retains the history of previous values.
enctypespecifies how the browser encodes the data before it sends it to the server. (default: is url-encoded).
encodingHolds the value of the enctype attribute, which usually contains either application/x-www-form-urlencoded value or the multipart/form-data value (in the case of file upload)
elements[ ]An array of DOM elements that correspond to the interactive form fields within the form


lengthThe number of a form field with a given form tag. Should bt the same as elements.length
methodGET (default)
Specifies how to send the form data to a web server. The data can be sent as URL variables, by using the get method or as HTTP post, by using the post method
namenameSpecifies a name used to identify the form
novalidatenovalidateSpecifies that the browser should not validate the form.
target_self (default)
Specifies the target of the address in the action attribute


checkValidity ( )Returns a true or false value indicating whether or not all the fields in the form are in a valid state.
reset ( )Returns all form fields to their initial state.
submit ( )Submits the form to the URL specified in the form’s action attribute

Events: –

  • onreset
  • onsubmit
Tagged : / / / / / / /

HTML-DOM and CSS-DOM Mapping in JavaScript

HTML-DOM Mapping

Many object properties are simply direct mapping to the attributes of the HTML element. In other words, there is a mapping directly between HTML Syntax and the DOM.


Above title can be accessed in DOM by

P tag’s title attribute is mapped to DOM property title in the above example that is the reason we can access title in DOM that way.

HTML-DOM Mapping

The mapping is direct between HTML attributes and the DOM properties with the following considerations:-

  • The mapping is direct if the attribute is a single non-reserved word, so an element’s title attribute is accessed via the corresponding DOM object’s title property.
  • The mapping will change case as camelCase if the attribute has two word. Ex:- tabindex attribute will be represented tabIndex in the DOM.
  • If the HTML attribute name is reserved under JavaScript, the value will be modified to work. Ex:- class attribute will be represented className in DOM for attribute will be represented htmlFor in DOM
  • There are also some exception. Ex: – char attribute will be represented ch in DOM
  • For others and custom attributes, we have to use getAttribute() and setAttribute( ) Methods because they may not have direct mapping.

CSS-DOM Mapping

We can modify the CSS Properties by applying a mapping between the CSS property and the DOM object. The mapping is direct between CSS properties and the DOM properties with the following considerations:-

  • CSS properties have a single word, so their mapping is direct.            Ex:- color in CSS will be represented as color in DOM too.
  • Hyphenated CSS properties are repsrented as a single word with camelCase in the DOM.         Ex:- background-color in CSS will be represented as backgroundColor in DOM
  • CSS properties value with vendor prefixs.  Ex:- -webkit-box-shadow in CSS will be represented as webkitBoxShadow in DOM.
  • There are some reserved words which can be exception in the above cases.    Ex – float in CSS will be represented as cssFloat in DOM

Tagged : / / / /