黑马程序员-第八季dom的一些手写笔记_跟movn your body 差不多的歌-优快云博客

本文链接：https://blog.youkuaiyun.com/x985127948/article/details/8206185

本文介绍DOM模型的概念及如何使用JavaScript对HTML页面进行编程控制。探讨了事件处理机制，如onload、onclick等，并通过实例展示了简单的加法计算器实现。此外，还讨论了不同浏览器对DOM和CSS的支持差异。

　------- android培训、java培训、期待与您交流！ ----------

Dom就是html页面的模型，将每个标签都作为一个对象，javascript通过调用dom中的属性、方法就可以对页面中的文本、层等元素进行编程控制，比如通过操作文本框的dom对象，就可以读取文本框中的值，设置文本框中的值。

Dom也像winform一样，通过事件、属性、发放进行编程。

Css+javascript+dom=dhtml

Onload：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现javascript执行时需要操作的代码放到onload事件中，或者可以把javascript放到元素之后，元素的onload事件是元素自己加载完毕时触发，boady的onload才是全部加载完成时才触发。

除了特有的属性之外，还有通用的heml元素的事件：

Onclick（单击）、ondbclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等。

Window.event是非常重要的属性，用来获取发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关的信息。

Document是window对象的一个属性，因为使用window对象成员的时候可以省略window，所以一般直接写document.

练习1：加法计算器。两个文本框中输入数字，点击=号按钮将相加的结果放到第三个文本框中。<head>

function a() {

var b = document.getElementById("t1").value;

var c = document.getElementById("t2").value;

b = parseInt(b, 10);

c = parseInt(c, 10);

document.getElementById("t3").value = b + c;

}

</script>

</head>

<body>

</body>

事件中的this，除了可以使用event.srcElement在事件中相应函数之外，this表示发生事件的控件。只能在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要用将this传递给函数，或者使用event.srcElement。

Ie中如果在body上添加onclick、onmousemove等事件响应，那么如果页面没有满，则body中最后的一个元素一下（横向的不受限制）的部分则是无法响应事件的，必须使用代码在document上监听那些事件，比如document.onmousemovn=MovePic

并且在FF中也差不多的。

元素的position样式值：static（无定位，显示默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位），位置不会随着浏览器的滚动而变化，ie6不支持），relative（相对元素默认位置的定位），如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、left（左边缘距离）两个样式值。

Form对象是表单的dom对象

方法：submit（）提交表单，但是不会触发onsubmit事件。

实现autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submiit按钮以后才提交，当光标离开的时候出发onblur事件，在onblur中调用form的submit方法。

再点击submit后form的onsubmit事件被出发，在onsubmit中可以进行数据校验，数据有问题，则返回false即可取消提交。

不同的浏览器对dom支持的方法不一样。

不同的浏览器对css的支持不一样，所以出现在ie中显示正常的网页，在ff西全部乱掉了。

Jquery之类的框架进行了封装，将不同的浏览器的差异帮开发人员处理掉了，开发人员只要调用jquery的方法，jquery会帮助在不同的浏览器中进行翻译。

　------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------