This article comes from the basic task of Baidu Front-end Technical College. Task 1: Zero-based JavaScript coding (1) It records my thinking in accomplishing my task. Quoted Ruan Yifeng's JavaScript Standard Reference Tutorial
Task details will not be repeated. Task function is: the user can enter any content in the input box. After clicking the "Confirm Fill" button, the content entered by the user will be displayed on the right side of the text "The value you enter is" text.
The idea of realization is
Bind a click event to the button button
In the event handler, get the aqi-input input value and display it in aqi-display
knowledge
1. DOM Model
Reference resources DOM Model
DOM (Document Object Model) is the interface for JS to operate WEB pages.
DOM is the node tree (the smallest unit of DOM is the node).
There are seven types of nodes, such as document, element, attribute, etc.
All nodes are instances of the browser's built-in Node objects.
2. Event binding: specifying listener functions
DOM provides three ways to use event binding listeners. Details and comparison
- on-attribute onclick = "handle()" for HTML Tags
- Element node on-attribute button.onload = handle;
- DOM Event Operation EventTarget interface addEventListener()
js_button.addEventListener('click',handle);
3. Get the input value
Get the value of < input > for reference Operations of attributes There are three ways.
- All attributes of HTMLElement ['nodeName']. nodeValue returns a dynamic Attribute node object, such as js-input. attributes ['value'].
- The standard attribute Element.nodeName of HTMLElement returns values of various types of js. For example, here's js-input.value. Avoid reserving words for and class
- Element.getAttribute('nodeName') is the standard method for element attribute operations, such as js-input.getAttribute('value') here.
- Node.innerText
Help Memory: Reading and writing are usually in the form of strings. Except for the standard attributes of HTMLElement.
Generally, there is no such attribute or node object, which is null.
4. Change display: attribute value, innerHTML and textContent of node
Change Text in <span></span> for reference DOM Model There are four ways.
Node.textContent is used here.
- Node.nodeValue has value only for Text node and Comment node, and the value is equal to Node.textContent.
- Node.textContent returns all text content, automatically ignoring the HTML tags inside the current node. Labels are also ignored when assigning values.
- Element.innerHTML returns the HTML code that the element contains. HTML tags are parsed into nodes when assigning values.
- Element.outerHTML returns all HTML code for the element node, including itself and all the child elements contained. HTML tags are parsed into nodes when assigning values.
Complete the topic
1. Title Tips
label and form elements: implicit and explicit contact id
<label> Please enter Beijing's air quality today: <input id="aqi-input" type="text"></label> < label for= "aqi-input"> please enter air quality in Beijing today: </label> <input id="aqi-input" type="text">
Functional expressions executed immediately
Understanding and using (function() { } ()
Usually, this "Immediately-Invoked Function Expression" is used for anonymous functions.
Its purpose is twofold:
Firstly, it is unnecessary to name functions to avoid polluting global variables.
Second, IIFE has a separate scope inside, which can encapsulate some private variables that cannot be read from outside. (External variables can be accessed) (and internal and external variable naming conflicts are avoided)
2. Selecting Nodes
Reference Find elements based on id Here we use a more efficient document.getElementById('id')
- document.getElementById('id')
- document.querySelector('#id') CSS selector
Extended Nodelist Node Set
Extended HTML Collection Element node sets are dynamic.
document.getElementsByTagName('input')
document.getElementsByClassName('float')
HTMLCollection.NodeId/NodeName
HTMLCollection.item(0)
HTMLCollection.namedItem('id/name')3. Submit homework version 3
onclick attribute of 1 HTML tag
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>js01</title>
</head>
<body>
<!-- Both front and back positions are acceptable. -->
<!-- Immediate Execution Expressions Cannot be Used -->
<script type="text/javascript">
function handle() {
var input_value = document.getElementById('aqi-input');
var aqi_input = document.getElementById('aqi-display');
aqi_input.innerHTML = input_value.value;
};
</script>
<label>Please input the air quality of Beijing today:<input id="aqi-input" type="text"></label>
<button id="button" onclick="handle()">Confirm to fill in</button>
<div id="test_textContent">The value you entered is:<span id="aqi-display">No entry yet</span></div>
</body>
</html>onclick attribute of 2 Element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>js01</title>
</head>
<body>
<label>Please input the air quality of Beijing today:<input id="aqi-input" type="text"></label>
<button id="button">Confirm to fill in</button>
<div id="test_textContent">The value you entered is:<span id="aqi-display">No entry yet</span></div>
<!-- Must be written in body Posterior position -->
<script type="text/javascript">
(function() {
var js_button = document.getElementById('button');
var input_value = document.getElementById('aqi-input');
var aqi_input = document.getElementById('aqi-display');
js_button.onclick = handle;
function handle(){
aqi_input.innerHTML = input_value.value;
}
})();
</script>
</body>
</html>3 DOM Event Operation: Binding Listening
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>js01</title>
</head>
<body>
<label>Please input the air quality of Beijing today:<input id="aqi-input" type="text"></label>
<button id="button">Confirm to fill in</button>
<div id="test_textContent">The value you entered is:<span id="aqi-display">No entry yet</span></div>
<!-- Must be written in body Posterior position -->
<script type="text/javascript">
(function() {
var js_input = document.getElementById('aqi-input');
var js_button = document.getElementById('button');
var js_span = document.getElementById('aqi-display');
js_button.addEventListener('click',handle);
function handle(){
js_span.textContent = js_input.value;
}
})();
</script>
</body>
</html>