HTML DOM Document Object In JavaScript

The owner of all other objects in your web page is HTML DOM document object. It represents web pages. If you want to access html element you have start accessing with document object.

Finding HTML Elements

Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name

Changing HTML Elements

Method Description
element.innerHTML =  new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML element
element.setAttribute(attribute, value) Change the attribute value of an HTML element
element.style.property = new style Change the style of an HTML element

 

HTML DOM Methods in JavaScript

These methods are actions you can perform on HTML Elements and the properties are values of HTML Elements that you can set or change.
[php]<!DOCTYPE html>
<html>
<body>

<h1>My First Page</h1>

<p id="test"></p>

<script>
document.getElementById("test").innerHTML = "Hello JavaScript!";
</script>

</body>
</html>
[/php]
OUTPUT :


My First Page


HTML DOM in JavaScript

HTML DOM is used to access the elements of html document and make change them. DOM stands for Data Object Model. When a web page is loaded, the browser creates a DOM of the page.
JavaScript can change all the HTML elements and css attributes in the page. DOM is a W3 Standard. It defines standard for accessing documents.
“The W3C Document Object Model is a platform and language-neutral interface which allows programs and scripts to dynamically access and update the content, structure, and style of a document.”

Parts of DOM :
DOM has divided into 3 parts :

  • Core DOM – standard model for all document types
  • XML DOM – standard model for XML documents
  • HTML DOM – standard model for HTML documents

The Function() Constructor

Functions can also be defined with a built-in function constructor pf javascript called Function().
[php]
<!DOCTYPE html>
<html>
<body>

<p>JavaScrip has an built-in function constructor.</p>
<p id="test"></p>

<script>
var myFunction = new Function("x", "y", "return x * y");
document.getElementById("test").innerHTML = myFunction(14, 13);
</script>

</body>
</html>
[/php]
OUTPUT :


JavaScrip has an built-in function constructor.


Function Expressions in JavaScript

We can defined a javascript function using expression.
[php]<!DOCTYPE html>
<html>
<body>

<p>A function can be stored in a variable:</p>
<p id="test"></p>

<script>
var a = function (x, y) {return x * y};
document.getElementById("test").innerHTML = a;
</script>

</body>
</html>

[/php]
OUTPUT :


A function can be stored in a variable:


Function Definitions in JavaScript

In JavaScript we defined a function using function keyword.

Declaration of Function
The following syntax will define the functions declaration :
[php]function functionName(parameters) {
code to be executed
}[/php]
Example :
[php]
<!DOCTYPE html>
<html>
<body>

<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(x, y) {
return x * y;
}
document.getElementById("demo").innerHTML = myFunction(41, 31);
</script>

</body>
</html>[/php]
OUTPUT :


This example calls a function which performs a calculation, and returns the result:


Validation API in JavaScript

Constraint Validation DOM Methods
There are two methods :
1. checkValidity()
2. setCustomValidity()
[php]
<!DOCTYPE html>
<html>
<body>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="200" max="400">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 200 or greater than 400, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>

</body>
</html>
[/php]
OUTPUT :


Enter a number and click OK:


If the number is less than 200 or greater than 400, an error message will be displayed.


JSON in JavaScript

JSON Stands for JavaScript Object Notation. JSON is a format for storing and transporting data means it is a data-interchange fornat.
JSON is language independent.
Exmaple : This JSON syntax defines a student object: an array of 3 student records (objects):
[php]
{"students":[
{"name":"Suraj", "email":"suraj123@gmail.com"},
{"name":"Pankaj", "email":"pankaj246@gmail.com"},
{"name":"Krishna", "email":"krishnasingh@gmail.com"}
]}[/php]

Syntax Rules :

  • Data is in name/value pairs
  • Data is separated(,) by commas
  • Curly braces{} hold objects
  • Square brackets[] hold arrays

JSON Data
JSON data is written as pairs of name/value.
Example :
“name” : “Sameer”

Misplacement of Semicolon

[php]<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 9;
if (x == 19);
{
document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>[/php]
OUTPUT:



Confusion of Addition & Concatenation in JavaScript

Addition means adding numbers, while Concatenation means adding strings. But the same thing is both operation use + oprator.
[php]
<!DOCTYPE html>
<html>
<body>
<p>Adding number + string.
<p id="demo"></p>

<script>
var x = 24 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>[/php]
OUTPUT :


Adding number + string.