Table of contents
Get/modify form element attributes
What is WebAPI
WebAPI is a function provided by the browser to js. At the same time, if the browser is different, the behavior of the api will be different.
WebAPI can be divided into DOM API (operation page structure) and BOM API (operation browser)
DOM API
DOM is the Document Object Model:
Associating each tag of HTML with JS, what the tag displays can be perceived through the JS object, and modifying properties through the JS object can directly affect the display of the tag.
DMO tree
The structure of a page is a tree structure called DOM tree
DOM tree:
Select page elements:
querySelector()
We need to know: all dom apis are expanded through the document object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dom api</title>
</head>
<body>
<div class="box">abc</div>
<div id="id">def</div>
<h3>
<span>
<input type="text">
</span>
</h3>
<script>
let elem1=document.querySelector('.box');
console.log(elem1);
console.dir(elem1);
let elem2=document.querySelector('#id');
console.log(elem2);
let elem3=document.querySelector('h3>span>input');
console.log(elem3);
</script>
</body>
</html>
When using queryselector() to select elements, if you need to select multiple elements, you can use queryselectorAll().
The result printed using queryselectorAll() is in the form of an array:
Click to open the detailed attributes and other information.
event
First we need to know what is an event:
Simply put, events refer to some responses to user operations, such as mouse clicks, mouse double clicks, browser window adjustments, and other actions. The code needs to respond to events accordingly.
Three elements of an event:
1. Event source: which element generates the event
2. Event type: click, double click, move, keyboard press...
3. Event handler: which code to execute after the event occurs (set in advance)
Let me give you a simple example: as soon as you get home, you see your girlfriend looking unhappy. You just wonder if your girlfriend encountered the unhappy days every month, so she decided to make a glass of brown sugar water
In this example:
Event Source: Girlfriend
Event Type: Poor looking
Event handler: flush brown sugar water.
This is the event.
In the front-end page, there must be different processing methods for different events (set at the beginning (event binding))
This anonymous function is equivalent to a callback function. This function does not need to be called manually by us, but is automatically called by the browser when appropriate.
get/modify element content
Get the element first, use the innerHTML attribute to get the content in the element, modifying this attribute will affect the display of the page.
After clicking abc once, add a b and modify it and print it out.
Get/modify element attributes
The attributes of the obtained elements can be obtained directly through code, or the attributes can be directly modified.
For example, a picture, we can click to convert it to another picture (this is used to modify the src attribute)
Get/modify form element attributes
The following attributes of the form (mainly the input tag) can be modified through DOM
value: the value of the input.
disabled: disabled
checked: the check box will use
selected: the drop-down box will use
type: the type of input (text, password, button, file, etc.)
A single label has no content, such as input is a single label, There is no content, and innerHTML is the content in the obtained tag.
Let's write a simple example:
Put a number in the input, and the value of this number will be +1 every time you click.
Here we need to pay attention, one click will directly add a 1 to the back, this is because the value is a string type, so we need to use parseInt() to convert it to an int type.
That's it.
An example: password display toggle
At the same time, we can modify the type attribute to solve the problem of password display switching.
Get/modify style properties
1. Modify the inline style (modify the value of the style attribute)
If we want to achieve a click that will enlarge the font, we need to modify the value of style. (When modifying, it should be noted that the font size of 20px is also a string, so it needs to be converted to an integer and enlarged)
Each click increases by 10px.
2. Modify the css class name of the element application
Here we write an example of switching night mode
Day mode:
Night mode:
The above operations are based on the existing elements on the current page, and we can also create and delete elements ourselves.
new element
Adding elements is divided into two steps:
1. Create an element
2. Put this element into the dom tree
For example, to add an input element:
This is to add one element, we can also add multiple elements, such as adding 33, 44, 55, 66, 77, 88, 99 after 11, 22
delete element
Use removeChild to remove child nodes
For example, in the example above, we want to delete the element 33
