什么是DOM
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。
JavaScript只是执行一些计算，循环等操作，最终是要操作Html页面，让Html变成DHtml，而操作Html页面就要用到Dom
Dom就是把Html页面模拟成一个对象，提供了操作各个节点的方法
Dom和JavaScript
JavaScript-->DOM就是C#-->.Net Framework
CSS+JavaScript+DOM=DHtml
获取页面元素
window.id(window是dom中的一个顶级对象，代表当前年浏览器窗口)
document.getElementById()
事件
onclick=f1;鼠标点击事件触发了一个方法f1
document.body.onclick范围仅限于body
document.onclick范围为整个文档
window对象的方法
window.confirm('确定要删除吗？');//确定取消对话框，返回true或false
window.navigate(url);将网页重新导航到url，只支持IE和空中
window.location.href='url'；支持大部分浏览器，与上面相比，比较推荐
window.location.reload()：刷新当前页
window.setInterval(code,delay)每隔一段时间执行指定的代码，code表示代码字符串，delay表示时间间隔，返回intervalId window.clearInterval(intervalId)清除计时器
window.setTimeout定时执行，只执行一次
window.clearTimeout清除定时
window.event.altKey：bool类型，表示事件发生时是否按下了alt键
window.event.ctrlKey：bool类型，表示事件发生时是否按下了ctrl键
window.event.shiftKey：bool类型，表示事件发生时是否按下了shift键
IE和火狐的兼容写法：
1 document.body.onmousemove=function(){
2 if(window.event){
3 document.title=window.event.clientX+','+window.event.clientY;
4 }else{
5 document.title=arguments[0].clientX+','+arguments[0].clientY
6 }
7 };
window.event.clientX：发生事件时鼠标在客户区的横坐标
window.event.clientY：发生事件时鼠标在客户区的纵坐标
screenX、screenY：发生事件时鼠标在屏幕上的坐标
offsetX、offsetY：发生事件时鼠标相对于事件源的坐标
window.event.returnValue：如果为false，取消默认事件的处理 return false;(推荐)
window.event.srcElement：获得事件源对象
screen.width和screen.height：分辨率
clipboardData对象，对粘贴板的操作
setData("Text",val)设置粘贴板中的值
clipboardData.setData('text',url)赋值
getData("Text")读取粘贴板的值
clipboardData.getData('text')粘贴
clearData("Text")清空粘贴板
案例：
1 document.body.oncopy=function(){
2 alert('禁止复制！');
3 return false;
4 }
5 document.getElementById('t').onpaste=function(){
6 alert('禁止粘贴');
7 return false;
8 }
window.history.back()历史记录后退
window.history.forward()历史记录前进
window.history.go(-1)后退
window.history.go(1)前进
body、document对象的事件
onload(页面加载后触发)
onunload(页面卸载后触发)
onbeforeunload(页面卸载前触发)
1 <body onbeforeunload="window.event.returnValue'Are you sure?'"></body> 2 <body onbeforeunload="return 'Are you sure?'"></body>
document.write();向文档中写入内容
document.writeln();向文档中写入内容，最后添加一个回车
只有在页面加载过程中write才会与原有内容融合在一起，writeln是在源代码里面换行
如果创建一个按钮动态添加点击事件后产生一个window.write()，一点就没了
document.getElementById()根据元素的id获得对象
document.getElementsByName()根据元素的name获得对象，返回对象数组
document.getElementsByTagName()获得指定标签名称的元素数组(不用forin循环，用for循环)
事件冒泡
如果A元素嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick事件也会被触发，顺序是由内到外
取消事件冒泡：window.event.cancelBubble=true;
事件源：window.event.srcElement
动态创建DOM
document.write()只能在页面加载过程中才能动态创建
document.createElement()
案例：
1 function showIt(){
2 var divMain=document.getElementById('divMain');
3 var btn=document.createElement('input');
4 btn.type='button';
5 btn.value='动态创建的button';
6 divMain.appendChild(btn);
7 }
createElement('element')创建一个节点
appendChild(node)追加一个节点
removeChild(node)移除一个节点
replaceChild(new,old)替换一个节点
insertBefore(new,参照)把节点加到前面
innerText元素标签内内容的文本表现形式
innerHTML(所有浏览器都支持)元素标签内内容的HTML源代码
js操作页面样式
修改元素的样式不是设置class属性，而是className属性
驼峰命名法：
style.fontSize
style.marginTop
style.styleFloat='right' 其它浏览器是style.cssFloat='right'
动态设置元素的位置、大小
style.display='none'控制层的显示 block或none
style.width='80px';
style.height='80px';
style.overflow='hidden'层内内容隐藏
层的操作
position
static:无定位，显示在默认位置
absolute:绝对定位(常用，可以通过代码修改元素的坐标)
fixed:相对于窗口的固定定位
relative:相对元素默认位置的定位
form对象
document.getElementById('btn').click()点击后相当于点击了搜索按钮
submit()提交表单，但是不会触发onsubmit事件
不同浏览器的差异
不同浏览器中对DOM支持的方法不一样
获取网页中的那个元素触发了事件：IE(srcElement) FF(target)
使用Dom获取和更改网页标签元素内文本：IE(innerText) FF(textContent)
动态为网页或元素绑定事件：IE(attachEvent) FF(addEventListener)
不同浏览器对CSS的支持不一样
正则表达式
创建正则表达式
var regex=new RegExp('\\d{5}')
var regex=/\d{5}/(推荐，不用管转义符了)
RegExp对象的方法
test(str)判断字符串str是否匹配正则表达式，相当于IsMatch
regex.test('a@b.com')
exec(str)进行搜索匹配，返回值为匹配结果，相当于match()和matches(),返回的是结果数组，没有匹配结果的话返回null
string的正则表达式方法
var s='aaa@163.com';
var regex=/(.+)@(.+)/;
var match=s.match(regex);
s.replace(/正则/g,'要替换的字符串')
模拟Trim()方法
var str=' aaaaaa ';
alert('---'+exTrim(str)+'---');
function exTrim(s){
return s.replace(/(^s+)|(\s+$)/g,'');
}
| 博客地址： | http://www.cnblogs.com/wolf-sun/ |
| 博客版权： | 本文以学习、研究和分享为主，欢迎转载，但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出，以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下！如果你有更好的建议，不如留言一起讨论，共同进步！ 再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/3192725.html |