JavaScript HTML DOM

Through the HTML DOM, you can access all the elements of a JavaScript HTML document.

HTML DOM

When a Web page is loaded, the browser creates a Document object model for the page.

Each label can be called a node,

DOM, the main function is to make the element relationship between HTML more intuitive.

First, find HTML elements

Typically, with JavaScript, you need to manipulate HTML elements.

In order to do this, you must first find the element. There are three ways to do this:

• Find HTML elements by ID
• Find HTML elements by tag name
• Find HTML elements by class name

1. Find HTML elements by ID

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

Find the Id= "Intro" element:

var X=document.getelementbyid ("Intro");

2. Find the HTML element by tag name find the element that id= "main" and look for all the <p> elements in "main":

var X=document.getelementbyid ("main"); var y=x.getelementsbytagname ("P");

Second, change the HTML content

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

To change the contents of an HTML element, use this syntax:

document.getElementById (ID). innerhtml=New HTML

Column:

<p id= "P1" >hello World!</p><script>document.getelementbyid ("P1"). Innerhtml= "New text!"; </script><p> the above paragraph was modified by a JavaScript script. </p>

Third, change the HTML properties

To change the attributes of an HTML element, use this syntax:

document.getElementById (ID). attribute=New Value

Instance

This example changes the SRC attribute of the element:

<script>document.getelementbyid ("image"). src= "/i/shanghai_ Lupu_bridge.jpg ";</script><p> original picture is Tulip (eg_tulip.jpg), but has been modified to Lupu Bridge (shanghai_lupu_bridge.jpg). </p>

The HTML DOM gives JavaScript the ability to react to HTML events.

DOM Events,

Respond to Events

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

To execute code when a user taps an element, add JavaScript code to an HTML event property:

onclick=JavaScript

Examples of HTML events:

• When the user clicks the mouse
• 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

1) OnClick Event

<H1 onclick= "this.innerhtml= ' Thank you! '" > Click on the Text 
The onclick can also call functions, function
<script>function Changetext (ID) {id.innerhtml= "Thank you!";} </script>
OnClick, can also be applied with the button label
2) onload and OnUnload events
The onload (enter page) and onunload (Leave page) 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.
Instance
<script>function checkcookies () {if (navigator.cookieenabled==true)    {    alert ("Cookies enabled")    }else    {    alert ("Cookies not Enabled")    }}</script>
OnUnload
<script>function checkcookies () {window.open ("http://www.baidu.com")}</script><p> Baidu page opens automatically when you leave the page </p>
Note that onunload may be automatically intercepted by some browsers as ads.
3) onchange Event
OnChange events are often used in conjunction with validation of input fields. Triggers only when the cursor is left
Here is an example of how to use onchange. The uppercase () function is called when the user changes the contents of the input field.
Instance
function myFunction () {var X=document.getelementbyid ("FName"); X.value=x.value.touppercase ();} </script>
4) 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.
Instance
A simple example of onmouseover-onmouseout:
<!--onmouseover= "MOver (This)" is passed in the current element--><div onmouseover= "MOver (This)" onmouseout= "Mout" Style= "Width:120px;height:20px;padding:40px;color: #ffffff;" > Move the mouse over </div><script>function mOver (obj) {obj.innerhtml= "Thank you";} function Mout (obj) {obj.innerhtml= "move the mouse over"}</script>
5) onmousedown, onmouseup, and onclick events
OnMouseDown (when the mouse point is not released), onmouseup (after the mouse is released) and the 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.
Instance
<div onmousedown= "MDown (This)" onmouseup= "mUp (This)" style= "color: #ffffff; width:90px;height:20px;padding:40px; font-size:16px; " > Click here </div><script>function mDown (obj) {obj.style.backgroundcolor= "#1ec5e5"; obj.innerhtml= " Release the mouse button "}function mUp (obj) {obj.style.backgroundcolor=" green ", obj.innerhtml=" Press the mouse button "}</script>
Before you click:
No release when clicking the mouse
After releasing the mouse
6) onfocus Change the background color when the input field is in the active focus,
<script>function myFunction (x) {x.style.background= "yellow"; X.value= "";} </script>
Focus: The mouse becomes uppercase I
V. JavaScript HTML DOM elements (nodes)
You can add or remove nodes (HTML elements).
1) Add a new node (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.
<script>/* Note that this code can not be written in 
2) Delete existing HTML elements
<div>
<p id= "P1" > Test one </p><p id= "P2" > Test two </p><p id= "P3" > Test three </p></div><!-- The previously created text--><script>/* method 1*/var parent = document.getElementById ("Div1");/* First find the parent label to remove the punctuation id*/var child = document.getElementById ("P1");/* Find the label you want to delete id*/parent.removechild (child);/* Delete label */</script><script>/* Method 2*/var Child=document.getelementbyid ("P3");/* Locate the node label Id*/child.parentnode.removechild (child) to be deleted;/*node is the node meaning, Delete child from parent node p3*/</script>
JavaScript HTML DOM