JS：15道经典DOM案例题，扩展知识，文末含图片素材，以后可能有分集版【诗书画唱】
案例:通过DOM切换图片的大小
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
//用getElementsByTagName标签选择器去选中input标签，
// 进而控制这“放大”，“缩小”这两个按钮
var inputShuZu=document.getElementsByTagName("input");
// inputShuZu[0]为下标为0的第一个按钮
inputShuZu[0].onclick=function(){
// 下面一行代码的意思是获取img标签的下标为0的内容
var imgShuZu=document.getElementsByTagName("img")[0];
var imgKuai=imgShuZu.width;
var imgGao=imgShuZu.height;
//用console（ 控制台）.log（记录）(imgKuai);来在控制台上调试
//可以用xxx.style.xxx设置图片的样式大小等
imgShuZu.style.width=(imgKuai+23)+"px";
imgShuZu.style.height=(imgGao+23)+"px";
}
// inputShuZu[1]为下标为1的第二个按钮
inputShuZu[1].onclick=function(){
var imgShuZu=document.getElementsByTagName("img")[0];
var imgKuai=imgShuZu.width;
var imgGao=imgShuZu.height;
if(imgKuai<=23||imgGao<=23){
//当宽小于23px或高小于23px时就不再缩小，
// 进而可以缩小后，放大到原来的大小，因为是加法，
// 所以只是变大不是等比放大缩小(+代码改为*,-改为/即可)
}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>
方法二：
扩展：
2.案例:获取页面中的一个按钮，获取按钮内容，通过增加按钮事件添加或修改文本框中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function wenBenKuang(){
var shuRu=prompt("请输入你要添加或修改文本框中的内容");
// 可以把img,p等标签看成一个或多个下标为0或其他的内容
// var p=document.getElementsByTagName("p")[0];
// var p1=document.getElementById("p1");
//innerHMTL，innerValue这两个都是操作内容的，
// 但是innerHTML操作的是双标签的内容
//innerValue操纵的是单标签的内容
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="点击我添加或修改文本框中的内容" 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";>点击我跳转到百度呀 ヾ(o◕∀◕)ﾉ</a>
</body>
</html>
4.案例:设置页面包含3个div，通过获取div后修改所有div的内容为”我爱学习”;
<!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("请输入要让框内的内容修改成输入的内容 ヾ(o◕∀◕)ﾉ");
//用for......of......遍历三个div分别赋值内容
for(var i of divShuZu){
// inner:内部
i.innerHTML=shuLu;
}
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<input type="button" value="点击我修改三个div内的内容 ヾ(o◕∀◕)ﾉ" />
</body>
</html>
5.案例:设置3个图片，增加一个按钮，点击按钮修改所有图片的内容和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来区分是哪个按钮
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案例:点击按钮修改多个文本框中的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function danJiFunction(){
var inputShuZu=document.getElementsByTagName("input");
//用标签选择器获取所有的input
var shuRu=prompt("请输入内容");
for(var i=1;i<inputShuZu.length;i++){
inputShuZu[i].value=shuRu;
}
}
</script>
</head>
<body>
<input type="button" value="点击我修改这三个文本框的值ヾ(o◕∀◕)ﾉ"
onclick="danJiFunction()" />
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
7案例:鼠标移动到每张图片显示图片的名字
<!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循环中为了表示当前图片可以使用this关键字
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案例:点击按钮修改自己的内容为”点我啊”,再点击一次修改为”叫你点你就点”
<!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="点我啊ヾ(o◕∀◕)ﾉ";
}else if(this.value=="点我啊ヾ(o◕∀◕)ﾉ"){
this.value="叫你点你就点ヾ(o◕∀◕)ﾉ";
}else{
//如果用this.value获取的当前对象的内容
// 是其他内容就会给按钮赋值为“大家好”
this.value="大家好ヾ(o◕∀◕)ﾉ";
}
}
}
</script>
</head>
<body>
<input type="button" value="大家好ヾ(o◕∀◕)ﾉ" />
</body>
</html>
9案例:鼠标移动到每个图片修改自身图片的宽和高
<!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案例:设置5个按钮,内容为”点我啊”，鼠标移动到每个按钮设置按钮的背景颜色为绿色，内容为“你被绿了“
<!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(){
//用标签选择器获取所有的按钮
var inputShuZu=document.getElementsByTagName("input");
for(var i of inputShuZu){
// 在js里，外层的循环对js事件（比如onmouseover，onmouseout）
//没影响，所以不可用i要用this
// 想表示当前对象就用this
i.onmouseover=function(){
this.style.backgroundColor="green";
this.value="你被绿了ヾ(o◕∀◕)ﾉ";
}
i.onmouseout=function(){
this.style.backgroundColor="blue";
this.value="点我啊";
}
}
}
</script>
</head>
<body>
<input type="button" value="点我啊" />
<input type="button" value="点我啊" />
<input type="button" value="点我啊" />
<input type="button" value="点我啊" />
<input type="button" value="点我啊" />
</body>
</html>
案例11设置4张图片，鼠标移动到那张图片，显示这张图片的内容，否则显示图片默认图片
<!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>
乱码就复制粘贴到另一个html界面，或关机后重启点脑。
案例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">给诗书画唱点赞ヾ(o◕∀◕)ﾉ
<input type="checkbox" name="hobby" id="hobby3"> 给诗书画唱投币ヾ(o◕∀◕)ﾉ
<br />
<input type="checkbox" name="hobby" id="hobby4"> 读书哦
<input type="checkbox" name="hobby" id="hobby5"> 给诗书画唱关注ヾ(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:声明下拉框和文本框或文本域，下拉框内容改变将下拉框的内容放入到文本框或文本域中
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
// diaoYongFunction调用函数
function diaoYongFunction(){
// suoYinXiaBiao索引下标
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 >点赞</option>
<option>投币</option>
<option >收藏</option>
<option >关注</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调用函数
function diaoYongFunction(){
// suoYinXiaBiao索引下标
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 >点赞</option>
<option>投币</option>
<option >收藏</option>
<option >关注</option>
</select>
</form>
<!--wenBenKuangID：文本框ID-->
<textarea value="" id="wenBenYuID"></textarea>
</body>
</html>
方法四（文本域版）：
扩展：
案例14:网页开关灯
<!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=="关灯ヾ(o◕∀◕)ﾉ"){
body.style.backgroundColor="black";
inputShuZu.value="开灯ヾ(o◕∀◕)ﾉ";
}else{
body.style.backgroundColor="white";
inputShuZu.value="关灯ヾ(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="关灯ヾ(o◕∀◕)ﾉ" />
</body>
</html>
关于video的扩展：
案例15:点击按钮设置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>
