JavaScript's personal learning is a handy note (ii)

JS HTML DOM

Changing the HTML output stream

JavaScript is able to create dynamic HTML content:

today's date is: Sat Sep 15:06:50 gmt+0800 (China Standard Time)

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.

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

document.getElementById (ID). innerhtml=New HTML

Such as:

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

JavaScript HTML DOM-Change CSS to change HTML style

To change the style of your HTML elements, use this syntax:

document.getElementById (ID). style.property=New style

Example 1

The following example changes the style of the <p> element:

<p id= "P2" >hello world!</p> <script>document.getElementById ("P2"). style.color= "Blue" ; </script>

JavaScript HTML DOM Event Example 1

In this case, when the user clicks on the

<H1 onclick= "this.innerhtml= ' Thank you! '" > Click on the Text 
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.
The onchange event onchange event is often used in conjunction with validation of input fields.
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.
JavaScript HTML DOM Element (node) creates 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.
Instance
<div id= "Div1" ><p id= "P1" > This is a paragraph </p><p id= "P2" > This is another paragraph </p></div> <script >var para=document.createelement ("P"); var node=document.createtextnode ("This is the new paragraph. "var element=document.getelementbyid (" Div1 "); Element.appendchild (para); </script>
To remove a child element from the parent element:
Parent.removechild (child);
JavaScript Number Object
JavaScript has only one numeric type.
You can use it or you can write a number without using a decimal point.
JavaScript is not a type language. Unlike many other programming languages, JavaScript does not define different types of numbers, such as integers, short, long, floating point, and so on.
All the numbers in JavaScript are stored as 64 bits (8 bits) of the root 10, floating-point numbers.
Integers (not using decimal or exponential notation) are up to 15 bits.
The maximum number of decimal digits is 17, but floating-point arithmetic is not always 100% accurate
Octal and hexadecimal if the prefix is 0, JavaScript interprets numeric constants as octal numbers, and if the prefix is 0 and "X", it is interpreted as a hexadecimal number.
JavaScript objects
JavaScript REGEXP Objects
RegExp object is used to specify what is retrieved in the text. 
REGEXP is the abbreviation for regular expressions.
When you retrieve a text, you can use a pattern to describe what you want to retrieve. REGEXP is this pattern.
The simple pattern can be a single character.
More complex patterns include more characters and can be used for parsing, format checking, substitution, and so on.
You can specify the location of the search in a string, the type of character to retrieve, and so on.
Define REGEXP
The RegExp object is used to store the retrieval mode.
Define the RegExp object with the New keyword. The following code defines the RegExp object named Patt1, whose pattern is "e":
var patt1=new RegExp ("E");
When you use the RegExp object to retrieve in a string, the character "e" is searched.
Methods for REGEXP objects
The RegExp object has 3 methods: Test (), exec (), and compile ().
The test () method retrieves the specified value in the string. The return value is true or false.
The EXEC () method retrieves the specified value in the string. The return value is the value that was found. If no match is found, NULL is returned.
The compile () method is used to change the REGEXP.
Compile () can either change the retrieval mode or add or remove the second parameter.
Example:
var patt1=New RegExp ("E"); document.write (Patt1.test ("The best things on life is Free") ); Patt1.compile ("D"); document.write (Patt1.test ("The best things in life is free");
Because "E" exists in the string, and there is no "D", the output of the above code is:
True False
JavaScript's personal learning is a handy note (ii)