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.
How to use Traversing DOM Elements using jQuery?
Tag: DOM
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.
Properties
| Properties | Value | Description |
| accept-charset | UTF-8 | Specifies the charset used in the submitted form (default: the page charset). |
| action | URL | Contains a URL that defines where to send the data after submitting the form |
| autocomplete | On (default) Off | Determines that the browser retains the history of previous values. |
| enctype | specifies how the browser encodes the data before it sends it to the server. (default: is url-encoded). | |
| encoding | Holds 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 |
Properties
| Properties | Value | Description |
| length | The number of a form field with a given form tag. Should bt the same as elements.length | |
| method | GET (default) POST | 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 |
| name | name | Specifies a name used to identify the form |
| novalidate | novalidate | Specifies that the browser should not validate the form. |
| target | _self (default) _blank _parent _top framename | Specifies the target of the address in the action attribute |
Methods
| Method | Description |
| 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
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.
Ex:-
Above title can be accessed in DOM by
document.getElementById(“myid”).title
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