DOM 笔记
DOM就是HTML页面的模型，将每个标签作为一个对象，javascript通过调用DOM中的属性，方法对网页中的文本框，层等进行编程控制
javascript——》DOM就是C#——》.NET FRAMEWORK
DOM也像winform一样，通过事件，属性，方法编程。
CSS+javascript+DOM=DHTML
一，window对象，代表当前浏览器窗口，使用window对象的属性，方法的时候可以省略window
1.confirm方法，显示“确定”，“取消”对话框，按下“确定”返回true，否则返回false
2.navigate方法，重新导航到指定的地址。
3.setInterval，每个一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。<input type="button" value="滚动" onclick="setInterval('scroll()',500)"/>每调用一次setInterval都会产生一个新的定时器，并且旧的不会停止，所以看起来好像“越跑越快”
4.clearInterval取消setInterval的定时执行，相当于timer中的enabled=false。因为可以设定多个定时器，所以取消时要指定清除那个定时器的标识，即setInterval的返回值。
5.setTimeout,超时。也是定时执行，但只执行一次。对应clearTimeout
二，body,document对象的事件
1.onload，网页加载完毕时触发，浏览器一边下载文档一边解析执行，可能会出现javascript执行时需要操作某个元素这个元素还没加载，若这样就要把操作的代码放到onload事件中，或者把javascript放在元素之后,比如在页面打开时就更改一个还未没创建的按钮的属性，可这么做<body onload="btn.value='ok'；"/>
2.onunload，网页关闭（或者离开）后触发
3.onbeforeunload，在网页准备关闭（或者离开）后触发。在事件中为“window.event.returnValue赋值（即设置要显示的警告消息），这样窗口离开（比如前进，后退，关闭）就会弹出确认消息<body onbeforeunload="window.event.returnValue='真的要放弃吗？'；"/>
4.其他事件。onclick,ondbclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.
三，window对象属性。
1.window.location.href。获取或设置地址。
2.window.event。用来获得发生事件时的信息，事件不局限于window对象的时间，类似于winform中的eventArgs e。
altKey属性，bool类型，类似还有ctrlKey,shiftKey.
clientX,clientY,客户区的坐标；screenX，screenY，屏幕上的坐标；offsetX，offsetY鼠标相对于事件源的坐标
returnValue属性，设置为false会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面；在表单校验的时候禁止提交表单到服务器；可考虑用这个，如：<a href="http://www.baidu.com" onclick="alert('禁止访问');window.returnValue=false;">百度</a>
srcElement,获得事件源对象。
keyCode发生事件时的按键值。
button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。
3.screen对象，屏幕的信息；.height;.width
4.clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值，返回值为粘贴板中的内容;setData("Text",val)设置粘贴板的值。参数永远是Text。练习：可以复制地址给好友。
当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;">
很多元素也有oncopy，onpaste事件。练习：禁止粘贴账号。
在网站中复制文章的时候为了防止拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自。。。转载请注明出处'+location.href);
}
oncopy="setTimeout('modifyClipborad()',100)",不能在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后执行，这样就不再oncopy的执行调用栈上了。
5.window.history.back()后退；window.history.forward()前进。也可以用window.history.go(-1),window.history.go(1)前进
6.window对象的document属性，最复杂属性之一。
document.write方法，向页面中写入内容。。在onclick等事件中写的代码会冲掉页面的内容，只有在页面加载过程中write才会与原有内容融合在一起。write经常在广告代码，整合资源代码中被使用。
document.getElementByIdx_x_x_x方法（非常常用），根据元素的id获得对象，网页中id不能重复，当然你也可以直接通过元素的id来引用元素，但是有有效范围，因此不建议直接通过id操作元素而是通过getElementById.
document.getElementByName,根据元素的name获得对象，由于页面中元素的name可以重复，因此此方法返回值是对象数组。比如获得radio的数组。
documen.getElementByTagName,获得指定标签名称的元素数组。
练习：点击一个按钮，被点击的按钮显示“呜呜”，其他显示“哈哈”
十秒钟后协议文本框下的注册按钮才能被点击，时钟倒数。(btn.disabled=true)
加法计算器,利用控件的ID来获得值相加注意用parsteInt转换；美女时钟、img控件加载图片，用时间来改变组装图片的名字。
四，DOM的动态创建。
1. 当我们想动态创建DOM对象时怎么办呢？也许你想到了document.write，但是这个方法只能在页面加载过程中动态创建
可以调用document_createElement_x_x_x方法来创建具有指定标签的DOM对象，然后通过调用元素的a方法将新创建元素添加到相应元素下(如div)。
2.几乎所有的DOM元素都有innerText，innerHTML属性(注意大小写)，分别是元素标签内内容的文本表示形式（标签内部的文本，如<a>文本</a>）和HTML源代码（标签内部的代码，如<div id='...'>innerHTML</div>），这两个属性是可读可写的。所以可用其动态修改元素。。动态产生的元素，浏览器中查看源代码是看不到的，可以通过DebugBar——>DOM——>文档——>HTML
五，其他。
1.冒泡事件。
2.事件中的this，我们之前有在事件响应函数中用event.srcElement，现在我们还可以用this，this表示发生事件的控件。但是只有在事件响应函数中才能使用this获得发生事件的控件，在事件响应函数调用的函数中是不能使用的，非要用的话要将this传递给函数或者使用event.srcElement
3.修改元素样式不是设置class属性，而是className属性。
修改元素的样式不能this.style="background-color:Red".单独修改样式的属性使用style.属性名。注意在CSS中属性名在javascript中操作的时候属性名可能不一样，主要集中在哪些属性名中含有-的属性，因为javascript中-是不能做属性，类名的。如CSS：background-color而javascript：style.background
4.控制层的显示。修改style.display。=‘none’不显示，=‘’显示。
鼠标进入控件的事件是onmouseover,离开的事件是onmouseout，移动的事件是onmousemove。
5.IE中body的事件范围。在body上添加onclick、onmouseover、等事件响应那么如果页面没有满，则body中最后一个元素以下（但是横向就不受限制）的部分是无法响应事件的。必须得使用代码在document上监听那些事件，比如document.onmouseover=方法。。。
6.通过DOM读取元素的top、left、width、height等取到的值是像10PX这样的字符串，为这些属性设值得时候IE可以是80,90这样的数字，但FF必须是加PX，%等这样的字符串形式，为了兼容统一我们要用字符串形式。
若要用DOM修改（比如自动加宽）元素的大小要首先要取出元素的宽度然后用parseInt将宽度转换为数字，然后再加上PX赋值回去。PS：不像C#中那样，在JS中parseInt是尽可能解析出数字的，比如50fhdhjh它也能解析出50来。
7.层的定位操作。元素的position样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative（相对于元素默认位置的定位）。若要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top、left两个样式值。
-------------------------------------------------------------------------------
form对象！
1.方法submit（）提交表单，但是不会触发onsubmit事件。如果按钮不是submit类型的想要实现同样的效果可先取得form的ID然后再调用它的submit（）方法。
2.点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，数据有问题则返回false即可阻止form提交。。记住，这是个很有用的方法，咱们要校验数据来着。
3.具体的一个应用场景是，下拉选择框，用户选择后即提交，无须点击按钮，只需onchange方法调用form的submit方法即可实现，并无神奇之处的。
4.面试时会被问具体浏览器之间的差异，及怎么解决，请观看录像60.。。JQuery能解决不同浏览器上DOM的不同。
5.JS正则表达式。JS中创建正则表达式类的方法：var regex=new RegExp("\\d{5}")或者var regex=/\d{5}/。。。/表达式/是JS中专门为简化正则表达式编写而提供的语法。写在里面的表达式不用管转义符。
RegExp对象的方法：test（str）判断是否匹配表达式。相当于IsMatch。
javascript——》DOM就是C#——》.NET FRAMEWORK
DOM也像winform一样，通过事件，属性，方法编程。
CSS+javascript+DOM=DHTML
一，window对象，代表当前浏览器窗口，使用window对象的属性，方法的时候可以省略window
1.confirm方法，显示“确定”，“取消”对话框，按下“确定”返回true，否则返回false
2.navigate方法，重新导航到指定的地址。
3.setInterval，每个一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识。<input type="button" value="滚动" onclick="setInterval('scroll()',500)"/>每调用一次setInterval都会产生一个新的定时器，并且旧的不会停止，所以看起来好像“越跑越快”
4.clearInterval取消setInterval的定时执行，相当于timer中的enabled=false。因为可以设定多个定时器，所以取消时要指定清除那个定时器的标识，即setInterval的返回值。
5.setTimeout,超时。也是定时执行，但只执行一次。对应clearTimeout
二，body,document对象的事件
1.onload，网页加载完毕时触发，浏览器一边下载文档一边解析执行，可能会出现javascript执行时需要操作某个元素这个元素还没加载，若这样就要把操作的代码放到onload事件中，或者把javascript放在元素之后,比如在页面打开时就更改一个还未没创建的按钮的属性，可这么做<body onload="btn.value='ok'；"/>
2.onunload，网页关闭（或者离开）后触发
3.onbeforeunload，在网页准备关闭（或者离开）后触发。在事件中为“window.event.returnValue赋值（即设置要显示的警告消息），这样窗口离开（比如前进，后退，关闭）就会弹出确认消息<body onbeforeunload="window.event.returnValue='真的要放弃吗？'；"/>
4.其他事件。onclick,ondbclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.
三，window对象属性。
1.window.location.href。获取或设置地址。
2.window.event。用来获得发生事件时的信息，事件不局限于window对象的时间，类似于winform中的eventArgs e。
altKey属性，bool类型，类似还有ctrlKey,shiftKey.
clientX,clientY,客户区的坐标；screenX，screenY，屏幕上的坐标；offsetX，offsetY鼠标相对于事件源的坐标
returnValue属性，设置为false会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面；在表单校验的时候禁止提交表单到服务器；可考虑用这个，如：<a href="http://www.baidu.com" onclick="alert('禁止访问');window.returnValue=false;">百度</a>
srcElement,获得事件源对象。
keyCode发生事件时的按键值。
button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。
3.screen对象，屏幕的信息；.height;.width
4.clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值，返回值为粘贴板中的内容;setData("Text",val)设置粘贴板的值。参数永远是Text。练习：可以复制地址给好友。
当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;">
很多元素也有oncopy，onpaste事件。练习：禁止粘贴账号。
在网站中复制文章的时候为了防止拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard(){
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自。。。转载请注明出处'+location.href);
}
oncopy="setTimeout('modifyClipborad()',100)",不能在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒后执行，这样就不再oncopy的执行调用栈上了。
5.window.history.back()后退；window.history.forward()前进。也可以用window.history.go(-1),window.history.go(1)前进
6.window对象的document属性，最复杂属性之一。
document.write方法，向页面中写入内容。。在onclick等事件中写的代码会冲掉页面的内容，只有在页面加载过程中write才会与原有内容融合在一起。write经常在广告代码，整合资源代码中被使用。
document.getElementByIdx_x_x_x方法（非常常用），根据元素的id获得对象，网页中id不能重复，当然你也可以直接通过元素的id来引用元素，但是有有效范围，因此不建议直接通过id操作元素而是通过getElementById.
document.getElementByName,根据元素的name获得对象，由于页面中元素的name可以重复，因此此方法返回值是对象数组。比如获得radio的数组。
documen.getElementByTagName,获得指定标签名称的元素数组。
练习：点击一个按钮，被点击的按钮显示“呜呜”，其他显示“哈哈”
十秒钟后协议文本框下的注册按钮才能被点击，时钟倒数。(btn.disabled=true)
加法计算器,利用控件的ID来获得值相加注意用parsteInt转换；美女时钟、img控件加载图片，用时间来改变组装图片的名字。
四，DOM的动态创建。
1. 当我们想动态创建DOM对象时怎么办呢？也许你想到了document.write，但是这个方法只能在页面加载过程中动态创建
可以调用document_createElement_x_x_x方法来创建具有指定标签的DOM对象，然后通过调用元素的a方法将新创建元素添加到相应元素下(如div)。
2.几乎所有的DOM元素都有innerText，innerHTML属性(注意大小写)，分别是元素标签内内容的文本表示形式（标签内部的文本，如<a>文本</a>）和HTML源代码（标签内部的代码，如<div id='...'>innerHTML</div>），这两个属性是可读可写的。所以可用其动态修改元素。。动态产生的元素，浏览器中查看源代码是看不到的，可以通过DebugBar——>DOM——>文档——>HTML
五，其他。
1.冒泡事件。
2.事件中的this，我们之前有在事件响应函数中用event.srcElement，现在我们还可以用this，this表示发生事件的控件。但是只有在事件响应函数中才能使用this获得发生事件的控件，在事件响应函数调用的函数中是不能使用的，非要用的话要将this传递给函数或者使用event.srcElement
3.修改元素样式不是设置class属性，而是className属性。
修改元素的样式不能this.style="background-color:Red".单独修改样式的属性使用style.属性名。注意在CSS中属性名在javascript中操作的时候属性名可能不一样，主要集中在哪些属性名中含有-的属性，因为javascript中-是不能做属性，类名的。如CSS：background-color而javascript：style.background
4.控制层的显示。修改style.display。=‘none’不显示，=‘’显示。
鼠标进入控件的事件是onmouseover,离开的事件是onmouseout，移动的事件是onmousemove。
5.IE中body的事件范围。在body上添加onclick、onmouseover、等事件响应那么如果页面没有满，则body中最后一个元素以下（但是横向就不受限制）的部分是无法响应事件的。必须得使用代码在document上监听那些事件，比如document.onmouseover=方法。。。
6.通过DOM读取元素的top、left、width、height等取到的值是像10PX这样的字符串，为这些属性设值得时候IE可以是80,90这样的数字，但FF必须是加PX，%等这样的字符串形式，为了兼容统一我们要用字符串形式。
若要用DOM修改（比如自动加宽）元素的大小要首先要取出元素的宽度然后用parseInt将宽度转换为数字，然后再加上PX赋值回去。PS：不像C#中那样，在JS中parseInt是尽可能解析出数字的，比如50fhdhjh它也能解析出50来。
7.层的定位操作。元素的position样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative（相对于元素默认位置的定位）。若要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top、left两个样式值。
-------------------------------------------------------------------------------
form对象！
1.方法submit（）提交表单，但是不会触发onsubmit事件。如果按钮不是submit类型的想要实现同样的效果可先取得form的ID然后再调用它的submit（）方法。
2.点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，数据有问题则返回false即可阻止form提交。。记住，这是个很有用的方法，咱们要校验数据来着。
3.具体的一个应用场景是，下拉选择框，用户选择后即提交，无须点击按钮，只需onchange方法调用form的submit方法即可实现，并无神奇之处的。
4.面试时会被问具体浏览器之间的差异，及怎么解决，请观看录像60.。。JQuery能解决不同浏览器上DOM的不同。
5.JS正则表达式。JS中创建正则表达式类的方法：var regex=new RegExp("\\d{5}")或者var regex=/\d{5}/。。。/表达式/是JS中专门为简化正则表达式编写而提供的语法。写在里面的表达式不用管转义符。
RegExp对象的方法：test（str）判断是否匹配表达式。相当于IsMatch。
