什么是DOM
文件对象模型（Document Object Model，简称DOM），是组织推荐的处理可扩展置标语言的标准编程接口。
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()
事件
οnclick=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.οnmοusemοve=function(){2 if(window.event){3 document.title=window.event.clientX+','+window.event.clientY;4 }else{5 document.title=arguments[0].clientX+','+arguments[0].clientY6 }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.οncοpy=function(){2 alert('禁止复制！');3 return false;4 }5 document.getElementById('t').οnpaste=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 2
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,'');
}