js DOM（一）注册事件、修改标签属性和样式
1.DOM的概念
2.为元素注册事件
3.案例：点击按钮显示图片及设置宽高
4.案例：点击按钮设置p标签的文本内容
5.案例：点击按钮修改超链接的地址及热点文字
6.案例: 点击按钮设置多个p标签内容
7.案例：点击按钮修改图片的alt和title属性
8.案例: 点击按钮修改多个文本框的值
9.案例：点击图片修改自身的宽高
10.案例：按钮的排他功能
11.案例：点小图边大图
12.案例：点击按钮选择性别和兴趣
13.案例：下拉选择框
14.案例：文本域
15.案例：点击按钮设置div的样式
16.案例：点击按钮，显示或隐藏div
17.案例：通过类样式class设置div样式
18.案例：通过类样式class设置div显示或隐藏
19.点击div改变其背景色（随机）
1.DOM的概念 <--返回目录
* JavaScript分三部分
- ECMAScript标准:JS的基本语法
- DOM：Document object Model 文档对象模型--操作页面的元素
- BOM：Browser Object Model 浏览器对象模型--操作的是浏览器
* DOM文档对象模型--操作页面元素
- 文档document：把一个html文件看成一个文档，由于万物皆对象，所以把这个文档看成是一个对象
- 元素element：html页面的每个标签，都是一个元素，每个元素都可以看成一个对象
- 节点node：页面中所有的内容都是节点，标签，属性，文本
- 属性
2、为元素注册事件 <--返回目录
* 事件：就是一件事，有触发、响应、事件源
按钮被点击，弹出对话框
按钮-->事件源
点击-->事件名字
被点了-->触发了
弹框了-->响应
* 点击按钮，弹出对话框，代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="弹框" onclick="alert('哈哈哈~')"/>
</body>
</html>
* 点击按钮，弹出对话框，代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="弹框" id="btn" onclick="fun()"/>
<script type="text/javascript">
function fun(){
alert("嘎嘎嘎~");
}
</script>
</body>
</html>
* 点击按钮，弹出对话框，代码3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="弹框" id="btn"/>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
alert("呵呵呵~");
};
</script>
</body>
</html>
3、案例：点击按钮显示图片及设置宽高 <--返回目录
点击按钮显示图片, 点击按钮的时候设置img标签的src属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<img src="" id="imgId"/>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementById("imgId");
ele.src="a.jpg";
ele.width="300";//注意，img标签的width的值300没有单位px
ele.height="280";
};
</script>
</body>
</html>
4、案例：点击按钮设置p标签的文本内容 <--返回目录
凡是成对的标签，中间的文本内容，设置的时候，都使用innerText属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<p id="pId"></p>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementById("pId");
ele.innerText="文本";
};
</script>
</body>
</html>
5、案例：点击按钮修改超链接的地址及热点文字 <--返回目录
热点文字：即<a>热点文字</>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<a href="" id="aId"></a>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementById("aId");
ele.href="http://www.baidu.com"; //注意http不可以省略
ele.innerText="百度";
};
</script>
</body>
</html>
6、案例:点击按钮设置多个p标签内容 <--返回目录
如何获取某个div里面的所以p标签
var eles = document.getElementById("div1Id").getElementsByTagName("p");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="div1Id">
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>
<div id="div2Id">
<p>aaaa</p>
<p>bbbb</p>
<p>cccc</p>
</div>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var eles = document.getElementById("div1Id").getElementsByTagName("p");
for(var i=0;i<eles.length;i++){
eles[i].innerText="p标签文本";
}
};
</script>
</body>
</html>
7、案例：点击按钮修改图片的alt和title属性 <--返回目录
title:鼠标悬停在图片上时显示的信息
alt：图片挂了时显示的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<img src="a.jpg" width="300" height="280" />
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var ele = document.getElementsByTagName("img")[0];
ele.alt="图片挂了时的信息";
ele.title="标题";
};
</script>
</body>
</html>
8、案例:点击按钮修改多个文本框的值 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/><br/>
<input type="text"/><br/>
<input type="text"/><br/>
<input type="text"/>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
var eles = document.getElementsByTagName("input");
for(var i=0;i<eles.length;i++){
if(eles[i].type=="text"){
eles[i].value="文本框输入的值";
}else if(eles[i].type=="button"){
eles[i].value="我是个按钮"; }
}
};
</script>
</body>
</html>
9、案例：点击图片修改自身的宽高 <--返回目录
对绑定事件的元素自身进行修改，可以使用this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<img src="a.jpg" width="500px"/>
<script type="text/javascript">
var ele = document.getElementsByTagName("img")[0];
ele.onclick=function(){
this.width="300";//对绑定事件的元素自身进行修改，可以使用this
};
</script>
</body>
</html>
10、案例：按钮的排他功能 <--返回目录
需求：3个按钮，按钮的默认value值是没被点，点击按钮，该按钮value值为被点了；
点击另外一个按钮，该按钮value值为被点了，其他的value值变成默认值。
做两件事：第一、将所有按钮value值设置为"没被点"；第二、将当前点击的按钮的value值设置为"被点了"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" value="没被点" style="background-color: #ddd"/>
<input type="button" value="没被点" style="background-color: #ddd"/>
<input type="button" value="没被点" style="background-color: #ddd"/>
<script type="text/javascript">
var eles = document.getElementsByTagName("input");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){
//将所有按钮value值设置为"没被点"
for(var j=0;j<eles.length;j++){
eles[j].value="没被点";
eles[j].style="background-color:#ddd";
}
this.value="被点了";//注意：这里this不能用eles[i]，因为为所有按钮注册完事件后i=3了
this.style="background-color:red";
};
}
</script>
</body>
</html>
11、案例：点小图变大图 <--返回目录
<a href="a.jpg"><img src="a-small.jpg"></a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<a href="a.jpg" id="aId"><img src="a-small.jpg" id="imgId"></a>
<script type="text/javascript">
//点击图片标签，设置图片标签的src路径为超链接中大图的路径
document.getElementById("imgId").onclick=function(){
this.src=document.getElementById("aId").href;
//return false;//页面url不变
};
</script>
</body>
</html>
12、案例：点击按钮选择性别和兴趣 <--返回目录
document.getElementById().checked=true; //被选中
true可以用"checked"替换，但是浏览器也会把"checked"解析成true
13、案例：下拉选择框 <--返回目录
document.getElementById().selected=true; //被选中
14、案例：文本域 <--返回目录
* disabled="disabled"
* readonly="readonly"
* document.getElementById().value="哈哈";//推荐使用这种方法，改变文本域内容
* document.getElementById().innerText="呵呵";//也可以改变文本域内容
15、案例：点击按钮设置div的样式 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
<div id="divId"></div>
<script type="text/javascript">
document.getElementById("btn").onclick=function(){
document.getElementById("divId").style.width="200px";
document.getElementById("divId").style.height="200px";
//经验：css中background-color在js中写成backgroundColor
document.getElementById("divId").style.backgroundColor="hotpink";
//document.getElementById("divId").style="width:200px;height:200px;background-color:green";
};
</script>
</body>
</html>
16、案例：点击按钮，显示或隐藏div <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<input type="button" id="btn" value="显示" />
<div id="divId"></div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
var divEle = document.getElementById("divId");
if(this.value=="显示"){
divEle.style="width:200px;height:200px;background-color:green";
//divEle.style.display=true;
divEle.style.display="block";
this.value="隐藏";
}else if(this.value=="隐藏"){
divEle.style.display="none";
this.value="显示";
}
};
</script>
</body>
</html>
17、案例：通过类样式class设置div样式 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
.cls1{
width:200px;
height: 200px;
background-color: yellow;
}
.cls2{
width:300px;
height: 300px;
background-color: hotpink;
border:2px solid blue;
}
</style>
</head>
<body>
<input type="button" id="btn" value="按钮" />
<div id="divId" class="cls1"></div>
<script type="text/javascript">
var ele = document.getElementById("btn");
ele.onclick=function(){
document.getElementById("divId").className="cls2";
};
</script>
</body>
</html>
18、案例：通过类样式class设置div显示或隐藏 <--返回目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style type="text/css">
div{
width:200px;
height: 200px;
background-color: yellow;
}
.cls{
display: none;
}
</style>
</head>
<body>
<input type="button" id="btn" value="隐藏" />
<div id="divId" ></div>
<script type="text/javascript">
var ele = document.getElementById("btn");
var divEle = document.getElementById("divId");
ele.onclick=function(){
if(divEle.className != "cls"){//div为显示状态
this.value="显示";
divEle.className="cls";
}else{//div为隐藏状态
this.value="隐藏";
divEle.className="";
}
};
</script>
</body>
</html>
19.点击div改变其背景色（随机） <--返回目录
<!DOCTYPE html> <html> <head> <title>标题</title> <style type="text/css"> #box { background-color: #342; width: 200px; height: 200px; } </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> function getRandomStr(length) { if (!length) length = 1 const strArray = ['0', '1', '2', '3', '4', '5', '6' ,'7' ,'8', '9', 'a', 'b', 'c', 'd', 'e', 'f'] let str = '' for (let i = 0; i < length; i++) { str += strArray[parseInt(Math.random() * 16)] } return str } function randomColor(ele) { const color = '#' + getRandomStr(6) console.log(`color=${color}`) ele.style.backgroundColor = color } const ele = document.getElementById('box') ele.onclick = function() { randomColor(this) } </script> </html>
---
posted on 2020-01-12 21:09 wenbin_ouyang 阅读(1103) 评论(0) 收藏 举报
浙公网安备 33010602011771号