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.


Expecting Loose Comparison in JavaScript

Data type does not metter in regular expression. The “if” statement will return “true”.
[php]
<!DOCTYPE html>
<html>
<body>

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

<script>
var a = 54;
var b = "54";
document.getElementById("test").innerHTML = Boolean(a == b);
</script>

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