为什么使用JavaScript操作Dom
1、Javascript最终是要操作html页面，让html变成dhtml，而操作html页面就要用到dom。Dom就是把html页面模拟成一个对象，就像XDocument一样，把xml模拟成了一个对象，提供了操作各个节点的方法，直接调用就可以了。
2、如果javascript只是执行一些计算、循环等操作，而不能操作html也就失去了它存在的意义。
Dom小知识：
1、DOM就是HTML页面的模型，将每个标签都做为一个dom对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。 JavaScript→Dom就是C#→.Net Framwork。没有.net，C#只能for、while，连WriteLine、MessageBox都不行。Dom就是一些让JavaScript能操作HTML页面控件的类、函数。
2、DOM也像WinForm一样，通过事件、属性、方法进行编程。
3、CSS+JavaScript+DOM=DHTML
如果你还不清楚什么是Dom以及它之于JS的价值请看下图：
一段普通的HTML页面代码：
<html>
<head>
<title>HTML DOM</title>
</head>
<body>
<h1>DOM的结构</h1>
<p><a href="href">链接</a></p>
</body>
</html>
而浏览器在解释该页面的时候 会将它模拟成为Dom树 结构如下：
DOM编程
事件
<body οnlοad="" οnmοusedοwn=“alert(‘哈哈’)”>当点击鼠标的时候执行onmousedown中的代码。有的事件响应的代码太多，就放到单独的函数中：
<script type="text/javascript">
function bodymousedown() {
alert("点我啊");
alert("点坏了 你赔吧");
}
</script>
<body οnmοusedοwn="bodymousedown()">bodymousedown后的括号不能丢（不能写成： οnmοusedοwn="bodymousedown" ），因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。
Windows . Onload()是指整个页面文件加载完成之后才会去触发 网站优化时可以将调用外部的js文件代码放在body最后 在windows.onload中指定调用操作 这样页面显示速度会快些
括号不能丢 那什么时候可以不要括号比如：windows.οnlοad=funcation(){document.getElementById(“btn”).οnclick=showName;}这个时候就可以不要括号 因为这里要把方法的对象赋给onclik而不是去赋值这个事件 或者说是将事件的指针赋给onclik
OnLoad
<html>
< head>
<title ></ title>
<script src="javascript/JScript1.js" type="text/javascript"></ script >
<script type="text/javascript">
window.onload = function () {
alert( "整个窗体加载完毕" );
//运行时至JScript1.js外部文件连接时 此时浏览器请求外部js文件 会暂停当前浏览器的运行 为什么？
//因为有可能页面中使用到外部js文件定义的方法
//那么针对这一点可以将加载js外部文件的外部标签放在页面body的最后 这样用户可以很快的看到网页内容
//之后将调用外部js的事件写入window.onload中 避免找不到js事件
}
</script >
</ head>
< body > <!--οnlοad="alert(123)"当body所有资源内容加载完毕才会调用-->
</ body>
</ html>
方法调用
< head>
<title ></ title>
<script type="text/javascript">
window.onload = function () {
//document.getElementById("btn").onclick = show();
//此时调用了=右边的show()方法 并将方法的返回值赋给了onclik属性 效果 页面加载直接弹出234
document.getElementById( "btn" ).onclick = show; //此时是将show方法的指针赋给了onclik属性
}
function show() {
alert( "234" );
}
</script >
</ head>
< body >
< input type ="text" id ="username" />
<input type="button" id="btn" value="anniu" onclick="show()"/>
<!--按钮的事件属性中指定方法的时候括号是不能省的 js中动态给按钮添加onclick的时候就不要加括号了-->
</ body>
</ html>
Window对象
window对象代表当前浏览器窗口。使用window对象的属性、方法的时候可以省略window，比如：
window.alert('a');可以省略成alert('a');
window对象常用的几个方法：
window.alert();
window.confirm();//确定、取消对话框，返回true或false;
window.close();//关闭浏览器窗口
window.prompt(text,defaultText) ;//弹出一个输入框,返回用户输入的值
window.navigate(url);//将网页重新导航到url,只支持IE,建议使用window.location.href=‘url’;//支持大多数浏览器
全局变量与局部变量
值类型：
< head>
<title ></ title>
<script type="text/javascript">
//值类型的全局变量与局部变量
window.onload = function () {
show();
alert(globle); //3.gege globle = "gege";前没有加var
alert(globle); //5.haha var globle = "gege" 加了var那么这里返回haha
}
var globle = "haha" ; //1.它是全局的 属于window的对象
function show() {
//globle = "gege"; //2.这里访问的就是window.globle 对全局变量的修改
var globle = "gege" //4.这里是重新定义的局部变量globle 对局部变量的修改 不影响全局变量值
alert(globle == window.globle); //6.返回false
alert(globle); //gege
}
</script >
</ head>
引用类型：
< head>
<title ></ title>
<script type="text/javascript">
//值类型的全局变量与局部变量
window.onload = function () {
show();
alert(globle); //3.gege globle = "gege";前没有加var
alert(globle); //5.haha var globle = "gege" 加了var那么这里返回haha
}
var globle = "haha" ; //1.它是全局的 属于window的对象
function show() {
//globle = "gege"; //2.这里访问的就是window.globle 对全局变量的修改
var globle = "gege" //4.这里是重新定义的局部变量globle 对局部变量的修改 不影响全局变量值
alert(globle == window.globle); //6.返回false
alert(globle); //gege
}
</script >
</ head>
引用类型与值类型的区别
< head>
<title ></ title>
<script type="text/javascript">
//引用类型的全局与局部
window.onload = function () {
//showObj();
//showObj2(NewObject);
showObj3(NewObject);
alert(NewObject.name);
}
var NewObject = new Object();
NewObject.name = "wanghao" ;
NewObject.age = 12;
function showObj() {
//NewObject.name = "jianglan";//这里是对全局变量的修改 所以上述结果两次都显是jianglan
var NewObject = new Object();
NewObject.name = "jianglan" ;//这里只是对新定义的对象进行属性的赋值 所以先显示jianglan 后显示wanghao
alert(NewObject.name);
}
function showObj2(NewObject) {//如果将对象以参数的形式传递过来的话
NewObject.name = "jianglan" ;//就是将外部变量的引用传递过来了 修改的就是引用地址的内容 所以两次都显示jianglan
alert(NewObject.name);
}
function showObj3(NewObject) {//方法中的形参可理解为 方法中声明的局部变量 只是将这个变量的内存地址指向了全局的NewObject
//var NewObject;
NewObject.name = "jianglan" ;//它是对原地址的修改即修改wanghao
NewObject = new Object();//将原本指向全局内存地址的变量 重新指向新的内存地址
NewObject.name = "jianglan2" ;//为新地址赋值 所以下面显示结果当然是jianglan2
alert(NewObject.name); //但是onload中任然访问全局对象地址 所以是修改后的jianglan
}
</script >
</ head>
值类型与引用类型代码图解：
