JavaScript Dom and events of front-end foundation 4

Posted by allaboutthekick on Mon, 10 Jan 2022 15:15:14 +0100

Digression

📢 Blog home page: ❤ Bu Xiaochan ❤
📢 Author column:
❤Python❤
❤Java❤

preface

As a qualified back-end developer

The basic knowledge of the front end also needs to be understood

1. JavaScriptDOM

DOM is the document object model.

In my understanding, this selector is similar to css.

You can find the corresponding tag through syntax and modify the content.

Of course, DOM can match not only HTML tags, but also css syntax, and can be modified.

1.1 DOM of HTML

HTML content can be changed by HTML id and tag name, which is different from css

js contains a method, document getElementById(); You can bind the tag with the id attribute

Then you can modify the HTML content through other functions

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="ate">
    ADA is dada, a soul mage
</p>
<a href="https://www.baidu.com" id="at">
    Baidu
</a>
<script>
    const ate = document.getElementById("ate");
    ate.innerHTML="adopt js Modify!!!!!!";
    let at = document.getElementById("at");
    at.href="https://blog.csdn.net/m0_52883898 "; / / modify attributes
    at.innerText="This can also be changed";
</script>
</body>
</html>

Display effect:

1.2 css DOM

js DOM can modify not only the content of HTML, but also css

The format is: document ElementsById("idName"). style. Style = XXX;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{
        collapse: red;
    }
</style>
<body>
<p id="ate">
    ADA is dada, a soul mage
</p>
<script>
    const ate = document.getElementById("ate");
    ate.innerHTML="adopt js Modify!!!!!!";
    ate.style.color="blue";
</script>
</body>
</html>

1.3 events

Time is, click, double click, mouse over, etc

Events need to be registered (bound) before they can be operated

For example, we can set what happens when a button is clicked

1.3.1 registration

Events are divided into static registration and dynamic registration

Static registration is to write js event functions directly in the attributes of HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="alert('Loading completed, thank you for waiting');">
<p>aaa</p>
</body>
</html>

Dynamic registration is to obtain DOM objects first, and then write functions

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="bu1">Please click</button>
<script>
    let bu1=document.getElementById('bu1');
    bu1.onclick=function (){
        alert("Let you order, you order, ha ha");
    }
</script>
</body>
</html>

1.3.2 events

There are many events. Here we will only talk about some of them for understanding

onload event: executed after the page is loaded
onclick event: execute after clicking
onmouseover event: execute after hovering over the destination
onchange event: execute after leaving the input box

onload event instance

After the html file is loaded on the page, the onload code will be executed first, and then the paragraphs will be displayed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="alert('Loading completed, thank you for waiting');">
<p>aaa</p>
</body>
</html>

onclick event

After clicking the button, the following function will be executed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="bu1">Please click</button>
<script>
    let bu1=document.getElementById('bu1');
    bu1.onclick=function (){
        alert("Let you order, you order, ha ha");
    }
</script>
</body>
</html>

onmoseover will execute when the mouse moves over

Will turn me into thank you

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p id="rete">Please spoil me</p>
<script>
  let rete=document.getElementById('rete');
  rete1=function (){
    rete.innerText="Thank you for your favor";
  }
  rete.onmousemove=rete1;
</script>
</body>
</html>

onchange event

After your input is complete, your input will be changed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label>
  account number:<input id="input1" type="text">
  password:<input id="input2" type="password">
</label>
<script>
  const input1=document.getElementById('input1');
  const input2=document.getElementById('input1');
  inputChange = function (){
    input1.value="Forcibly changed the account";
    input2.value="Forced password change";
  }
  input1.onchange=inputChange;
  input2.onchange=inputChange;
</script>
</body>
</html>

epilogue

Interest is the best teacher, and persistence is the invariable truth.
Learn not to be impatient, step by step, and move forward steadily.
Make a little progress every day. Over time, you will find that you have become very powerful.

I am Bu Xiaochan, a self-taught sprouting new, follow me to make progress a little every day!

Topics: Front-end

Programmer Think