文章目錄
📢： ❤布小禅❤ 📢 作者專欄： ❤Python❤ ❤Java❤
身為一個合格的後端開發人員
前端的基礎知識也是需要了解的
DOM是文檔對象模型。
在我的了解裡，這個類似于css的選擇器。
你可以通過文法找到與之對應的标簽，并修改其中的内容。
當然，DOM不僅可以比對到HTML标簽，他也能比對到css的文法，并且可以修改。
可以通過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>
顯示效果：
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>
時間就是，單擊，輕按兩下，滑鼠懸停，等
而事件需要先注冊（綁定），才能進行操作
比如說我們可以對一個按鈕設定單擊後會怎麼樣之類的
事件分為靜态注冊和動态注冊
靜态注冊就是直接在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>
事件有很多，這裡隻講其中的部分以作了解
- 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> 興趣是最好的老師，堅持是不變的真理。
學習不要急躁，一步一個腳印，踏踏實實的往前走。
每天進步一點點，日積月累之下，你就會發現自己已經變得很厲害了。
我是布小禅，一枚自學萌新，跟着我每天進步一點點吧！