Javascript learning notes (1) Basic DOM operations-Basic Knowledge-js tutorial

The main purpose is to make yourself more proficient in DOM operations, record your own bit by bit, and standardize your own code! Hope everyone can make progress together! Some html code:
When you click show, The showValue function is triggered to dynamically Add the value of input value to the element node id = "text!

The Code is as follows:

　　
　　

Javascript code:
When a page is loaded, the input automatically obtains the focus and directs the user to input the content. (Details enhance user experience)

The Code is as follows:

Window. onload = function (){
Var user_name = document. getElementById ("user_name ");
User_name.focus ();
}

If no content is input, an error message is displayed, and the input focus is obtained.

The Code is as follows:

Function showValue (){
Var user_name = document. getElementById ("user_name ");
Var text = document. getElementById ("text ");
If (user_name.value = ""){
Alert ("Please input some words ");
User_name.focus ();
} Else {
Text. innerHTML = user_name.value;
Text. setAttribute ("class", "text ");
}
}

In HTML code

We can use DOM to dynamically create and add it to the document!

The Code is as follows:

// Create a p element
Var text = document. createElement ("p ");
// Add the value of user_name.value to the p element.
Text. appendChild (user_name.value );
// Add the p element to the body.
Document. body. appendChild (text );