JavaScript与Dom

aijuans

浏览: 1547103 次

最近访客更多访客>>

loginboot

taijibamen

pinocao

hejin_sl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 25)
2014-11 ( 13)
更多存档...

为什么使用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 onload="" onmousedown=“alert(‘哈哈’)”>当点击鼠标的时候执行onmousedown中的代码。有的事件响应的代码太多，就放到单独的函数中：

function bodymousedown() {

alert("点我啊");

alert("点坏了你赔吧");

}

</script>

bodymousedown后的括号不能丢（不能写成： onmousedown="bodymousedown" ），因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。

Windows . Onload()是指整个页面文件加载完成之后才会去触发网站优化时可以将调用外部的js文件代码放在body最后在windows.onload中指定调用操作这样页面显示速度会快些

括号不能丢那什么时候可以不要括号比如：windows.onload=funcation(){document.getElementById(“btn”).onclick=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 > <!--onload="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>