Hello! Hello, everyone, let's meet again ~ next, let's learn today's little knowledge~
I How to get HTML elements in JS?
Detailed explanation:
1. Through the id attribute in the tag
document.getElementById();
eg:
<1>. First, let's define a button and div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 50px;
background: skyblue;
display: inline-block;
}
</style>
</head>
<body>
<button>change color</button>
<div id="d1" ></div>
</body>
</html><2>. Then write a script check in the body, and then write a function in the script check
<script>
function f(){
//Element standard inspection
//id selector
var d= document.getElementById("d1")
d.style.background="yellow";
//There is also a direct use of id (although it is more convenient to use id directly, it cannot be used in some lower versions, so it is safer to use id selector)
// d1.style.background="pink";
}
</script><3>. Then write a call in the button
<body> <button onclick="f()">change color</button> <div id="d1" ></div> </body>
2. By tag name
document.getElementsByTagName();
This is the general method of use:
<body>
<button onclick="f1()">change color</button>
<div id="d2"></div>
<script>
function f1(){
//The standard check selector will take out multiple elements
var ds=document.getElementsByTagName("div");
//Cannot set properties of undefined(setting 'background')
//Cannot set attribute from undefined (error reported when setting 'background')
//foreach
for(let i of ds){
//i is every element
i.style.background="purple";
}
}
</script>
</body>
3. Pass the class attribute in standard inspection
document.getElementsByClassName();
<1>. First, define a div in the body and give it a class name
<div id="d1" class="a"></div> <div id="d2" class="a"></div>
<2>. Then write a function in the script standard check
function f2(){
//Class selector
//In the selector, because class is a keyword, class is generally called ClassName
var s=document.getElementsByClassName("a")
for( var i of s){
i.style.background="red";
}
}<3>. Finally, define a button to call that function
<button onclick="f2()">change color</button>
4. Use the name attribute in the tag
document.getElementsByName();
II Common events on HTML elements
| onclick | Click event |
|---|---|
| ondblclick | Double click event |
| onfocus | Get focus event |
| onblur | Loss of focus event |
| onmouseover | Mouse in |
| onmouseout | Mouse out |
1.eg: (get focus event and lose focus event)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Class code 04</title>
</head>
<body>
<!-- <input type="text" onfocus="" onblur=""> -->
<!-- value It can only be used in the input box and which can only be used value The value of the property -->
<!-- style:In standard inspection style attribute -->
<!-- How to assign values to elements -->
<!-- Why not report an error when traversing an element -->
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<button onclick="ff('hey')">hey</button>
<button onclick="ff('Cough')">Cough</button>
<script>
function ff(a){
//Get value
var d=document.getElementsByTagName("input");
//Traversal element
for(let i of d){
i.value=a;
}
}
//Find all the input boxes in the page
//Assign values to all input boxes (lose focus event, get focus event)
(()=>{ //Anonymous function
var d1=document.getElementsByTagName("input");
//Whenever you encounter a foreach loop, you can't use let (defining local variables) with var
for(let i of d1){
//Assign a value to the get focus event of the element
i.onfocus=()=>{ i.value="" };
//Assign a value to the loss of focus event of the element
i.onblur=()=>{ i.value="You eat baba"};
}
})();
</script>
</body>
</html>
III Common attributes on HTML elements
| textContent | Text content of the label (the defined label does not take effect) |
|---|---|
| innerHTML | html content in the tag (the tag will take effect) |
| value | Value of element (applicable to elements with value attribute) |
| checked | Whether it is selected (applicable to radio and multiple boxes) |
| style | Style attribute in label (used to set style) |
IV Controls the display of elements
| none | Don't display (no space on the page) |
|---|---|
| block | Display as block elements |
| inline | Display as inline elements |
| inline-block | Display in line blocks |
Approximate usage:
<script>
function c(){
//Show if hidden
if(d5.style.display==="none"){
d5.style.display="block";
}else{//If displayed, then hidden
d5.style.display="none";
}
}
</script>
| visible | so |
|---|---|
| hidden | Invisible (takes up page space) |
| Value between 0 and 1 |
|---|
| Controls the transparency of elements |
eg:
function c1(){
//If the transparency is 0, set it to 1. 0 is transparent and 1 is opaque
if(d5.style.opacity==0){
d5.style.opacity=1;
}else{//If displayed, then hidden
d5.style.opacity=0;
}
}V Case: (realize the function of select all button in the table)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Case 1</title>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" onclick="n(this.checked)"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td>
</tr>
</table>
<script>
//checked checks whether it is currently selected
function n(zt){
//Receive current status
var is=document.getElementsByTagName("input");
//Get all the multiple selection boxes
//Status of multiple selection boxes: take the first box as the standard
for(let i of is){
//i is each multiple selection box
i.checked=zt;
}
}
</script>
</body>
</html>
Vi Use js to make automatic picture switching effect
<1>. Import three pictures named A0 jpg; a1.jpg; a2.jpg
<2>. Then look at the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 400px;
background: url(images/a0.jpg) ;
}
</style>
</head>
<body>
<div id="d1"></div>
<img id="m1" src="images/a0.jpg" width="300px">
<button onclick="f1()">Click me to update the picture</button>
<script>
var b=1;
setInterval(()=>{
d1.style.backgroundImage='url("images/a'+(b%3)+'.jpg")'
b++;
},1000);
function f1(){
m1.src="images/a1.jpg";
}
</script>
</body>
</html>
Well, this is the end of our small class today ~ it will be more and more wonderful next time! By the way, it's realistic and firm to send you a word: every road is difficult to walk, but once you choose, you must go on, come on! Family members, I look forward to you and our transformation in the future!