DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。
①验证用户名是否达到要求—getElementById
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" >/** 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>* 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。* */function onclickFun() {// 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。var usernameObj = document.getElementById("username");// [object HTMLInputElement] 它就是dom对象var usernameText = usernameObj.value;// 如何 验证 字符串，符合某个规则 ，需要使用正则表达式技术var patt = /^\w{5,12}$/;/** test()方法用于测试某个字符串，是不是匹配我的规则 ，* 匹配就返回true。不匹配就返回false.* */var usernameSpanObj = document.getElementById("usernameSpan");// innerHTML 表示起始标签和结束标签中的内容// innerHTML 这个属性可读，可写usernameSpanObj.innerHTML = "国哥真可爱！";if (patt.test(usernameText)) {// alert("用户名合法！");// usernameSpanObj.innerHTML = "用户名合法！";usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";} else {// alert("用户名不合法！");// usernameSpanObj.innerHTML = "用户名不合法！";usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";}}</script></head><body>用户名：<input type="text" id="username" value="wzg"/><span id="usernameSpan" style="color:red;"></span><button onclick="onclickFun()">较验</button></body></html>
②正则表达式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 表示要求字符串中，是否包含字母e// var patt = new RegExp("e");// var patt = /e/; // 也是正则表达式对象// 表示要求字符串中，是否包含字母a或b或c// var patt = /[abc]/;// 表示要求字符串，是否包含小写字母// var patt = /[a-z]/;// 表示要求字符串，是否包含任意大写字母// var patt = /[A-Z]/;// 表示要求字符串，是否包含任意数字// var patt = /[0-9]/;// 表示要求字符串，是否包含字母，数字，下划线// var patt = /\w/;// 表示要求 字符串中是否包含至少一个a// var patt = /a+/;// 表示要求 字符串中是否 *包含* 零个 或 多个a// var patt = /a*/;// 表示要求 字符串是否包含一个或零个a// var patt = /a?/;// 表示要求 字符串是否包含连续三个a// var patt = /a{3}/;// 表示要求 字符串是否包 至少3个连续的a，最多5个连续的a// var patt = /a{3,5}/;// 表示要求 字符串是否包 至少3个连续的a，// var patt = /a{3,}/;// 表示要求 字符串必须以a结尾// var patt = /a$/;// 表示要求 字符串必须以a打头// var patt = /^a/;// 要求字符串中是否*包含* 至少3个连续的a// var patt = /a{3,5}/;// 要求字符串，从头到尾都必须完全匹配// var patt = /^a{3,5}$/;var patt = /^\w{5,12}$/;var str = "wzg168[[[";alert( patt.test(str) );</script></head><body></body></html>
运行结果：
③复选框全选—getElementByName
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// 全选function checkAll() {// 让所有复选框都选中// document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合// 这个集合的操作跟数组 一样// 集合中每个元素都是dom对象// 这个集合中的元素顺序是他们在html页面中从上到下的顺序var hobbies = document.getElementsByName("hobby");// checked表示复选框的选中状态。如果选中是true，不选中是false// checked 这个属性可读，可写for (var i = 0; i < hobbies.length; i++){hobbies[i].checked = true;}}//全不选function checkNo() {var hobbies = document.getElementsByName("hobby");// checked表示复选框的选中状态。如果选中是true，不选中是false// checked 这个属性可读，可写for (var i = 0; i < hobbies.length; i++){hobbies[i].checked = false;}}// 反选function checkReverse() {var hobbies = document.getElementsByName("hobby");for (var i = 0; i < hobbies.length; i++) {hobbies[i].checked = !hobbies[i].checked;// if (hobbies[i].checked) {// hobbies[i].checked = false;// }else {// hobbies[i].checked = true;// }}}</script></head><body>兴趣爱好：<input type="checkbox" name="hobby" value="cpp" checked="checked">C++<input type="checkbox" name="hobby" value="java">Java<input type="checkbox" name="hobby" value="js">JavaScript<br/><button onclick="checkAll()">全选</button><button onclick="checkNo()">全不选</button><button onclick="checkReverse()">反选</button></body></html>
运行结果：
④getElementByTagName实现复选框全选
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function(){// alert( document.getElementById("btn01") );}// 全选function checkAll() {alert( document.getElementById("btn01") );// document.getElementsByTagName("input");// 是按照指定标签名来进行查询并返回集合// 这个集合的操作跟数组 一样// 集合中都是dom对象// 集合中元素顺序 是他们在html页面中从上到下的顺序。var inputs = document.getElementsByTagName("input");for (var i = 0; i < inputs.length; i++){inputs[i].checked = true;}}</script></head><body><!--as -->兴趣爱好：<input type="checkbox" value="cpp" checked="checked">C++<input type="checkbox" value="java">Java<input type="checkbox" value="js">JavaScript<br/><button id="btn01" onclick="checkAll()">全选</button></body></html>
⑤DOM查询练习：
@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;}button {width: 300px;margin-bottom: 10px;}#btnList {float:left;}#total{width: 450px;float:left;}ul{list-style-type: none;margin: 0px;padding: 0px;}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float:left;}.inner{width:400px;border-style: solid;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;}
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>dom查询</title><link rel="stylesheet" type="text/css" href="style/css.css" /><script type="text/javascript">window.onload = function(){//1.查找#bj节点document.getElementById("btn01").onclick = function () {var bjObj = document.getElementById("bj");alert(bjObj.innerHTML);}//2.查找所有li节点var btn02Ele = document.getElementById("btn02");btn02Ele.onclick = function(){var lis = document.getElementsByTagName("li");alert(lis.length)};//3.查找name=gender的所有节点var btn03Ele = document.getElementById("btn03");btn03Ele.onclick = function(){var genders = document.getElementsByName("gender");alert(genders.length)};//4.查找#city下所有li节点var btn04Ele = document.getElementById("btn04");btn04Ele.onclick = function(){//1 获取id为city的节点//2 通过city节点.getElementsByTagName按标签名查子节点var lis = document.getElementById("city").getElementsByTagName("li");alert(lis.length)};//5.返回#city的所有子节点var btn05Ele = document.getElementById("btn05");btn05Ele.onclick = function(){//1 获取id为city的节点//2 通过city获取所有子节点alert(document.getElementById("city").childNodes.length);};//6.返回#phone的第一个子节点var btn06Ele = document.getElementById("btn06");btn06Ele.onclick = function(){// 查询id为phone的节点alert( document.getElementById("phone").firstChild.innerHTML );};//7.返回#bj的父节点var btn07Ele = document.getElementById("btn07");btn07Ele.onclick = function(){//1 查询id为bj的节点var bjObj = document.getElementById("bj");//2 bj节点获取父节点alert( bjObj.parentNode.innerHTML );};//8.返回#android的前一个兄弟节点var btn08Ele = document.getElementById("btn08");btn08Ele.onclick = function(){// 获取id为android的节点// 通过android节点获取前面兄弟节点alert( document.getElementById("android").previousSibling.innerHTML );};//9.读取#username的value属性值var btn09Ele = document.getElementById("btn09");btn09Ele.onclick = function(){alert(document.getElementById("username").value);};//10.设置#username的value属性值var btn10Ele = document.getElementById("btn10");btn10Ele.onclick = function(){document.getElementById("username").value = "国哥你真牛逼";};//11.返回#bj的文本值var btn11Ele = document.getElementById("btn11");btn11Ele.onclick = function(){alert(document.getElementById("city").innerHTML);// alert(document.getElementById("city").innerText);};};</script></head><body><div id="total"><div class="inner"><p>你喜欢哪个城市?</p><ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul><br><br><p>你喜欢哪款单机游戏?</p><ul id="game"><li id="rl">红警</li><li>实况</li><li>极品飞车</li><li>魔兽</li></ul><br /><br /><p>你手机的操作系统是?</p><ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul></div><div class="inner">gender:<input type="radio" name="gender" value="male"/>Male<input type="radio" name="gender" value="female"/>Female<br><br>name:<input type="text" name="name" id="username" value="abcde"/></div></div><div id="btnList"><div><button id="btn01">查找#bj节点</button></div><div><button id="btn02">查找所有li节点</button></div><div><button id="btn03">查找name=gender的所有节点</button></div><div><button id="btn04">查找#city下所有li节点</button></div><div><button id="btn05">返回#city的所有子节点</button></div><div><button id="btn06">返回#phone的第一个子节点</button></div><div><button id="btn07">返回#bj的父节点</button></div><div><button id="btn08">返回#android的前一个兄弟节点</button></div><div><button id="btn09">返回#username的value属性值</button></div><div><button id="btn10">设置#username的value属性值</button></div><div><button id="btn11">返回#bj的文本值</button></div></div></body></html>
运行结果：
若有收获，就点个赞吧
0 人点赞
