**
Java Web – HTML, CSS, JavaScript learning notes
**
HTML (Hyper Text Markup Language): it controls the content of the page. It is a language composed of tags, which can show the effect of hypertext.
CSS: controls page layout, visual effects, etc
C/S structure: Client Server Client to Server
B/S structure: Browser Server Browser to Server
The page consists of three parts: content (structure), performance and behavior.
Content (structure): it is the data we can see on the page. We call it content. General content, we use html technology to display.
Performance: refers to the display form of these contents on the page. For example, layout, color, size, etc. CSS technology is generally used.
Behavior: refers to the response of the elements in the page interacting with the input device. It is generally implemented using javaScript technology.
html some standard formats:
The tag is equivalent to a java class. The descriptive content of the web page, such as the title, is stored in braces. The information displayed to users is stored in.<html> <head> <title> Put in title </title> </head> <body> <font color = "red"> It's a nice day today </font> </body> </html>
Notes in HTML file:
The extended name of HTML file is HTML or htm. htm is the old naming convention and html is the new naming convention.
HTML files are directly parsed and executed by the browser without compilation. They are directly executed from top to bottom.
HTML tags are usually composed of start tags and end tags. For example: < HTML > < / HTML > < font > < / font >
The content between the start tag and the end tag is called the content body.
HTML tags without content body are called empty tags. Consists of only one label. For example: < br / > self closing
HTML tags are not case sensitive. It is recommended to use lowercase for ease of reading.
HTML tags have attributes. The format is: attribute name = "attribute value". The attribute value is caused by quotation marks, including single quotation marks and double quotation marks.
HTML tags suggest package nesting, not cross nesting.
<!DOCTYPE html> <!--Constraints, declarations-->
<html lang="zh_CN"> <!--html Label representation html At the beginning of, lang="en":It means supporting English, lang="zh_CN"Express Chinese-->
<!--html The label is generally divided into two parts: head and body-->
<head> <!--Represents header information, which generally includes three parts, title label, css Style, js code-->
<meta charset="UTF-8"> <!--Indicates the number of pages used by the current page UTF-8 character set-->
<title>title</title> <!--Represents the title-->
</head>
<body> <!--Expressed html Main content displayed on the page-->
hello
</body>
</html>
Tags are divided into basic attributes and event attributes:
1. Basic attributes
bgcolor: indicates the background color attribute
2. Event attributes
onclick: indicates a single machine (click) event
alert(): it is a warning box function provided by JavaScript language. It can receive any parameter. The parameter is the function information of the warning box.
Common special characters:
< corresponding < > corresponding > Space correspondence
Title label:
< h * > < / h * > * is 1 to 6
For example: < h1 > < / h1 > < H2 > < / H2 > where h1 is the largest and h6 is the smallest
Labels can also adjust attributes
Hyperlink:
The content that can jump after clicking in the web page is hyperlink.
<a>< / a > indicates a hyperlink,
The href attribute sets the address of the link.
The target property sets which target to jump to.
_ self indicates the current page
_ blank means to open a new page to jump
List label:
It is divided into: unordered list and ordered list
< UL > < / UL > unordered table
<li>< / Li > indicates a list element
For example:
<ul>
<li>Zhao Si</li>
<li>Zhao Wu</li>
<li>Zhao Liu</li>
<li>Zhao Qi</li>
</ul>
< ol > < / OL > ordered list
For example:
<ol>
<li>Zhao Si</li>
<li>Zhao Wu</li>
<li>Zhao Liu</li>
<li>Zhao Qi</li>
</ol>
Img tag
The function is to display pictures
img tag is a picture tag used to display pictures
src property can set the path of the picture
The width property sets the width of the picture
The height property sets the height of the picture
The border property sets the border size
alt attribute is used to replace the displayed text content when the picture cannot be found in the specified path
In javaSE, paths are also divided into relative paths and absolute paths
Relative path:
From project name
Absolute path:
Drive letter / directory / file name
In the web, paths are divided into relative paths and absolute paths
Relative path:
. indicates the current directory
... indicates the upper level directory
The file name represents the file in the directory where the current file is located, equivalent to/ File name (only. / can be omitted)
Absolute path:
The correct format is: http://ip:port/ Project name / resource path
The error format is: drive letter / directory / file name
The table label is a table label
src property can set the path of the picture
The width property sets the width of the picture
The height property sets the height of the picture
The border property sets the border size
cellspacing sets the spacing between cells
tr is the row label
b the label is bold
th is the header label
td is the cell label
align sets the cell alignment
The colspan property is set to span columns
rowspan property set cross row
iframe tags can open up a small area on the page to display a separate page
Steps for combining iframe tag and a tag:
1. Define a name using the name attribute in the iframe tag
2. Set the name attribute value of iframe on the target attribute of a tag
Form label:
What is a form?
A form is a collection of all elements in an html page used to collect user information, and then send the information to the server
The form tag represents the form
< input type = "text" / > indicates that a text input box is generated
The value attribute sets the default initial content in the input box
< input type = "password" > indicates the password input box
< input type = "radio" / > indicates a radio box
Gender: < input type = "radio" name = "sex" / > male < input type = "radio" name = "sex" / > female
You can use the name attribute to achieve the effect of grouping. You can only select one radio option in the same group
Checked = "checked" you can also use this tag to achieve the default options in the previous page, indicating that it is selected by default
< input type = "checkbox" / > indicates the checkbox
< Select > < / Select > this pair of tags represents a drop-down text selection box
< option > < / option > these tags are options in the drop-down list
Selected = "selected" the default option in the text box
< textarea > < / textarea > indicates a multi line text input box (the contents in the start label and end label are the default values)
The rows property sets the height of several rows that can be displayed
The cols property sets how many characters can be displayed per line
< input type = "reset" / > indicates that the value attribute of the reset button modifies the text on the button
< input type = "submit" value = "click to submit" / > indicates the submit button
< input type = "button" value = "I'm just an ordinary little button" / > means to create a button
< input type = "file" / > indicates the file upload domain
< input type = "hidden" / > refers to the hidden domain (application scenario, when we want to send some information without user participation, we can use the hidden domain and send it to the server at the same time of submission)
< form > < / form > is the form label
The action property sets the server address of the submission
The method property sets the submission method, GET or POST
1. There are three situations when the data is not sent to the server when the form is submitted:
1) The form item does not have a name attribute value
2) The value attribute needs to be added for radio and check (option tab in the drop-down list) in order to send to the server
3) The form item is not in the submitted form tag
2.GET requests are characterized by:
1) The address in the browser address is: action attribute [+? + request parameter]
The format of request parameters is: name = value & name = value
For example: password = ABC & sex = girl & Hobby = Java
2) Insecure (e.g. the submitted password will be displayed)
3) It has a data length limit
Method = "get": this method can transfer the form content in UPL: UPL? name=value&name=value.
Note: if the form value contains non ASCII characters or more than 100 characters, you must use method = "post".
Method = "post": this method can transfer the form content in the request body
3. The characteristics of post request are:
1) There is only the action attribute value in the browser address bar
2) More secure than GET requests
3) Theoretically, there is no limit on the length of data
Other labels:
div tag: one row by default
span tag: its length is the length of the encapsulated data
p paragraph label: by default, a line will be left above or below the paragraph (if it already exists, it will no longer be empty)
CSS technology introduction
CSS is a [cascading style form], which is a markup language used to (enhance) control web page style and allow the separation of style information from web page content.
rule of grammar:
Selector p{
font-size: 80px;
}
Selector: the browser determines the elements (labels) affected by CSS styles according to the "selector".
Property: is the style name you want to change, and each property has a value. The attribute and value are separated by colons and surrounded by curly braces, thus forming a complete style declaration, for example: p{color:blue;}
Multiple declarations: if you want to define more than one declaration, you need to separate each declaration with a semicolon. Although a semicolon may not be added at the end of the last statement (try to add a semicolon at the end of each statement)
Combination of CSS and HTML
First:
Set "key: value;" on the style attribute of the tag, Change the style of the label.
Disadvantages of this use:
1) If there are too many labels. There are many styles. The amount of code will be very large.
2) Poor readability
3) CSS code has no reusability
Second:
In the head tag, use the style tag to define various CSS styles you need.
The format is as follows:
xxx {
key : value value;
}
Disadvantages of this use:
1) Code can only be reused on the same page, and CSS code cannot be reused on multiple pages.
2) It's inconvenient to maintain. There will be thousands of pages in the actual project. It's too much work to revise each page.
Third:
The CSS style is written into a separate CSS file, which can be reused through the link tag
Use html tags to import CSS style files.
CSS selector
Tag name selector:
The format of the tag name selector is:
Tag name{
Attribute: value;
}
The tag name selector is used to determine which tags use this style passively.
id selector
#id attribute value{
Attribute: value;
}
id selector allows us to selectively use this style through the id attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id selector</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id002{
color: red;
font-size: 5px;
border: 2px aquamarine dotted;
}
</style>
</head>
<body>
<div id="id001">div Label 1</div>
<div id="id002">div Label 2</div>
</body>
</html>
class selector (type selector)
The format of the class type selector is:
. class attribute value{
Attribute: value;
}
The class type selector can effectively use this style through the class attribute.
Combination selector:
The format of the combination selector is:
Selector 1, selector 2, selector n{
Attribute: value;
}
The function of composite selectors is to make multiple selectors share the same CSS style code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combination selector</title>
<style type="text/css">
.class01, #id002{
color: beige;
font-size: 2px;
border: #ff2d91 solid 2px;
}
</style>
</head>
<body>
<div class="class01">div label class01</div>
<div class="class02">div label</div>
<div id="id002">div Label 3</div>
<span class="class01">span label class01</span>
<span>span Label 2</span>
</body>
</html>
Introduction to JavaScript language
The birth of JavaScript language is mainly to complete the data verification of the page. Therefore, it runs on the client side and requires a browser to parse and execute JavaScript code. JS is a product of Netscape Netscape, which was first named LiveScript; To attract more java programmers. Renamed JavaScript.
JS is a weak type and Java is a strong type.
Weak type is the time to define variables. The type is determined and immutable.
characteristic:
1) Interactivity (what it can do is the dynamic interaction of information)
2) Security (direct access to local hard disk is not allowed)
3) Cross platform (any browser that can interpret JS can execute, regardless of the platform)
Combination of JavaScript and html code
The first way:
Just use the script tag in the head tag or the body tag to write JavaScript code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//alert is a warning box function provided by JavaScript language
alert("hello JavaScript");
</script>
</head>
<body>
</body>
</html>
The second way:
Use the script tag to introduce a separate JavaScript code file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Now you need to use script Introduce external js File to execute
src Property is specifically used to introduce js File, which can be relative path or absolute path
script Labels can be used to define js Code can also be used to introduce js file
However, only one of the two functions can be used, and the two functions cannot be used at the same time
-->
<script type="text/javascript" src="01_js.js"></script>
<script type="text/javascript">
alert("That's good")
</script>
</head>
<body>
</body>
</html>
That is, you can only do one thing under a script tag.
Variables in Js:
What are variables? A variable is the name of a memory that can hold certain values.
Variable type of JavaScript:
Value type; Number, int, double, etc
String type; string
Object type; object
Boolean type; boolean
Function type; function
Special values in JavaScript:
Undefined is undefined. When all js variables are given initial values, the default value is undefined
Null null
The full name of NAN is Not a Number, Not a Number
Variable format defined in js:
var variable name;
var variable name = value;
Relational (comparison) operation
< >= > =
The above relational operators are similar to java
Equals: = = equals is a simple comparison of literal values
All equal to: = = = in addition to the comparison of literal values, the data types of two variables will also be compared
Logical operation:
And operation:&&
Or operation:||
Inverse operation:!
In the JavaScript language, all variables can be used as boolean variables.
0, null, undefined, "" (empty string) are all considered false
&&Short circuit with operation and 𞓜 or operation
Short circuit means when this & & or 𞓜 operation has a result. The following expression is no longer executed.
Array:
Definition of array in Js:
Format:
var array name = []// Empty array
var array name = [1, 'abc', true] / / define the simultaneous assignment elements of the array
For arrays in JavaScript language, as long as we assign values through the array subscript, the maximum subscript value will automatically expand the capacity of the array.
Function:
Two ways to define functions
First: you can use the function keyword to define a function
The format used is as follows:
Function function name (formal parameter list){
Function body
}
How to define functions with return values in JavaScript?
Just use the return statement directly in the function body to return
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function</title>
<script type="text/javascript">
//Define a parameterless function
function fun(){
alert("The parameterless function was called");
}
fun();
//Define a function with parameters
function fun2(a, b) {
alert("Parametric function fun2()Called a => " + a + "b =>" + b);
}
fun2(2, 3);
//Define a function with a return value
//Note arguments to a function cannot specify a type
function fun3(num1, num2) {
var result = num1 + num2;
return result;
}
alert(fun3(3, "adgfsd"));
</script>
</head>
<body>
</body>
</html>
The second definition method of function is as follows:
The format used is as follows:
var function name = function (formal parameter list){
Function body;
}
Example code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function2</title>
<script type="text/javascript">
var fun = function() {
alert("Nonparametric function");
}
fun();
var fun2 = function(a, b) {
alert("Parametric function a = " + a + " b = " + b);
}
fun2(3, 4);
var fun3 = function(num1, num2) {
return num1 + num2;
}
fun3(4, 5);
</script>
</head>
<body>
</body>
</html>
Note: in Java, function overloading is allowed, but in JS, function overloading will directly overwrite the previous definition, that is, overloading is not allowed.
arguments implicit argument to function (only in function function)
Variables that do not need to be defined in the function function but can be directly used to obtain all parameters are called implicit parameters.
Implicit parameters are especially like variable parameters in java foundation
public void fun(Object ...args);
The variable length parameter is actually an array
The implicit parameters in JS are the same as the variable length parameters in java, and the operation is similar to array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arguments</title>
<script type="text/javascript">
function fun() {
//alert(arguments.length); Number of parameters that can be viewed
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
alert(arguments[3]);
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
alert("Nonparametric function fun()");
}
fun(1, 2, 3, "abf");
</script>
</head>
<body>
</body>
</html>
Custom objects in JS (extended content)
Custom Object in the form of Object
var variable name = new Object()// Object instance (empty object)
Variable name Attribute name = value// Define an attribute
Variable name Function name = function / / define a function
Object access:
Variable name Property / function name
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>custom object</title>
<script type="text/javascript">
var obj = new Object();
obj.name = "Huazi";
obj.age = 18;
obj.fun = function() {
alert("full name:" + this.name + " , Age" + this.age);
}
alert(obj.age);
alert(obj.fun);
</script>
</head>
<body>
</body>
</html>
{} custom objects in curly braces
var variable name = {}// Empty object
var variable name ={
Attribute name: value// Define an attribute
Attribute value: value / / when defining the last attribute, it cannot be followed by a semicolon
Function name: function() {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CustomObject</title>
<script type="text/javascript">
var obj = {
name: "Guoge";
age: 18;
fun: function() {
alert("full name: " + this.name + " , Age" + this.age);
}
};
alert(obj.name);
obj.fun();
</script>
</head>
<body>
</body>
</html>
Events in js
What is an event?
Event is the response of the computer input device to interact with the page. We call it an event.
Common events:
onload loading completion event; After the page is loaded, it is often used to initialize the page js code
onclick click event; Commonly used for button click response operations
onblur loss of focus event; It is often used to verify whether the input content is legal after the input box loses focus
onchange content change event; It is often used to operate after the contents of the drop-down list and input box are changed
onsubmit form submission event; It is often used to verify whether all forms are legal before submission
Event registration can be divided into static registration and dynamic registration:
What is event registration (binding)?
In fact, it tells the browser what operation code to execute after the event response, which is called event registration or event binding.
Static registration event:
The code after the event response is directly given through the event attribute of the html tag. This method is called static registration.
<body onload="alert('Static registration onload event')">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload</title>
<script type="text/javascript">
//Method of onload event
function onloadFun() {
alert("Static registration onload Event, all codes");
}
</script>
</head>
<!--Static registration onload event
onload Event is an event that will be triggered automatically after the browser parses the page
-->
<body onload="onloadFun();">
</body>
</html>
Dynamic registration events:
It refers to getting the dom object of the tag through js code, and then through the dom object Event name = function() {} This code after giving event response is called dynamic registration.
Basic steps of dynamic registration:
1. Get label object
2. Label object Event name = function() {}
onload event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload</title>
<script type="text/javascript">
//Method of onload event
function onloadFun() {
alert("Static registration onload Event, all codes");
}
//onload event is dynamically registered and is written in a fixed way
window.alert("Dynamically registered onload event");
</script>
</head>
<body onload="onloadFun();">
</body>
</html>
onclick event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick</title>
<script type="text/javascript">
function onclickFun() {
alert("Static registration onclick event");
}
function onclickFun2() {
alert("Pretty good, huh");
}
</script>
</head>
<body>
<!--Static registration onclick event-->
<button onclick="onclickFun();">Button 1</button>
<button onclick="onclickFun2();">Button 2</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick</title>
<script type="text/javascript">
function onclickFun() {
alert("Static registration onclick event");
}
//Dynamically register onclick events
window.onload = function() {
//1. Get label object
/*
*document Is an object (document) provided by JavaScript language
* document It means the whole page
*
* getElementById()
*
* get obtain
* Element Element (that is, label)
* By Pass.. By.. Classics..
* Id id attribute
* getElementById() Get the label object through the Id attribute
*/
var btnobj = document.getElementById("btn01");
alert(btnobj);
//2. Through the label object Event name = function() {}
btnobj.onclick = function() {
alert("Dynamically registered onclick event");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();">Button 1</button>
<button onload="onclickFun()">Button 2</button>
</body>
</html>
onblur event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur</title>
<script type="text/javascript">
//Event of losing focus in static registration
function onblurFun() {
//Console is a console object, which is provided by JavaScrip t language. It is specially used to print out to the browser controller for test use
//log() is the method of printing
console.log("Event of losing focus in static registration");
}
//Dynamic registration loss of focus event
window.onload = function() {
//1. Get label object
let passwordobj = document.getElementById("password");
alert(passwordobj);
//2. Through the memo object Event name = function() {};
passwordobj.onblur = function() {
console.log("Dynamic loss of focus event");
}
}
</script>
</head>
<body>
user name:<input type="text" onblur="onblurFun();"><br/>
password:<input id="password" type="text"><br/>
</body>
</html>
onchange event:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange</title>
<script type="text/javascript">
function onchangeFun() {
alert("The goddess has changed");
}
window.onload = function() {
let selectobj = document.getElementById("select01");
alert(selectobj);
selectobj.onchange = function() {
alert("The male God has changed");
}
}
</script>
</head>
<body>
Please choose the goddess in your heart:
<!--Static registration onchange event-->
<select onchange="onchangeFun();">
<option>----goddess----</option>
<option>----Goddess 1----</option>
<option>----Goddess 2----</option>
<option>----Goddess 3----</option>
<option>----Goddess 4----</option>
<option>----Goddess 5----</option>
</select>
Please choose the male god in your heart:
<!--Static registration onchange event-->
<select id="select01">
<option>----Male god----</option>
<option>----Male God 1----</option>
<option>----Male god 2----</option>
<option>----Male god 3----</option>
<option>----Male God 4----</option>
<option>----Male god 5----</option>
</select>
</body>
</html>
onsubmit form submission event:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit</title>
<script type="text/javascript">
//Static registration form submission event
function onsubmitFun() {
//To verify whether the form items are legal, if one of them is illegal, the form submission will be blocked
alert("Static registration form submission event");
return false;
}
window.onload = function() {
let formobj = document.getElementById("form001");
formobj.onsubmit = function() {
alert("Dynamic registration form submission event----Illegal found");
return false;
}
}
</script>
</head>
<body>
<!--return false You can prevent form submission-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="Static registration"/>
</form>
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input id="form001" type="submit" value="Dynamic registration"/>
</form>
</body>
</html>
DOM model
The full name of DOM is Document Object Model
The simple understanding is to convert the tags, attributes and text in the document into objects for management
Simulate objectification, equivalent to:
class Dom {
private String id; //id attribute
private String tagName; // Represents the tag name
private Dom parentNode; // father
private List children; // Child node
private String innerHTML; // The content between the start tag and the end tag
}
Understanding of Document object:
1.Document it manages the content of all HTML documents
2.document it is a tree structured document. Hierarchical relationship
3. It allows us to objectify all tags (use a class to record tag information)
4. We can access all tag objects through document
Introduction to methods in document object
document.getElementById(elementId)
Find the tag dom object through the id attribute of the tag, and elementId is the id attribute value of the tag
document.getElementsByName(elementName)
Find the dom object of the tag through the name attribute of the tag, and the name attribute value of the elementName tag
document.getElementsByTagName(tagName)
Find label objects directly by label name. tagName is the tag name
document.createElement(tagname)
Method to create a label object with a given label name. tagName is the tag name to create
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementById</title>
<script type="text/javascript">
function onclickFun() {
var usernameObj = document.getElementById("username");
alert(usernameObj); //[object HTMLInputElement] is a dom object
alert(usernameObj.id);
alert(usernameObj.type);
alert(usernameObj.value);
var usernameText = usernameObj.value;
//How to verify that a string conforms to a rule requires the use of regular expression technology
var patt = /^\w{5, 12}$/;
/*
*test()Method is used to test whether a string matches my rule
* true is returned if there is a match, and false if there is no match
*/
if (patt.test(usernameText)) {
alert("The user name is legal!");
}
else {
alert("Illegal user name");
}
}
</script>
</head>
<body>
user name:<input type="text" id="username" value="kkkoke">
<button onclick="onclickFun()">check</button>
</body>
</html>
Regular expression object
What is regular expression?
ReExp is an abbreviation for regular expression
When you retrieve a text, you can use a pattern to describe the content to be retrieved. ReExp is this model.
A simple pattern can be a single character.
More complex patterns include more characters and can be used for parsing, format retrieval, replacement, and so on.
You can specify the search location of the string, the character type to be retrieved, and so on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>regularExpression</title>
<script type="text/javascript">
//Indicates whether the request string contains the letter e
//var patt = new RegExp("e");
var patt = /e/; //It is also a regular expression
alert(patt);
var str = "abecd";
alert(patt.test(str));
</script>
</head>
<body>
</body>
</html>
getElementsByName() method
Returns a collection of objects with the specified name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementByName</title>
<script type="text/javascript">
function checkAll() {
//document.getElementByName() returns a collection of multiple label objects according to the specified name attribute query
//The operation of this collection is the same as that of the array. The label object is in the collection
//Each element in the collection is a dom object
//The order of elements in this collection is their order from top to bottom in the html page
var hobbies = document.getElementsByName("hobby");
//Checked indicates the selected status of the check box. If true is checked, false is unchecked
//This property is readable and writable
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
function checkNo() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
function checkReverse() {
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
if (hobbies[i].checked == false) {
hobbies[i].checked = true;
}
else {
hobbies[i].checked = false;
}
//You can also directly hobbies [i] checked = ! hobbies[i]. checked;
}
}
</script>
</head>
<body>
hobby:
<input type="checkbox" name="hobby" value="cpp"> C++
<input type="checkbox" name="hobby" value="java"> java
<input type="checkbox" name="hobby" value="js"> JavaScript
<br/>
<button onclick="checkAll();">Select all</button>
<button onclick="checkNo();">None</button>
<button onclick="checkReverse();">Reverse selection</button>
</body>
</html>
getElementsByTagName() method
Returns a collection of objects with the specified tag name.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
<script type="text/javascript">
//Select all
function checkAll() {
var hobbies = document.getElementsByTagName("input");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
}
</script>
</head>
<body>
hobby:
<input type="checkbox" value="cpp"> C++
<input type="checkbox" value="java"> java
<input type="checkbox" value="js"> JavaScript
<br/>
<button onclick="checkAll();">Select all</button>
</body>
</html>
Note: if the three query methods of document object have id attribute, getElementById() method is preferred to query. If there is no id attribute, the getElementsByName() method is preferred for query. If the id attribute and the Name attribute are not found, check the getElementsByTagName() method by tag;
For the above three methods, the code must be executed after the page is loaded before the tag object can be queried.
createElement() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>creatElement</title>
<script type="text/javascript">
window.onload = function() {
var divObj = document.createElement("div"); //In memory < div > < / div >
divObj.innerHTML = "I'm so handsome"; //Tag < div > I'm so handsome < / div > has been created, but it's still only in memory.
//Add child element
document.body.appendChild(divObj);
}
</script>
</head>
<body>
</body>
</html>
Common attributes and methods of nodes
What is a node?
A node is a label object.
Common methods:
getElementsByTagName() method to obtain the child node with the specified tag name of the current node.
appendChild(oChildNode) method can add a child node. oChildNode is the child node to be added.
Properties:
childNodes to obtain all child nodes of the current node
firstChild, get the first child node of the current node
lastChild to obtain the last child node of the current node
parentChild, get the parent node of the current node
nextSibling to get the next node of the current node
previousSibling to get the previous node of the current node
className, which is used to get or set the class attribute value of the label
innerHTML, which means to get / set the contents in the start tag and end tag
innerText, which means to get / set the text in the start tag and end tag