本文主要是介绍DOM【事件、操作节点、DOM案例】--学习JavaEE的day49，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
day49
JS核心技术
DOM
继day48
事件
键盘事件
监听器：onkeydown、onkeypress、onkeyup
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"/><script type="text/javascript">function myDown(){//键盘按下事件console.log("down");}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的console.log("press");}function myUp(){//键盘松开事件console.log("up");} </script></body>
</html>
运行：注意Tab只触发了一个事件，回车与其他功能键不同
案例
设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数。
注：键盘按下字母为小写，松开字母变为大写，可见我们设置的监听器onkeyup
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeyup="myUp(this)"/><script type="text/javascript">function myUp(obj){//获取value属性var v = obj.value;//转大写v = v.toUpperCase();//设置value属性obj.value = v;} </script></body>
</html>
鼠标事件
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/波多野结衣.jpg" width="100px" height="100px"onmousedown="myDown()"onmouseup="myUp()"onmousemove="myMove()"onmouseover="myOver()"onmouseout="myOut()"/><script type="text/javascript">function myDown(){//鼠标按下事件console.log("down");}function myUp(){//鼠标松开事件console.log("up");}function myMove(){//鼠标移动事件console.log("move");}function myOver(){//鼠标移入事件console.log("over");}function myOut(){//鼠标移出事件console.log("out");}</script></body>
</html>运行：鼠标移入–鼠标移动–鼠标按下–鼠标松开–鼠标移动–鼠标移出
案例
一个类似游戏选英雄，选中深色，未选中灰色；鼠标移入移出事件加cs样式来简单实现
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}</style></head><body><img src="../../img/波多野结衣.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/星空一花.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/樱井步.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx1.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx2.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><img src="../../img/tx3.jpg" onmouseover="myOver(this)" onmouseout="myOut(this)"/><script type="text/javascript">function myOver(obj){//鼠标移入事件obj.style.opacity = 1;}function myOut(obj){//鼠标移出事件obj.style.opacity = 0.3;}</script></body>
</html>
运行：
案例优化
动态绑定事件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">img{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}</style></head><body><img src="../../img/波多野结衣.jpg" /><img src="../../img/game01.jpg" /><img src="../../img/星空一花.jpg" /><img src="../../img/tx1.jpg" /><img src="../../img/tx2.jpg" /><img src="../../img/tx3.jpg" /><script type="text/javascript">//动态绑定事件var imgArr = document.getElementsByTagName("img");for(var i = 0;i<imgArr.length;i++){var img = imgArr[i];img.onmouseover = function(){this.style.opacity = 1;}img.onmouseout = function(){this.style.opacity = 0.3;}}</script></body>
</html>
焦点事件
onfocus获取焦点事件
onblur失去焦点事件
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"onfocus="myFocus()"onblur="myBlur()" /><script type="text/javascript">function myFocus(){//获取焦点事件console.log("focus");}function myBlur(){//失去焦点事件console.log("blur");}</script></body>
</html>
运行：点进去–退出来
案例
写一个注册账号的文本框，默认显示“请输入账号…”，光标定位到之后，自动将里面的信息清除掉
注意：这里的条件判断和正则表达式是优化，浏览器老版本不支持trim【trim表获取该函数里代码，trim()表调用】，js使用正则表达式很普遍
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"value="请输入账号..."onfocus="myFocus(this)"onblur="myBlur(this)" /><script type="text/javascript">function myFocus(obj){//获取焦点事件if(obj.value == "请输入账号..."){obj.value = "";}}function myBlur(obj){//失去焦点事件//获取该函数里的代码，如果当前浏览器支持该函数，就返回函数里的代码（字符串），如果不支持就返回undefined//alert(obj.value.trim);//判断浏览器是否兼容次方法if(obj.value.trim){if(obj.value.trim() == ""){obj.value = "请输入账号...";}}else{//注意：IE老版本是不支持trim()//将字符串的首尾空格的字符替换成空字符串，以达到去空格的目的if(obj.value.replace(/(^\s+)|(\s+$)/g,"") == ""){obj.value = "请输入账号...";}}}</script></body>
</html>
运行：
操作节点
添加节点
创建新的 HTML 元素
如需向 HTML DOM 添加新元素，必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
删除节点
如需删除 HTML 元素，必须首先获得该元素的父元素
注意：对于删除节点观察，这里查的元素是id为manager的标签div，如果在此标签外有换行之类的标签会出现删除不到，也可以说是查不到
addP()方便理解，简单添加标签使用innerHTML可简化
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="addP()">添加p标签</button><button onclick="addImg()">添加img标签</button><button onclick="deleteImg()">删除img标签</button><div id="manager"></div><script type="text/javascript">var manager = document.getElementById("manager");function addP(){//创建节点 - <p></p>var p = document.createElement("p");//创建文本内容 - 用良心做教育var text = document.createTextNode("用良心做教育");//将文本内容添加到节点里 - <p>用良心做教育</p>p.appendChild(text);//将节点添加到div中manager.appendChild(p);}function addImg(){//创建节点 - <img />var img = document.createElement("img");//设置属性img.setAttribute("src","../../img/tx2.jpg");img.setAttribute("width","100px");img.setAttribute("height","100px");//创建节点 - <br/>var br = document.createElement("br");//将节点添加到div中manager.appendChild(img);manager.appendChild(br);}function deleteImg(){//删除思路：由父节点删除子节点//查询需要删除的节点var img = document.getElementsByTagName("img")[0];var br = document.getElementsByTagName("br")[0];manager.removeChild(img);manager.removeChild(br);}</script></body>
</html>运行：
案例
删除学生信息
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" width="300px"><tr><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr><tr><td>小希</td><td>女</td><td>27</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小阳</td><td>女</td><td>23</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小西</td><td>女</td><td>25</td><td><button onclick="myDelete(this)">删除</button></td></tr><tr><td>小香</td><td>女</td><td>24</td><td><button onclick="myDelete(this)">删除</button></td></tr></table><script type="text/javascript">function myDelete(obj){var tr = obj.parentNode.parentNode;var table = tr.parentNode;table.removeChild(tr);}</script></body>
</html>
运行：
案例
计算器案例
计算器案例：获取元素值不用查询的方法，过于繁琐，text01.value；
注意获取值需要将文本框String类型转Int类型
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" id="text01"/>+<input type="text" id="text02"/><button onclick="add()">=</button><input type="text" id="text03"/><script type="text/javascript">function add(){//获取到输入框的value是string类型var result = parseInt(text01.value) + parseInt(text02.value);text03.value = result;}</script></body>
</html>
做级联下拉列表— 二级联动（省 市）
首先编写两个下拉列表
获取其中一个下拉列表
并为其绑定onchange事件
并获取其选中的值：var optionVal = select.value;
然后根据选中的值，重新设置另一个下拉列表的innerHTML
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select id="province"><option value="sc">四川</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option></select>市<script type="text/javascript">//给省份绑定改变事件province.onchange = function(){if(this.value == "sc"){city.innerHTML = "<option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option>";}else if(this.value == "hn"){city.innerHTML = "<option>长沙</option><option>永州</option><option>娄底</option><option>益阳</option><option>张家界</option>";}else if(this.value == "hb"){city.innerHTML = "<option>武汉</option><option>黄冈</option><option>仙桃</option><option>咸宁</option><option>孝感</option>";}}</script></body>
</html>运行：
案例优化
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><select id="province"><option value="sc">四川</option><option value="hn">湖南</option><option value="hb">湖北</option></select>省<select id="city"><option>成都</option><option>绵阳</option><option>雅安</option><option>乐山</option><option>攀枝花</option></select>市<script type="text/javascript">//给省份绑定改变事件province.onchange = function(){if(this.value == "sc"){updateCity(["成都","绵阳","雅安","乐山","攀枝花"]);}else if(this.value == "hn"){updateCity(["长沙","永州","娄底","益阳","张家界"]);}else if(this.value == "hb"){updateCity(["武汉","黄冈","仙桃","咸宁","孝感"]);}}function updateCity(arr){//清空city列表city.length = 0;for(var i = 0;i<arr.length;i++){var option = document.createElement("option");option.innerText = arr[i];city.appendChild(option);}}</script></body>
</html>
提交案例–表单验证
用户名不能为空
密码和确认密码是否一致
表单项不符合条件不能提交表单
表单的提交事件—onsubmit
通过返回值判断是否提交，再设置条件，还进行提示优化，调用函数注意返回值【onsubmit】
方式1：有id
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color: red;}</style></head><body><form id="registerForm" action="#" method="post">账户：<input type="text" id="username" /><span></span><br />密码：<input type="password" id="password" /><span></span><br />确认密码：<input type="password" id="repassword" /><span></span><br /><input type="submit" value="提交" /></form><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];var span03 = document.getElementsByTagName("span")[2];//给表单绑定提交事件registerForm.onsubmit = function(){span01.innerText = "";span02.innerText = "";span03.innerText = "";var bool = true;if(username.value.trim() == ""){span01.innerText = "账号不能为空";bool = false;}if(password.value.trim() == ""){span02.innerText = "密码不能为空";bool = false;}if(repassword.value.trim() == ""){span03.innerText = "确认密码不能为空";bool = false;}else if(repassword.value.trim() != password.value.trim()){span03.innerText = "确认密码与密码不一致";bool = false;}return bool;}</script></body>
</html>
运行：
方式2：无id，直接是函数
注意：οnsubmit=“return fun01()”，要写return，因为返回值要返回给事件，不然会出现直接就可以提交的问题
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">span{color: red;}</style></head><body><form action="#" method="post" onsubmit="return fun01()">账户：<input type="text" id="username" /><span></span><br />密码：<input type="password" id="password" /><span></span><br />确认密码：<input type="password" id="repassword" /><span></span><br /><input type="submit" value="提交" /></form><script type="text/javascript">var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];var span03 = document.getElementsByTagName("span")[2];function fun01(){span01.innerText = "";span02.innerText = "";span03.innerText = "";var bool = true;if(username.value.trim() == ""){span01.innerText = "账号不能为空";bool = false;}if(password.value.trim() == ""){span02.innerText = "密码不能为空";bool = false;}if(repassword.value.trim() == ""){span03.innerText = "确认密码不能为空";bool = false;}else if(repassword.value.trim() != password.value.trim()){span03.innerText = "确认密码与密码不一致";bool = false;}return bool;}</script></body>
</html>
小结
DOM:事件、操作节点、DOM案例
这篇关于DOM【事件、操作节点、DOM案例】--学习JavaEE的day49的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
