JavaScript attack (quad) HTML DOM

HTML DOM (Document Object model)

What is DOM?

DOM is the standard of the World Wide Web Consortium.

The DOM defines the standard for accessing HTML and XML documents.

The Document Object Model (DOM) is a platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.

The DOM standard is divided into 3 different parts:

• Core DOM-a standard model for any structured document
• XML DOM-a standard model for XML documents
• HTML DOM-A standard model for HTML documents

While accessing the browser, the browser creates the Document object model of the page, while the Web page is loaded.

With the programmable object model, JavaScript has the ability to create dynamic HTML.

• JavaScript can change all HTML elements in a page
• JavaScript can change all HTML attributes in a page
• JavaScript can change all CSS styles in a page
• JavaScript can react to all the events in the page

In the HTML DOM, everything is a node, and the DOM is the HTML that is treated as a node tree, by the actions performed on the node.

Programming Interface

The HTML DOM can be accessed through JavaScript (and other programming languages). All HTML elements are defined as objects, while programming interfaces are object methods and object properties. Methods are actions that you can perform (such as adding or modifying elements). A property is a value that you can get or set (such as the name or content of a node).

Some common HTML DOM properties:

• InnerHTML-Text value of the node (element)
• ParentNode-parent node of the node (element)
• ChildNodes-Child nodes of nodes (elements)
• Attributes-node (element) attribute node

Some common HTML DOM methods:

methods	Description
getElementById ()	returns the element with the specified ID.
getelementsbytagname ()	Returns a list of nodes (a collection/node array) that contains all the elements with the specified label name.
getelementsbyclassname ()	Returns a list of nodes that contain all the elements with the specified class name.
appendchild ()	adds a new child node to the specified node.
removechild ()	deletes child nodes.
replacechild ()	replaces child nodes.
insertbefore ()	inserts a new child node in front of the specified child node.
createattribute ()	creates an attribute node.
createelement ()	creates an element node.
createtextnode ()	creates a text node.
getattribute ()	returns the specified property value.
setAttribute ()	Sets or modifies the specified property to the specified value.

Finding HTML elements

Method (i) The simplest way to find HTML elements in the DOM is by using the ID of the element.

Find elements of id= "Intro"

Var

If the element is found, the method returns the element in the form of an object (in X), and if the element is not found, X will contain null.

Method (ii) The simplest way to find HTML elements in the DOM is to find HTML elements by using the ID of the element through the tag name

Find the element that id= "main", and then look for all the <p> elements in "main":

var x=document.getelementbyid ("main"var

tip : Finding HTML elements through the class name is not valid in IE 5,6,7,8.

changing the HTML output stream

In JavaScript, document.write () can be used to write content directly to the HTML output stream.

document.write (Date ());

Change HTML content

The simplest way to modify HTML content is to use the InnerHTML property.

document.getElementById ("P1"). Innerhtml= "New text!";

Changing HTML Properties

To change the attributes of an HTML element, use this syntax: document.getElementById (ID). attribute=New Value

document.getElementById ("image"). src= "Landscape.jpg";

Change HTML style

To change the style of your HTML element, use this syntax: document.getElementById (ID). style.property=New Style

document.getElementById ("P2"). style.color= "Blue";

Respond to Events

We can execute JavaScript when an event occurs, such as when a user clicks on an HTML element.

Examples of HTML events:

• When the user clicks the mouse

• <H1 onclick= "this.innerhtml= ' Thank you! '" > Click on the Text 
  

• When the page is loaded
• When the image is loaded
• When the mouse moves over the element
• When the input field is changed
• When you submit an HTML form
• When the user triggers the button

use HTML DOM to assign events

HTML DOM allows you to assign events to HTML elements by using JavaScript:

onload and OnUnload events

The onload and OnUnload events are triggered when the user enters or leaves the page.

The OnLoad event can be used to detect the browser type and browser version of the visitor and to load the correct version of the Web page based on that information.

The onload and OnUnload events can be used to process cookies.

onchange Events

OnChange events are often used in conjunction with validation of input fields.

onmouseover and onmouseout events

The onmouseover and onmouseout events can be used to trigger a function when a user moves the mouse over an HTML element or moves out of an element.

onmousedown, onmouseup, and onclick events

OnMouseDown, onmouseup, and onclick form all parts of the mouse click event. First, when the mouse button is clicked, the OnMouseDown event is triggered, and when the mouse button is released, the OnMouseUp event is triggered, and the onclick event is triggered when the mouse click is completed.

Add and remove nodes (HTML elements).

Create a new HTML element

To add a new element to the HTML DOM, you must first create the element (the element node), and then append the element to an existing element.

1 <div id = "div1">
  2 <p id = "p1"> This is a paragraph </ p>
  3 <p id = "p2"> This is another paragraph </ p>
  4 </ div>
  5
  6 <script>
  7 var para = document.createElement ("p");
  8 var node = document.createTextNode ("This is a new paragraph.");
  9 para.appendChild (node);
10 var element = document.getElementById ("div1");
11 element.appendChild (para);
12 </ script> 

Delete an existing HTML element

To delete an HTML element, you must first obtain the parent element of the element:

1 <div id = "div1">
  2 <p id = "p1"> This is a paragraph. </ p>
  3 <p id = "p2"> This is another paragraph. </ p>
  4 </ div>
  5
  6 <script>
  7 var parent = document.getElementById ("div1");
  8 var child = document.getElementById ("p1");
  9 parent.removeChild (child);
10 </ script> 

Tip: It's great to be able to delete an element without referencing the parent element. But I'm sorry. The DOM needs to be clear about the element that needs to be removed, and its parent element.

This is a common solution: find the child element that you want to delete, and then use its ParentNode property to find the parent element:

 1var child=document.getelementbyid ("P1"2 child.parentNode.removeChild ( Child);

JavaScript attack (quad) HTML DOM