題外話

📢 博客主頁：?布小禪?
📢 作者專欄：
?Python?
?Java?

前言

身為一個合格的后端開發人員

前端的基礎知識也是需要了解的

1. JavaScriptDOM

DOM是檔案物件模型，

在我的理解里，這個類似于css的選擇器，

你可以通過語法找到與之對應的標簽，并修改其中的內容，

當然，DOM不僅可以匹配到HTML標簽，他也能匹配到css的語法，并且可以修改，

1.1 HTML的DOM

可以通過HTML的id和標簽名改變HTML內容，與css只能改變樣式不同

js的含有一個方法，document.getElementById();可以系結擁有該id屬性的標簽

然后可以通過別的函式來修改HTML的內容

代碼：

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

<body>
<p id="ate">
    阿達是大大大是靈魂法師法哦
</p>
<a href="https://www.baidu.com" id="at">
    百度
</a>
<script>
    const ate = document.getElementById("ate");
    ate.innerHTML="通過js修改！！！！！！";
    let at = document.getElementById("at");
    at.href="https://blog.csdn.net/m0_52883898";  // 修改屬性
    at.innerText="這也可以改";
</script>
</body>
</html>

顯示效果：

1.2 css的DOM

js的DOM不僅可以修改HTML的內容，還能修改css

格式就是：document.ElementsById("idName").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">
    阿達是大大大是靈魂法師法哦
</p>
<script>
    const ate = document.getElementById("ate");
    ate.innerHTML="通過js修改！！！！！！";
    ate.style.color="blue";
</script>
</body>
</html>

1.3 事件

時間就是，單擊，雙擊，滑鼠懸停，等

而事件需要先注冊（系結），才能進行操作

比如說我們可以對一個按鈕設定單擊后會怎么樣之類的

1.3.1 注冊

事件分為靜態注冊和動態注冊

靜態注冊就是直接在HTML代碼的屬性中寫js的事件函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="alert('加載完成，感謝等待');">
<p>aaa</p>
</body>
</html>

而動態注冊就是先通過獲取DOM物件，然后再撰寫函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="bu1">請點擊</button>
<script>
    let bu1=document.getElementById('bu1');
    bu1.onclick=function (){
        alert("讓你點你就點啊，哈哈");
    }
</script>
</body>
</html>

1.3.2 事件

事件有很多，這里只講其中的部分以作了解

onload事件：頁面加載完成后執行
onclick事件：單擊后執行
onmouseover事件：滑鼠懸停至目的地后執行
onchange事件：離開輸入框后執行

onload事件實體

會在頁面加載完html檔案后，先執行onload代碼，再顯示段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="alert('加載完成，感謝等待');">
<p>aaa</p>
</body>
</html>

onclick事件

在點擊按鈕后，會執行下面的函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="bu1">請點擊</button>
<script>
    let bu1=document.getElementById('bu1');
    bu1.onclick=function (){
        alert("讓你點你就點啊，哈哈");
    }
</script>
</body>
</html>

onmoseover滑鼠移過去后會執行

會將請寵幸我變為謝謝寵幸

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

<body>
<p id="rete">請寵幸我</p>
<script>
  let rete=document.getElementById('rete');
  rete1=function (){
    rete.innerText="謝謝寵幸";
  }
  rete.onmousemove=rete1;
</script>
</body>
</html>

onchange事件

在你輸入完成后，會將你的輸入更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label>
  賬號：<input id="input1" type="text">
  密碼：<input id="input2" type="password">
</label>
<script>
  const input1=document.getElementById('input1');
  const input2=document.getElementById('input1');
  inputChange = function (){
    input1.value="強行更改了賬號";
    input2.value="強行更改了密碼";
  }
  input1.onchange=inputChange;
  input2.onchange=inputChange;
</script>
</body>
</html>