javascript study notes (1) Basic DOM operations_Basic knowledge

Part of the html code:
When the show button is clicked, the showValue function is triggered and the value of the input value is dynamically added to the element node with id="text"!

Copy code The code is as follows:

　
　

javascript part of the code:
When the page loads, the input automatically gains focus and guides the user to input content. (Details enhance user experience)

Copy code The code is as follows:

window.onload = function( ) {
var user_name = document.getElementById("user_name");
user_name.focus();
}

If no content is entered, an error message is given. At the same time, let the input get the input focus

Copy the code 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");
}
}

The

in the HTML code is completely unnecessary. We can use the DOM to dynamically create it and add it to the document. middle!

Copy code The code is as follows:

//Create div element
var text = document .createElement("div");
//Add the value of user_name.value to the div element
text.appendChild(user_name.value);
//Finally add the div element to the body Come to
document.body.appendChild(text);