首页 > 代码库 > JavaScript DOM
JavaScript DOM
JavaScript DOM:JavaScript Document Object Model ：动态操作页面的元素
平常做的网页中，一些动态效果，页面无刷新动态效果，单纯用css是比较难以实现的，这时，借助JavaScript DOM来操作网页页面的元素，使网页变得更加丰富多彩。
1、window.onload(页面加载完成触发事件)
js文件从外边引入，或者一般如果写在head标签中，当网页加载的时候，代码从上往下依次执行，js代码也如此，当没执行到body的时候，网页上元素的标签尚未存在，如果这时候去提前操作这些标签，显然，会出错误的，
这时候，需要使用window.onload()事件，当页面加载完成的时候触发的事件，就不会出现这样的问题。
window.onload=function(){alert(‘页面加载完成‘);}; //页面触发事件: //(1)onload (页面加载后触发) //(2)onunload(页面卸载后触发) -->只支持IE //(3)onbeforeunload (页面卸载前触发)
2、获取页面上的元素的方法：
(1)通过ID获取页面中的元素
document.getElementById(‘id‘).onclick=function(){alert(‘id的点击事件‘)}
(2)根据标签名称获取页面上所有的标签，返回一个集合
var pElement=doucment.getElementByTagName(‘p‘);//获取页面上所有的p标签，返回一个集合
(3)根据元素的name来获取元素，返回一个集合
var nameElement=document.getElementByName(‘name‘); //获取页面上所有name属性等于name的元素
3、计时器的使用 setInterval(常用)
var IntervarId=setInterval(function(){alert(‘执行的代码，一般用匿名函数‘)},1000); //每隔1秒进行一次 //停止 需要停止就要获取所在的id(可以对setTimeout进行停止) clearInterval(IntervarId); //超出规定时间，执行一次代码： setTimeout(function(){alert(‘执行的代码‘);},2000); //超过2秒后执行一次代码(就一次)
4、事件的对象
由于不同浏览器之间，有很多不同，浏览器存在一些兼容问题，不同用户使用的浏览器更是多种多样，不过一般兼容IE和火狐，基本就兼容所有浏览器(后面的jQuery可以解决这个问题，基本不会考虑浏览器兼容问题)
(1)IE支持的获取方法
window.event.
(2)火狐支持的获取方法
function(evt)={ evt. };
-->(3)兼容代码：
function(evt)={ var e=window.event||evt; e.…… };
(4)获取最初引发事件对象(兼容代码)
var e=window.event ||evt; var srcTarget=e.scrElement||e.target //在事件处理程序中，当前事件是哪个元素的事件，那么this表示就是哪个对象， window.event.srcElement同样 //区别： this 表示当前事件的对象，window.event.srcElement表示最初引发事件的对象
5、事件冒泡
理解：如果一个p在一个div中，当p标签事件执行完毕，就会触发div标签的事件执行，一层一层的向外触发（一层一层的包含）
阻止事件冒泡(兼容代码)：
var e=window.event||evt; e.cancelBubble=true;
6、坐标属性(▲常用)
//相对于当前页面左上角的偏移坐标 var x = e.clientX; var y = e.clientY; //相对于屏幕左上角的偏移坐标 var x = e.screenX; var y = e.screenY; //相对于元素自己的偏移坐标 var x = e.offsetX; var y = e.offsetY;
7.1、动态创建元素：
(1)创建一个超链接：
var aLink=document.createElement(‘a‘); //‘a‘为HTML标签名称，其他同理 aLink.href=http://www.mamicode.com/‘http://www.baidu.com‘; aLink.title=‘百度一下，你就知道‘; aLink.target=‘_blank‘;
(2)文本框的创建
var txtBox=document.createElement(‘input‘); txtBox.type=‘text‘; //根据type属性来创建input标签的其他类型
(3)表格的创建
var dTable=document.createElement(‘table‘); //创建一个表格 //遍历数据，创建行 for(var key in data) { // var dTr=document.createElement(‘tr‘); //创建行对象 // var td1=document.createElement(‘td‘); //创建列 // dTr.appendChild(td1); //把列加入行中 // dTable.appendChild(dTr); //把行加入表格中 //推荐使用的方法：兼容所有浏览器 var dRow=dTable.insertRow(-1); //向表格中插入一行，-1为索引，追加到最后一行 dRow.insertCell(-1).innerHTML=key; //向行中插入单元格，追加到最后 dRow.insertCell(-1).innerHTML=data[key]; }
7.2删除层中的元素
(1)方法一：彻底删除
var divObject=document.getElementById(‘div1‘); //获取层 while(divObject.firstChild) //如果层中什么都没有，将返回一个undefined，有即返回第一个子元素 { divObject.removeChild(divObject.firstChild); //把第一个子元素删除，后面第二个子元素就变成了第一个,以此类推，依次清空 }
(2)方法二：简单删除
divObject.innerHTML=‘‘; //简单可以删除，复杂(比如关联事件等)删除不彻底
8、JS操作样式：
(1)设置层的样式：
xxx.style.backgroundColor=‘xx‘; //精髓：去掉横杠，首字母大写 xxx.style.cssFloat=‘right‘ //设置右浮动 style.overflow=hidden; //设置隐藏
(2)动态应用样式：
document.getElementById(‘div1‘).className=‘样式类名‘;
9、JS操作表单：
(1)手动获取表单提交按钮：
document.getElementById(‘btn‘).click=function(){};
(2)调用表单的submit方法来提交：
document.getElementById(‘from1‘).submit();
(3)为表单注册一个提交事件，提交的时候触发：
document.getElementById(‘from1‘).onsubmit=function(){ alert(‘表单提交事件‘)};
PS: 如果使用表单按钮来提交表单(1)，则会触发onsubmit事件，如果使用submit方法来提交(2)，则不会触发onsubmit事件
10、JS中使用正则表达式：
(1)正则表达式的使用：
var email=/^\w+@\w+(\.\w)+$/ //创建一个正则表达式：/^正则表达式$/
//调用正则表达式对象的test()方法，测试是否匹配，返回true或者false var bool= email.test(string);
(2)exec方法：
var xx=/\d+/g; xx.exec(string) //使用exec()方法对字符串提取 //当正则表达式后面加g(全局模式)，反复调用exec()方法，提取每个字符(不使用则都是匹配第一个) var result=xx.exec(string);
while(result) { alert(result); result=xx.exec(string); //遍历下一个，当遍历完则判断为false }
(3)字符串的math方法(方便快捷)
var result=string.match(/\d+/g); //正则使用全局模式 遍历输出
(4)字符串的replace方法替换
var result=string.replace(/\正则表达式/g,‘替换的字符‘)
11、总结：
JavaScript DOM中，有许多方法和用法，也存在很多的浏览器兼容问题，要用到浏览器的能力检测去解决。jQuery会解决这些兼容问题。
JavaScript DOM