4.1 js 配合dom 案例
1.通过点击按钮获取文本框中的信息
视图：
代码：
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>如何通过document获取数据</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> function demo1() { //根据id获取元素 var username=document.getElementById("username"); //获取节点对象身上的值 console.log(username.value); } function demo2() { //根据name获取元素 var password=document.getElementsByName("password");//这是个数组变量 //获取每个节点中的值 for(var i=0;i<password.length;i++) console.log(password[i].value); } function demo3() { //根据元素名称获取元素 var input=document.getElementsByTagName("input"); //获取每个节点中的值 for(var i=0;i<input.length;i++) console.log(input[i].value); } function demo4() { //获取p元素 var pid=document.getElementById("pid"); //获取p元素中的文字 console.log(pid.innerText);//获取P标签中的文字 //获取p元素中的html内容 console.log(pid.innerHTML);//<font color="red">获取P标签中的文字</font> pid.innerHTML="<font color='aqua'>新的p</font>" } </script> </head> <body> 用户名称：<input type="text" name="username" id="username"/><br /> 用户密码：<input type="password" name="password" id="password" /><br /> 用户密码2：<input type="password" name="password" id="password2" /><br /> <hr /> <input type="button" value="通过ID获取节点的值" onclick="demo1()"/> <input type="button" value="通过NAME获取节点的值" onclick="demo2()" /> <input type="button" value="通过TAG获取节点的值" onclick="demo3()" /> <hr /> <p id="pid"><font color="red">获取P标签中的文字</font></p> <input type="button" value="获取P中文字" onclick="demo4()" /> </body> </html>
2.节点的增删改查
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>节点的增删改查</title> <!--加入样式表--> <style type="text/css"> div { border:#0099FF 1px solid; height:60px; width:120px; margin:20px 0px 20px 20px; padding:10px 0px 0px 20px; } #div_1{ background-color:#00FFFF; } #div_2{ background-color:#FF3399; } #div_3{ background-color:#0000FF; } #div_4{ background-color:#FFFF66; } </style> <script type="text/javascript"> function addNode() { //1.创建节点 var new_div = document.createElement("div"); //2.挂载节点 //2.1。寻找一个已有节点(父节点) var parent=document.getElementsByTagName("body")[0]; //2.2将新节点挂在到已有的节点身上（子节点） //parent.appendChild(new_div); //在指定元素之前插入节点 var div_2=document.getElementById("div_2"); parent.insertBefore(new_div,div_2); } function deleteNode() { //删除节点 //1.找到父节点 var parent=document.getElementsByTagName("body")[0]; //2.要删除的子节点 var div_4=document.getElementById("div_4"); //3.从父节点上删除子节点 parent.removeChild(div_4); } function updateNode() { //更新节点 //1.找到父节点 var parent=document.getElementsByTagName("body")[0]; //2.找到要被替换的节点 var div_3=document.getElementById("div_3"); //3.创建新的节点---替换旧节点用 var new_div = document.createElement("div"); //4.替换旧节点 parent.replaceChild(new_div,div_3); } function copyNode() { //克隆节点 //1.获取目标节点完成克隆 var div_2=document.getElementById("div_2"); var copy_div=div_2.cloneNode(true); //true是将元素中的innerText也复制，默认为false //2.挂载节点 //2.1获取父节点 var parent=document.getElementsByTagName("body")[0]; //2.2挂载节点 parent.appendChild(copy_div); } </script> </head> <body> <div id="div_1"> </div> <div id="div_2"> div区域2 </div> <div id="div_3"> div区域3 </div> <div id="div_4"> div区域4 </div> <hr /> <input type="button" value="创建并添加节点" onclick="addNode()" /> <input type="button" value="删除节点" onclick="deleteNode()" /> <input type="button" value="替换节点" onclick="updateNode()" /> <input type="button" value="克隆节点" onclick="copyNode()" /> </body> </html>
3.字体有变化的新闻广告
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新闻广告</title> <style type="text/css"> <!-- 伪元素选择器 --> a:link,a:visited { color:#FF9900; text-decoration:none; font-size:15px; } a:hover { color:#0099FF; } .newsstyle { border:#0099FF 1px solid; font-size:16px; width:400px; } /* 预先定一些选择器 */ .max { border:#0099FF 1px solid; font-size:20px; color:#FF0000; background-color:#CCFFFF; width:400px; } .min { border:#0099FF 1px solid; font-size:12px; color:#0000FF; background-color:#FFFFFF; width:400px; } </style> <script type="text/javascript"> function resize(styleName){ //获取div节点 var newstext = document.getElementById("newstext"); //设置div节点身上的class属性 newstext.className = styleName; } </script> </head> <body> <h2>这是一个大新闻.</h2> <a href="javascript:void(0)" onclick="resize('min')">小字体</a> <a href="javascript:void(0)" onclick="resize('newsstyle')">中字体</a> <a href="javascript:void(0)" onclick="resize('max')">大字体</a> <hr /> <div id="newstext" class="newsstyle"> 演示接口.很多内容.怎么办呢?等等<br /> 演示接口.很多内容.怎么办呢?等等<br /> 演示接口.很多内容.怎么办呢?等等<br /> 演示接口.很多内容.怎么办呢?等等<br /> 演示接口.很多内容.怎么办呢?等等<br /> 演示接口.很多内容.怎么办呢?等等<br /> 演示接口.很多内容.怎么办呢?等等<br /> 演示接口.很多内容.怎么办呢?等等<br /> </div> </body> </html>
4.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友列表</title> <style type="text/css"> table { border:#0099FF 1px solid; width:100px; border-collapse:collapse; } table td{ border:#0066FF 1px solid; background-color:#FF9900; text-align:center; } table td div { background-color:#FFFF99; text-align:left; } table td a:link, table td a:visited { color:#00ffFF; text-decoration:none; } table td a:hover { color:#00CC00; } /* 使用display属性:如果取值为none就是隐藏标签。 */ table td div { display:none; } .open { display:block; } .close { display:none; } </style> <script type="text/javascript"> function openDiv(thisobj){ //1.点击a标签，将其兄弟div隐藏或显示 //1.1 thisobj代表的是a标签的对象，根据它找到兄弟div //nextSibling拿到的是元素的兄弟元素 而中间可能会夹杂个文档节点（多个空格或换行变一行）所以是两个nextSibling var div = thisobj.nextSibling.nextSibling; //点击当前div时，其他的div都关闭 //获取全部的div 筛选出非点击的div,全部关闭 var divs = document.getElementsByTagName("div"); //遍历 for(var i=0;i<divs.length;i++){ if(divs[i] != div){ divs[i].style.display ="none" } } //2.切换div隐藏或者显示状态 if(div.style.display == "none"){ div.style.display ="block" }else{ div.style.display ="none" } //div.style.display = div.style.display == "none"?"block":"none"; } </script> <!-- function openDiv(obj){ //1.获取div var div = obj.nextSibling.nextSibling; //获取所有的div，如果有开启的div，在另一个div开启后关闭当前div var divs =document.getElementsByTagName("div"); //遍历所有的div，只要不是当前点击的div，就要将其关闭 for(var i=0;i<divs.length;i++){ if(divs[i]!=div){ divs[i].style.display = "none"; } } //2.显示div div.style.display = div.style.display == "none"?"block":"none"; /*if(div.style.display == "none"){ div.style.display = "block"; }else{ div.style.display = "none"; }*/ } --> </head> <body> <table> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a> <div> 秦始皇<br /> 刘邦<br /> 李世民<br /> 康熙<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a> <div> 刘备<br /> 关羽<br /> 张飞<br /> 赵云<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a> <div> 西施<br /> 貂蝉<br /> 杨贵妃<br /> 王昭君<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a> <div> 马云<br /> 李开复<br /> 俞敏洪<br /> 李彦宏<br /> </div> </td> </tr> </table> </body> </html>
5.二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二级联动菜单</title> <script> function selectCity(obj){ var cities = { "北京市":["海淀区","朝阳区","丰台区"], "河北省":["石家庄","唐山","秦皇岛"], "辽宁省":["沈阳","大连","鞍山"], "山东省":["青岛","济南","烟台"] } //1.先获取省市信息 var provinces=obj.value; //2.根据省市信息获取城市信息 var city=cities[provinces]; //3.将城市信息绑定在第二个下拉框中 //3.1获取第二个下拉框 var sel_city=document.getElementById("city"); //清空操作 sel_city.innerHTML="<option>--请选择--</option>" //3.2循环添加城市信息 for(var i=0;i<city.length;i++) { sel_city.innerHTML+="<option>"+ city[i] +"</option>" } } </script> <!-- var cities = { "北京市":["海淀区","朝阳区","丰台区"], "河北省":["石家庄","唐山","秦皇岛"], "辽宁省":["沈阳","大连","鞍山"], "山东省":["青岛","济南","烟台"] } //获取对应省市的城市 var citySelect = cities[obj.value] //获取第二个select标签对象，并将option进行遍历添加 var city = document.getElementById("city"); //在每次添加option之前先清空option city.innerHTML = "<option>--请选择--</option>" for(var i=0;i<citySelect.length;i++){ var opt = document.createElement("option"); opt.innerText = citySelect[i]; city.appendChild(opt); } --> </head> <!-- "海淀区","朝阳区","丰台区" "石家庄","唐山","秦皇岛" "沈阳","大连","鞍山" "青岛","济南","烟台" --> <body> <select id="province" onchange="selectCity(this)"> <!-- this 在这里指的是我们改变对象 就是option --> <option>--选择省市--</option> <option>北京市</option> <option>河北省</option> <option>辽宁省</option> <option>山东省</option> </select> <select id="city"> <option>--选择城市--</option> </select> </body> </html>
6.
<html> <head> <title>表单页面</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <script> function checkData(){ //在点击提交的时候调用 //1.非空校验 /*var username=document.getElementsByName("username")[0].value;//拿到用户输入的内容 //获取span提示框 var username_msg=document.getElementById("username_msg"); //清空操作 username_msg.innerText=""; //判断用户输入的内容是否为空 if(username=="") { username_msg.innerText="用户名不能为空"; }*/ var canSub=true; canSub = checkNull("username","用户名不能为空！") && canSub; canSub = checkNull("password","密码不能为空！")&& canSub; canSub = checkNull("password2","确认密码不能为空！")&& canSub; canSub = checkNull("nickname","昵称不能为空！")&& canSub; canSub = checkNull("email","邮箱不能为空！")&& canSub; canSub = checkNull("valistr","验证码不能为空！")&& canSub; canSub = checkNull("img","头像不能为空！")&& canSub; //因为头像选择好后，他的value值就是文件名 //2.密码一致性校验 //将密码框和确认密码框的值做比较 //如果不同则做出提示，相同则不做出提示 var password =document.getElementsByName("password")[0].value; var password2 =document.getElementsByName("password2")[0].value; //获取确认密码框后的span var password_msg=document.getElementById("password_msg"); //比对两个密码值 if(password!=null&&password2!=null&&password!=password2) { password_msg.innerText="两次密码不一样"; canSub=false; } //3.邮箱格式校验 //xwq@tedu.cn //获取邮箱正则 var reg=/\w+@\w+(\.\w+)+/; //获取用户输入的邮箱内容 var email=document.getElementsByName("email")[0].value; //获取emaiL后的span var email_msg=document.getElementById("email_msg"); if(email!=""&&!reg.test(email)) { email_msg.innerText="邮箱格式不正确"; canSub=false; } //性别的非空校验(单选框) //获取性别单选框 var gender1=document.getElementsByName("gender")[0]; var gender2=document.getElementsByName("gender")[1]; //获取性别后面的span框 var gender_msg=document.getElementById("gender_msg"); //判断两个单选框的选中状态，如果状态不同则证明已经选择，如果相同则证明没有选择，应当做出提示 if(gender1.checked==gender2.checked) { gender_msg.innerText="性别不能为空"; canSub=false; } //爱好非空校验（复选框） //获取爱好复选框 var likes=document.getElementsByName("like"); //获取爱好后的span var like_msg=document.getElementById("like_msg"); //如果复选框中有任意一个元素是选中状态则不需要提示 var flag=false; for(var i=0;i<likes.length;i++) { if(likes[i].checked==true){ flag=true; break; } } //清空操作 like_msg.innerText=""; if(!flag) //全空 { like_msg.innerText="爱好不能为空"; canSub=false; } return canSub; } /*检验非空公共方法*/ function checkNull(name,msg){ var tag=document.getElementsByName(name)[0].value;//拿到用户输入的内容 //获取span提示框 var tag_msg=document.getElementById(name+"_msg"); //清空操作 tag_msg.innerText=""; //判断用户输入的内容是否为空 if(tag=="") { tag_msg.innerText=msg; return false; } return true; } //文本域的聚焦事件 function descFocus(thisobj) { //鼠标聚焦在textarea内部时，如果文本为情输入描述信息 ，则清空textarea中的内容 if(thisobj.value=="请输入") { thisobj.value=""; } } //鼠标离开事件 function descBlur(thisobj) { //鼠标离开在textarea内部时，如果文本为空。则回复请输入描述信息 if(thisobj.value=="") { thisobj.value="请输入"; } } </script> <style type="text/css"> span{ color:red; font-size:12px; } </style> </head> <body> <form action="http://localhost:8080" method="POST" onsubmit="return checkData()"> <!-- onsubmit=true 表单提交 onsubmit=false 表单无法提交 --> <table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink"> <caption><font color="red" size="6">注册表单</font></caption> <input type="hidden" name="id" value="9527"/> <tr> <td>用户名:</td> <td><input type="text" name="username" /> <span id="username_msg"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password"/> <span id="password_msg"></span></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="password2"/> <span id="password2_msg"></span></td> </tr> <tr> <td>性别：</td> <td> <input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span> </td> </tr> <tr> <td>昵称：</td> <td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" name="email"/> <span id="email_msg"></span></td> </tr> <tr> <td>爱好：</td> <td> <input type="checkbox" name="like" value="lq"/>篮球 <input type="checkbox" name="like" value="zq"/>足球 <input type="checkbox" name="like" value="qq"/>铅球 <input type="checkbox" name="like" value="blq"/>玻璃球 <span id="like_msg"></span> </td> </tr> <tr> <td>客户类型：</td> <td> <select name="type"> <option value="pm">平民</option> <option value="sxdy">少先队员</option> <option value="gqty">共青团员</option> <option value="ybdy">预备党员</option> <option value="zsdy">正式党员</option> </select> <span id="type_msg"></span> </td> </tr> <tr> <td>头像：</td> <td> <input type="file" name="img"/> <span id="img_msg"></span> </td> </tr> <tr> <td>描述信息：</td> <td> <textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入</textarea> <br/><span id="desc_msg"></span> </td> </tr> <tr> <td>验证码：</td> <td> <input type="text" name="valistr"/> <img src="1.jpg" width="100px" height="20px"/> <span id="valistr_msg"></span> </td> </tr> <tr> <td colspan="2" align="right"> <input type="submit" value="提 交"/> <input type="reset" value="重 置"/> </td> </tr> </table> </form> </body> </html>
