序： 近来被老刘拉去参加一个需要使用javascript的比赛，但是一点也不明白，所以只能从0开始学起。这里先声明下，写这篇文章的起因是想对自己所学做个总结，而且哥的笔记纸用完了....由于可能在以后不会过多得使用，所以在学习过程中关注的重点在于常用性，所以可能很多地方会不完整或不正确，恳请大家及时指出。
一、 BOM和W3C DOM
javascript是一种浏览器本身就支持的语言，就想HTML那样不需要tomcat这类web服务器的解析就能运行的浏览器原生语言，它最先被Netscape浏览器支持，所以现在的标准以及其他浏览器中很多javascript特性都或多或少延续了netscape的一些特性。这也是W3C DOM出台的原因，因为IE以及其它浏览器都以自己的方式来支持JS（javascript的简称，下同），所以需要W3C为其进行标准化工作。
浏览器是一个以window对象为根的"元素树"模型， window对象代表的是浏览器，它和它的直接子孙形成了BOM（浏览器对象模型)，包括window、location、document、screen、history对象等，BOM并不属于W3C标准中的一部分，但是仍被大多数浏览器支持。而以Document为根的子树是W3C Dom所定义的，document对象为网页，form是表单，TextNode就是html标签之间的字符串；正是将这些 HTML的元素(Element)对象化了，才使得javascript有的放矢，编程人员便可以通过js语言动态控制这些对象来达到一些目标，比如最常见的就是对注册信息的完整性以及格式正确性的实时检查。
W3C DOM定义了脚步语言和结构化文档（HTML、XML）进行交换的方法，它将整个文档定义为由多个对象所组成的对象树，这些对象在DOM中称为结点（Node），它共定义了12种不同类型的结点，其中7种是可以直接在HTML中使用的，而其它5中应用在 XML中。在这7种类型的结点中有四种是常用的：元素(element)、文本(text)、属性(Attribute)和文档(document)，并且得到了几乎所有浏览器的支持（除了mozilla，很多浏览器都只实现了7种中的四种）。每一个结点都有固定的方法和属性，脚本语言就是利用这些方法和属性和结点进行交互从而操作整个文档。
A) 常见结点属性：
nodeName: 结点名称，比如网页元素的nodeName即标签名
nodeValue:结点值，比如Text类型的Node的值为text字符串
nodeType: 结点类型，上述12种弄类型中的一种
firstChild和lastChild：结点的第一个和最后一个孩子结点指针
parent ：父亲结点指针
previousSibling和nextSibling：兄弟结点指针
B）常见结点方法：
Javascript提供了几个最基本的操作DOM对象的内置函数:
1、node.getElementById(id)
通过id来获得某一个element的对象引用, 例如：
问和修改对象的基本方法来完成后续工作
2、 node .getElementByTagName(tag_name)
通过tag_name获得所有与指定tag_name一样的element所组成的数组array，而javascript对array也提供了一套比较完备的函数和方法来操作它们， 例如：
注： 除了上述那两个基本的函数，还有一些比较常用的对象及其方法，这些对象和方法的调用规则遵循标准的面向对象规定，除了window的直接方法和孩子是不需要使用"window."前缀以外。所以经常能看到alert(...)这种直接调用形式而不是window.alert()这种完整形式。而在获得表单元素以及下属元素时，也可以使用另外一种方式来代替getElement方法，即：
3、node.AppendChild()
应用场景是在网页中动态添加一个标签。比如在填写注册表单时，若填写错误就会在这栏后添加一个文字提醒：
在这里再说说document.write这个document的内置方法。它并不是在这个网页的最后 添加一行，而是会将整个网页的内容全部被替换成write的 参数 字符串，使用时需要特别小心。
二、事件模型
1、传统的事件模型
就是将事件当做一个HTML元素的属性来对待，比如需要为button 注册 一个onclick事件处理函数，则使用如下形式来注册 ：
2、W3C DOM事件模型之事件对象
传统的事件模型 的缺点是不能给一个网页元素的同一事件同时注册多个事件响应函数，而且在事件传播模型中，IE和其他浏览器又有差别，这又需要W3C来插足了~ 在W3C DOM level 2中引进了事件对象以及相关的函数。事件对象是在触发事件而自动调用相应事件处理函数时创建的临时变量，即事件处理函数的形参。这个变量有自己的属性和方法，比如有记录事件发生时按键的keycode，鼠标点击的键和所在的坐标，事件触发的元素，事件的类型等。比如禁止鼠标右键：
当点击鼠标右键时，e被自动实参化，它就是建立的event引用。
3、 W3C DOM事件模型之事件传播
这里的传播指的是”事件对象“的传播，一共有两种传播模式，如下图所示:
A）冒泡模式(Bubble)
IE浏览器只支持这种形式的传播，即事件对象从事件触发的目标（target）开始，一直传播到侦听同样事件类型的target祖先结点为止。即作为全局变量的时间对象沿着”元素树“向上传播
B）捕捉模式（Capture）
这种模式与冒泡模式正好相反，即事件对象是从目标的外层向目标传播的，即从树的根结点向叶子结点传播。
举例说明：
比如，若body和其中的button元素都注册了onclick事件( οnclick="xxx()"），则在冒泡模型中，首先会调用button注册的事件响应函数，再执行body的。而在捕捉模式下，是会先调用body 的事件响应函数，再调用button的响应函数
有时为了 阻止 事件对象的传播，则可调用事件对象的方法 e.stopPropagation();来阻止，它既可以阻止事件捕捉过程的传播，也可以阻止冒泡阶段的传播。
4、 W3C DOM 事件模型之事件注册
为了能让一个元素对一个事件同时定义多个事件响应函数，并且能避免IE和其他浏览器在事件传播上的竞争。W3C DOM为网页元素定义了相关的函数 addEventListener("除去on的事件名",响应函数，true/false)，其中true为capture传播模式，false为冒泡传播模式；若采用传统事件注册方法或者 element.onEvent =handler()的方法，则默认为冒泡传播模式。例如
这个例子可以很好的反映出事件传播的轨迹，也综合使用了传统的以及新型的事件注册方法；在事件响应函数之外还可以使用内部对象event来引用事件对象。
经验之谈： 如果head中的一段script代码使用getElementById来获得body定义的某一个元素时，其返回的引用是为空的，因为 网页加载是从上至下的，即还未给下面的元素开创内存空间。例如：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
