JS：15道經(jīng)典DOM案例題，擴(kuò)展知識，文末含圖片素材，以后可能有分集版【詩書畫唱】
案例:通過DOM切換圖片的大小
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
//用getElementsByTagName標(biāo)簽選擇器去選中input標(biāo)簽，
// 進(jìn)而控制這“放大”，“縮小”這兩個按鈕
var inputShuZu=document.getElementsByTagName("input");
// inputShuZu[0]為下標(biāo)為0的第一個按鈕
inputShuZu[0].onclick=function(){
// 下面一行代碼的意思是獲取img標(biāo)簽的下標(biāo)為0的內(nèi)容
var imgShuZu=document.getElementsByTagName("img")[0];
var imgKuai=imgShuZu.width;
var imgGao=imgShuZu.height;
//用console（ 控制臺）.log（記錄）(imgKuai);來在控制臺上調(diào)試
//可以用xxx.style.xxx設(shè)置圖片的樣式大小等
imgShuZu.style.width=(imgKuai+23)+"px";
imgShuZu.style.height=(imgGao+23)+"px";
}
// inputShuZu[1]為下標(biāo)為1的第二個按鈕
inputShuZu[1].onclick=function(){
var imgShuZu=document.getElementsByTagName("img")[0];
var imgKuai=imgShuZu.width;
var imgGao=imgShuZu.height;
if(imgKuai<=23||imgGao<=23){
//當(dāng)寬小于23px或高小于23px時就不再縮小，
// 進(jìn)而可以縮小后，放大到原來的大小，因?yàn)槭羌臃ǎ?/p>
// 所以只是變大不是等比放大縮小(+代碼改為*,-改為/即可)
}else{
imgShuZu.style.width=(imgKuai-23)+"px";
imgShuZu.style.height=(imgGao-23)+"px";
}
}
}
</script>
</head>
<body>
<img src="img/三連.jpg" width="400px" height="100px" />
<br />
<input type="button" value="放大" />
<input type="button" value="縮小" />
</body>
</html>
方法二：
擴(kuò)展：
2.案例:獲取頁面中的一個按鈕，獲取按鈕內(nèi)容，通過增加按鈕事件添加或修改文本框中的內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function wenBenKuang(){
var shuRu=prompt("請輸入你要添加或修改文本框中的內(nèi)容");
// 可以把img,p等標(biāo)簽看成一個或多個下標(biāo)為0或其他的內(nèi)容
// var p=document.getElementsByTagName("p")[0];
// var p1=document.getElementById("p1");
? ? ? ? ? ? ? ? ? ? ?//innerHMTL，innerValue這兩個都是操作內(nèi)容的，
//? ? ? ? ? ? ? ? ? ?但是innerHTML操作的是雙標(biāo)簽的內(nèi)容
//innerValue操縱的是單標(biāo)簽的內(nèi)容
var wenBen=document.getElementById("wenBenid");
wenBen.value=shuRu;
// p1.value=v;
}
</script>
</head>
<body>
<!--<p id="p1">詩書畫唱</p>-->
<p >詩書畫唱</p>
<input type="text" id="wenBenid" />
<input type="button" value="點(diǎn)擊我添加或修改文本框中的內(nèi)容" onclick="wenBenKuang()" />
</body>
</html>
3.案例:獲取頁面上的一個超鏈接，通過獲取按鈕和超鏈接，增加事件修改超鏈接的地址為http://www.baidu.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var aVar=document.getElementsByTagName("a")[0];
aVar.href="http://www.baidu.com";
}
</script>
</head>
<body>
<a href="https://space.bilibili.com/434918741";>點(diǎn)擊我跳轉(zhuǎn)到百度呀 ヾ(o???)?</a>
</body>
</html>
4.案例:設(shè)置頁面包含3個div，通過獲取div后修改所有div的內(nèi)容為”我愛學(xué)習(xí)”;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px; height: 200px; border: 2px solid? blue;float: left;margin-left: 23px;
}
</style>
<script>
window.onload=function(){
var anNiuTag=document.getElementsByTagName("input")[0];
anNiuTag.onclick=function(){
var divShuZu=document.getElementsByTagName("div");
var shuLu=prompt("請輸入要讓框內(nèi)的內(nèi)容修改成輸入的內(nèi)容 ヾ(o???)?");
//用for......of......遍歷三個div分別賦值內(nèi)容
for(var i of divShuZu){
// inner:內(nèi)部
i.innerHTML=shuLu;
}
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<input type="button" value="點(diǎn)擊我修改三個div內(nèi)的內(nèi)容 ヾ(o???)?" />
</body>
</html>
5.案例:設(shè)置3個圖片，增加一個按鈕，點(diǎn)擊按鈕修改所有圖片的內(nèi)容和alt屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width: 200px; height: 200px;
}
</style>
<script>
window.onload=function(){
//用getElementsByTagName("input");獲取所有的按鈕
var anNiuShuZu=document.getElementsByTagName("input");
//用getElementsByTagName("img")[0];獲取圖片
var imgShuZu=document.getElementsByTagName("img")[0];
for(var i of anNiuShuZu){
i.onclick=function(){
// 用this.value來區(qū)分是哪個按鈕
if(this.value=="艾爾文"){
// 有時候src中寫的是./img/1.jpg有時候是../img/1.jpg
imgShuZu.src="./img/1.jpg";
}else if(this.value=="艾倫"){
imgShuZu.src="./img/2.jpg";
}else if(this.value=="利威爾"){
imgShuZu.src="./img/3.jpg";
}
}
}
}
</script>
</head>
<body>
<img src="img/1.jpg" />
<input type="button" value="艾爾文" />
<input type="button" value="艾倫" />
<input type="button" value="利威爾" />
</body>
</html>
6案例:點(diǎn)擊按鈕修改多個文本框中的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function danJiFunction(){
var inputShuZu=document.getElementsByTagName("input");
//用標(biāo)簽選擇器獲取所有的input
var shuRu=prompt("請輸入內(nèi)容");
for(var i=1;i<inputShuZu.length;i++){
inputShuZu[i].value=shuRu;
}
}
</script>
</head>
<body>
<input type="button" value="點(diǎn)擊我修改這三個文本框的值ヾ(o???)?"?
onclick="danJiFunction()" />
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
7案例:鼠標(biāo)移動到每張圖片顯示圖片的名字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width: 100px;height: 100px;
}
</style>
<script>
window.onload=function(){
var imgShuZu=document.getElementsByTagName("img");
for(var i of imgShuZu){
i.onmouseover=function(){
//再for循環(huán)中為了表示當(dāng)前圖片可以使用this關(guān)鍵字
alert(this.title);
}
}
}
</script>
</head>
<body>
<img src="img/1.jpg" title="艾爾文" />
<img src="img/2.jpg" title="艾倫" />
<img src="img/3.jpg" title="利威爾" />
</body>
</html>
8案例:點(diǎn)擊按鈕修改自己的內(nèi)容為”點(diǎn)我啊”,再點(diǎn)擊一次修改為”叫你點(diǎn)你就點(diǎn)”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
//用getElementsByTagName獲取按鈕
var anNiu=document.getElementsByTagName("input")[0];
anNiu.onclick=function(){
if(this.value=="大家好ヾ(o???)?"){
this.value="點(diǎn)我啊ヾ(o???)?";
}else if(this.value=="點(diǎn)我啊ヾ(o???)?"){
this.value="叫你點(diǎn)你就點(diǎn)ヾ(o???)?";
}else{
//如果用this.value獲取的當(dāng)前對象的內(nèi)容
// 是其他內(nèi)容就會給按鈕賦值為“大家好”
this.value="大家好ヾ(o???)?";
}
}
}
</script>
</head>
<body>
<input type="button" value="大家好ヾ(o???)?" />
</body>
</html>
9案例:鼠標(biāo)移動到每個圖片修改自身圖片的寬和高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width: 100px;height: 100px;
}
</style>
<script>
window.onload=function(){
var imgShuZu=document.getElementsByTagName("img");
for(var i of imgShuZu){
i.onmouseover=function(){
this.style.width="120px";
this.style.height="120px";
}
i.onmouseout=function(){
this.style.width="100px";
this.style.height="100px";
}
}
}
</script>
</head>
<body>
<img src="./img/1.jpg" />
<img src="./img/2.jpg" />
<img src="./img/3.jpg" />
</body>
</html>
10案例:設(shè)置5個按鈕,內(nèi)容為”點(diǎn)我啊”，鼠標(biāo)移動到每個按鈕設(shè)置按鈕的背景顏色為綠色，內(nèi)容為“你被綠了“
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input{
background-color: blue; border: 1px solid gray;margin-left: 20px;
}
</style>
<script>
window.onload=function(){
//用標(biāo)簽選擇器獲取所有的按鈕
var inputShuZu=document.getElementsByTagName("input");
for(var i of inputShuZu){
// 在js里，外層的循環(huán)對js事件（比如onmouseover，onmouseout）
//沒影響，所以不可用i要用this
// 想表示當(dāng)前對象就用this
i.onmouseover=function(){
this.style.backgroundColor="green";
this.value="你被綠了ヾ(o???)?";
}
i.onmouseout=function(){
this.style.backgroundColor="blue";
this.value="點(diǎn)我啊";
}
}
}
</script>
</head>
<body>
<input type="button" value="點(diǎn)我啊" />
<input type="button" value="點(diǎn)我啊" />
<input type="button" value="點(diǎn)我啊" />
<input type="button" value="點(diǎn)我啊" />
<input type="button" value="點(diǎn)我啊" />
</body>
</html>
案例11設(shè)置4張圖片，鼠標(biāo)移動到那張圖片，顯示這張圖片的內(nèi)容，否則顯示圖片默認(rèn)圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
width: 100px;height: 100px;
}
</style>
<script>
window.onload=function(){
var imgShuZu=document.getElementsByTagName("img");
imgShuZu[0].onmouseover=function(){
document.getElementsByTagName("img")[0].src="./img/1.jpg";
}
imgShuZu[1].onmouseover=function(){
document.getElementsByTagName("img")[1].src="./img/2.jpg";
}
imgShuZu[2].onmouseover=function(){
document.getElementsByTagName("img")[2].src="./img/3.jpg";
}
imgShuZu[3].onmouseover=function(){
document.getElementsByTagName("img")[3].src="./img/4.png";
}
imgShuZu[0].onmouseout=function(){
this.src="img/三連.jpg";
}
imgShuZu[1].onmouseout=function(){
this.src="img/三連.jpg";
}
imgShuZu[2].onmouseout=function(){
this.src="img/三連.jpg";
}
imgShuZu[3].onmouseout=function(){
this.src="img/三連.jpg";
}
}
</script>
</head>
<body>
<img src="img/三連.jpg" >
<img src="img/三連.jpg">
<img src="img/三連.jpg">
<img src="img/三連.jpg">
</body>
</html>
亂碼就復(fù)制粘貼到另一個html界面，或關(guān)機(jī)后重啟點(diǎn)腦。
案例12:選擇愛好，包含全選的全不選效果，由序號選愛好
方法一：
<!DOCTYPE html>
<html>
<head>
? ? <title></title>
? ? <script >
? ? function checkall(){
? ? ? ? var hobby = document.getElementsByTagName("input");
? ? ? ? for(var i = 0;i<hobby.length;i++){
? ? ? ? ? ? if(hobby[i].type == "checkbox"){
? ? ? ? ? ? ? ? hobby[i].checked = true;
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? function clearall(){
? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? for(var i = 0;i<hobby.length;i++){
? ? ? ? ? ? hobby[i].checked = false;
? ? ? ? }
? ? }
? ? function checkone(){
? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? for(var i = 0;i<hobby.length;i++){
? ? ? ? ? ? hobby[i].checked = false;
? ? ? ? }
? ? ? ? var j=document.getElementById("wb").value;
? ? ? ? hobby[j-1].checked = true;
? ? }
</script>
</head>
<body>
? ??
<!--請選擇你愛好:-->
Please choose your hobbies:<br>
? ? <input type="checkbox" name="hobby" id="hobby1"> music
? ? <input type="checkbox" name="hobby" id="hobby2">? climd moutsins
? ? <input type="checkbox" name="hobby" id="hobby3"> swim
? ? <input type="checkbox" name="hobby" id="hobby4">? read
? ? <input type="checkbox" name="hobby" id="hobby5"> play baseball
? ? <input type="checkbox" name="hobby" id="hobby6">? run <br>
? ?<!--全選-->
? ? <input type="button" value = "Select all" onclick = "checkall();">
? ?<!-- 全不選-->
? ? <input type="button" value = "No choice" onclick = "clearall();">
? ? <!--請輸入您要選擇愛好的序號，序號為1-6:-->
? ? <p>Please enter the serial number of the hobby you want to choose. The serial number is 1-6:</p>
?<!--? ?wb：文本-->
? ? <input id="wb" name="wb" type="text" >
? ? <input name="ok" type="button" value="sure" onclick = "checkone();">
</body>
</html>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
? ? <title></title>
? ? <script >
? ?
//? 選擇所有
? ? function xuanZeSuoYou(){
? ? ? ? var hobby = document.getElementsByTagName("input");
? ? ? ? for(var i = 0;i<hobby.length;i++){
? ? ? ? ? ? if(hobby[i].type == "checkbox"){
? ? ? ? ? ? ? ? hobby[i].checked = true;
? ? ? ? ? ? }
? ? ? ? }
? ? }
//? 清空所有
? ? function qingKongSuoYou(){
? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? for(var i = 0;i<hobby.length;i++){
? ? ? ? ? ? hobby[i].checked = false;
? ? ? ? }
? ? }
//? 選擇單個
? ? function xuanZeDanGe(){
? ? ? ? var hobby = document.getElementsByName("hobby");
? ? ? ? for(var i = 0;i<hobby.length;i++){
? ? ? ? ? ? hobby[i].checked = false;
? ? ? ? }
? ? ? ? var j=document.getElementById("wb").value;
? ? ? ? hobby[j-1].checked = true;
? ? }
</script>
</head>
<body>
請選擇您的愛好ヾ(o???)?：<br>
? ? <input type="checkbox" name="hobby" id="hobby1">聽音樂喲
? ? <input type="checkbox" name="hobby" id="hobby2">給詩書畫唱點(diǎn)贊ヾ(o???)?
? ? <input type="checkbox" name="hobby" id="hobby3"> 給詩書畫唱投幣ヾ(o???)?
? ? <br />
? ? <input type="checkbox" name="hobby" id="hobby4">? 讀書哦
? ? <input type="checkbox" name="hobby" id="hobby5"> 給詩書畫唱關(guān)注ヾ(o???)?
? ? <input type="checkbox" name="hobby" id="hobby6">? 跑步呀 <br>
??
? ? <input type="button" value = "全選" onclick = "xuanZeSuoYou();">
??
? ? <input type="button" value = "全不選" onclick = "qingKongSuoYou();">
? ??
? ? <p>請輸入您要選擇的愛好的序列號ヾ(o???)?。序列號是1-6：</p>
?
? ? <input id="wb" name="wb" type="text" >
? ? <input name="ok" type="button" value="確定" onclick = "xuanZeDanGe();">
</body>
</html>
案例13:聲明下拉框和文本框或文本域，下拉框內(nèi)容改變將下拉框的內(nèi)容放入到文本框或文本域中
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// diaoYongFunction調(diào)用函數(shù)
function diaoYongFunction(){
// suoYinXiaBiao索引下標(biāo)
var suoYinXiaBiao=document.getElementById("xiaLaKuangID").selectedIndex;
var y=document.getElementById("xiaLaKuangID").options;
document.getElementById("wenBenKuangID").value=y[suoYinXiaBiao].text;
}
</script>
</head>
<body>
<form>
給詩書畫唱:
<select id="xiaLaKuangID"onclick="diaoYongFunction()">
<option >點(diǎn)贊</option>
<option>投幣</option>
<option >收藏</option>
<option >關(guān)注</option>
</select>
</form>
<!--wenBenKuangID：文本框ID-->
<input type="text" value="" id="wenBenKuangID">
</body>
</html>
方法二（效果一樣）：
方法三（文本域版）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// diaoYongFunction調(diào)用函數(shù)
function diaoYongFunction(){
// suoYinXiaBiao索引下標(biāo)
var suoYinXiaBiao=document.getElementById("xiaLaKuangID").selectedIndex;
var y=document.getElementById("xiaLaKuangID").options;
document.getElementById("wenBenYuID").value=y[suoYinXiaBiao].text;
}
</script>
</head>
<body>
<form>
給詩書畫唱:
<select id="xiaLaKuangID"onchange="diaoYongFunction()">
<option >點(diǎn)贊</option>
<option>投幣</option>
<option >收藏</option>
<option >關(guān)注</option>
</select>
</form>
<!--wenBenKuangID：文本框ID-->
<textarea value="" id="wenBenYuID"></textarea>
</body>
</html>
方法四（文本域版）：
擴(kuò)展：
案例14:網(wǎng)頁開關(guān)燈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var inputShuZu=document.getElementsByTagName("input")[0];
inputShuZu.onclick=function(){
var body=document.getElementsByTagName("body")[0];
if(this.value=="關(guān)燈ヾ(o???)?"){
body.style.backgroundColor="black";
inputShuZu.value="開燈ヾ(o???)?";
}else{
body.style.backgroundColor="white";
inputShuZu.value="關(guān)燈ヾ(o???)?";
}
}
}
</script>
</head>
<body>
<video src="img/1.mp4"? autoplay="autoplay" loop="loop"? controls="controls"
style="width: 470px;height:320px;"> </video>
<!--<video src="img/1.mp4" autoplay="autoplay" width="300px" height="200px"?
controls="controls" width="300px" height="200px" controls="controls"></video>-->
<br />
<input type="button" value="關(guān)燈ヾ(o???)?" />
</body>
</html>
關(guān)于video的擴(kuò)展：
案例15:點(diǎn)擊按鈕設(shè)置div的顯示的隱藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 233px;height: 233px;background-color: blue;
}
</style>
<script>
window.onload=function(){
var anNiuVar=document.getElementById("anNiuid");
anNiuVar.onclick=function(){
var divSeKuaiShuZu=document.getElementsByTagName("div");
if(anNiuVar.value=="隱藏ヾ(o???)?"){
divSeKuaiShuZu[0].style.display="none";
anNiuVar.value="顯示ヾ(o???)?";
}else{
divSeKuaiShuZu[0].style.display="block";
anNiuVar.value="隱藏ヾ(o???)?";
}
}
}
</script>
</head>
<body>
<div>
</div>
<br />
<input type="button" value="隱藏ヾ(o???)?" id="anNiuid" />
</body>
</html>
