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 阅读(1064) 评论(0) 编辑 收藏 举报