JavaScript attack (quad) HTML DOM

Source: Internet
Author: User
Tags html form tag name



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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.