首页 > 代码库 > DOM2
DOM2
样式
通过修改元素的style属性来操作样式
js中的style对象提供了很多属性，对应着css的相关样式
这里的写法与css中基本相同
如果在css中有“-”的样式，把“-”去掉将单词首字母变成大写
对于某些元素拥有的属性，可能在提示中不存在，直接写就可以了
设置样式类：dvObj.className=‘类名称‘;
1 onl oad = function () { 2 //获取容器 3 var div1 = document.getElementById(‘div1‘); 4 5 //循环创建5个超链接 6 for (var i = 0; i < 5; i++) { 7 //创建a对象 8 var a1 = document.createElement(‘a‘); 9 //为属性赋值 10 a1.href = http://www.mamicode.com/‘http://www.itcast.cn‘; 11 a1.innerHTML = ‘链接‘ + i; 12 a1.onclick = function() { 13 //设置背景色为红色 14 this.style.backgroundColor = ‘red‘; 15 return false; 16 }; 17 //追加到容器中 18 div1.appendChild(a1); 19 } 20 };
练习 透视图
<script> onl oad = function () { //根据标签获取body元素 var body = document.getElementsByTagName(‘body‘)[0]; //规定初始值 var width = 500, height = 500, left = 10, top = 10; //循环创建div while (true) { //创建div加入body中 var div1 = document.createElement(‘div‘); div1.style.position = ‘absolute‘; div1.style.left = left + ‘px‘; div1.style.top = top + ‘px‘; div1.style.border = ‘1px solid blue‘; div1.style.width = width + ‘px‘; div1.style.height = height + ‘px‘; body.appendChild(div1); //改写数值 left += 5; top += 5; width -= 10; height -= 10; //当div的宽度<=0时，在页面上不会显示，所以退出循环 if (width <= 0) { break; } } }; </script>
表单
<script> var bgColor; var list = [ { id: ‘1‘, country: ‘中国‘, capital: ‘北京‘ }, { id: ‘2‘, country: ‘美国‘, capital: ‘华盛顿‘ }, { id: ‘3‘, country: ‘日本‘, capital: ‘东京‘ }, { id: ‘4‘, country: ‘韩国‘, capital: ‘首尔‘ } ]; onl oad = function() { var body = document.getElementsByTagName(‘body‘)[0]; //创建表格 var table = document.createElement(‘table‘); table.border = 1; body.appendChild(table); //创建标题行 var thead = document.createElement(‘thead‘); var item0 = list[0]; for (var key0 in item0) { //创建标题单元格 var th = document.createElement(‘th‘); th.innerText = key0; thead.appendChild(th); } table.appendChild(thead); for (var i = 0; i < list.length; i++) { //遍历对象 var item = list[i]; //创建行 var tr = document.createElement(‘tr‘); table.appendChild(tr); //注册事件 tr.onmouseover = function () {//指向行时高亮 //改变颜色前，先获取值，用于恢复 bgColor = this.style.backgroundColor; this.style.backgroundColor = ‘green‘; }; tr.onmouseout = function() {//移开行时恢复原来颜色 this.style.backgroundColor = bgColor; }; //设置行的背景色 if (i % 2 == 0) { tr.style.backgroundColor = ‘red‘; } else { tr.style.backgroundColor = ‘blue‘; } //遍历对象 for (var key in item) { //创建单元格 var td = document.createElement(‘td‘); td.innerText = item[key]; tr.appendChild(td); } } }; </script>
隐藏和显示
<script> onl oad = function() { document.getElementById(‘btnShow‘).onclick = function () { var divShow = document.getElementById(‘divShow‘); if (this.value =http://www.mamicode.com/= ‘隐藏‘) {>} else { this.value = http://www.mamicode.com/‘隐藏‘;>} }; }; </script>
显示
控制层的隐藏和显示
通过设置样式display控制显示与隐藏
值为‘‘表示显示,block
值为‘none‘表示隐藏
示例：点击按钮，控制div的显示与隐藏，并同时更新按钮提示文本
1 <script> 2 onl oad = function () { 3 //获取所有按钮 4 var btns = document.getElementsByTagName(‘input‘); 5 //遍历按钮，绑定事件 6 for (var i = 0; i < btns.length; i++) { 7 btns[i].onmouseover = function(e) { 8 //显示div，内容是id 9 //获取div 10 var divShowId = document.getElementById(‘divShowId‘); 11 divShowId.textContent = this.id; 12 //显示 13 divShowId.style.display = ‘block‘; 14 //定义位置 15 divShowId.style.left = e.clientX + ‘px‘; 16 divShowId.style.top = e.clientY + ‘px‘; 17 }; 18 btns[i].onmouseout = function() { 19 //隐藏div 20 //获取div 21 var divShowId = document.getElementById(‘divShowId‘); 22 //隐藏 23 divShowId.style.display = ‘none‘; 24 }; 25 } 26 }; 27 </script>
表单的提交
表格对象
使用传统方式进行表单提交：点击submit按钮
事件onsubmit：表示在提交前触发，一般用于进行控件内容的有效性验证
如果返回false则会停止提交
如果返回true或者不返回则完成提交
问：如果在不点击提交按钮时进行提交呢？
方式一：调用按钮的click()方法，模拟点击
方式二：调用表单的submit()方法，这种提交不会触发onsubmit事件
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> // 1、表单提交会触发onsubmit事件，不想提交使用return false; //2、模拟事件：onclick->click() //3、form.submit直接提交，不会触发onsubmit事件 onl oad = function() { var form1 = document.getElementById(‘form1‘); form1.onsubmit = function() { alert(1); //return false;//停止转向 }; var submit1 = document.getElementById(‘submit1‘); submit1.onclick = function () { //模拟表单提交方式一： //form1.submit();//这种方式不会触发 onsubmit事件 //模拟表单提交方式二： //将事件当作一个方法用，会模拟用户对这个控件的事件操作 //去掉on //form1.onsubmit(); document.getElementById(‘submit2‘).click(); }; }; </script> </head> <body> submit按钮可以让form完成提交，提交时会触发onsubmit事件 <br/> onsubmit事件的作用：可以在转向页面前，进行数据的有效性验证 <br/> 取消提交的方式：return false; <br/> <form id="form1" action="hello.html"> <input type="button" id="submit1" value="http://www.mamicode.com/模拟提交"/> <input type="text"/> <input type="submit" id="submit2"/> </form> </body> </html>
显示密码强度
1 <script> 2 onl oad = function () { 3 //为文本框注册失去焦点事件，失去焦点时，进行密码验证 4 document.getElementById(‘txtPwd‘).onblur = function () { 5 var msg = this.value; 6 7 //获取提示框 8 var msgPwd = document.getElementById(‘msgPwd‘); 9 10 if (msg.length < 6) { 11 msgPwd.innerText = ‘弱爆了‘; 12 } else { 13 //纯字符：弱，两种混合：中，三种混合：强 14 var pwd = 0; 15 if (/[a-zA-Z]/.test(msg)) { 16 pwd++;//有一个字母 17 } 18 if (/[0-9]/.test(msg)) { 19 pwd++;//有一个数字 20 } 21 if (/[!@#$%^&*()]/.test(msg)) { 22 pwd++;//有一个特殊字符 23 } 24 //提示结果 25 switch (pwd) { 26 case 1: 27 msgPwd.innerText = ‘弱‘; 28 break; 29 case 2: 30 msgPwd.innerText = ‘中‘; 31 break; 32 case 3: 33 msgPwd.innerText = ‘强‘; 34 break; 35 } 36 } 37 }; 38 }; 39 </script>
正则在dom里面的使用
DOM2
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。