dom编程学习笔记.doc

一、 DOM编程a) 基本概念Dom(document object model)文档对象模型。其实就是将一些标记型的文档以及文档中的内容当成对象。为什么要将这些文档以及其中的标签封装成对象呢？因为可以在对象中定义其属性和行为，可以方便操作这些对象。b) DOM在封装标记型文档时，有三层模型：DOM1:针对html文档DOM2:针对xhtml文档DMO3:针对xhml文档c) html，xhtml，xml：这些都是标记型文档。DHTML：是多个技术的综合体。叫做动态的html。html：负责将数据进行标签的封装。css：负责标签的样式。dom：负责将标签以及标签中的数据封装成对象。javascript：负责通过程序设计方式来操作这些对象。d)标签之间存在这层次关系：Window|-documenthtml |-head|-title|-base|-link|-meta|-stylescript |-body|-div|-form |-input |-select|-span|-a|-table |-tbody |-tr|-td|-th|-dl |-dt |-dd通过这个标签层次，可以形象的看做是一个属性结构。那么也称标记型文档，加载进内存的是一颗DOM树。这些标签以及标签中的数据都是这棵树上的节点。（一个节点可能有很多子节点，但只能有一个父节点）当标记型文档加载进内存，那么内存中就有了一个对应的DOM树。DOM对于标记型文档的解析有一个弊端就是文档过大，相对消耗资源。对于大型文档可以使用SAX这种方式解析。e)节点类型：标签型节点：类型：1属性节点：类型：2文本型节点：类型：3注释型节点：类型：8document：类型：9注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意。节点的关系：父节点：parentNode子节点：childNodes:直接子节点。返回的是一个节点对象数组。兄弟节点：上一个兄弟节点：previousSibling下一个兄弟节点：nextSibling-获取节点可以通过节点的层次关系完成，也可以通过document对象完成。getElementById：通过id属性值获取对应的节点对象。如果有多个id值相同。获取的是第一个id所属对象。尽量保证ID唯一性。返回的是一个对象。getElementsByName：通过标签的name属性值获取对象。返回的一堆对象。其实是一个对象数组。getElementsByTagName。既没有id也没有name时，可以通过标签名来获取节点对象。返回的是一堆对象。其实是一个对象数组。大多数容器型标签都具备该方法。利用节点关系访问HTML元素的属性和方法总结如下：Node parentNode：返回当前节点的父节点。Node previousSibling：返回当前节点的前一个兄弟节点。Node netxSibling：返回当前节点的后一个兄弟节点。Node childNodes：返回当前节点的所以子节点。Node firstChild：返回当前节点的第一个子节点。Node lastChild：返回当前节点的最后一个子节点。-以上全是属性Node document.getElementById(idVal)：返回文档中中id属性值为idVal的HTML元素。Node document.getElementByTagName(tagName)：返回标签名称为“tagName”的所有节点Node document.getElementByName(name):返回Name属性为“name”的所有节点。getAttribute（“属性名”）：用来获取属性的值。setAttribute（“属性名”，“属性值”）：用来设置属性的值。二、 HTML元素的常用属性和方法a) 表单元素i. action：返回该表单的action属性值。该属性值制定表当的提交地址。ii. elements：返回表单内全部表单控件所组成的数组。iii. method：返回表单的method属性。iv. reset（）：重设表单，将所有表单元素的值设置为初始值。v. submit（）：提交表单。b) 列表框、下来菜单（HTMLSelectElement）i. form：返回列表框、下拉菜单所在的表单对象。ii. length：返回列表框、下拉菜单的选项个数。iii. options:返回列表框、下拉菜单里所有选项组成的数组。iv. select.optionsindex:返回列表框、下拉菜单的第index+1各选项。v. defaultSelected：返回该选项默认是否被选中。vi. selected：返回该选项是否被选中。vii. text：返回该选项呈现的文本。viii. value：返回每个选项的value属性。c) 表格i. Table对象1. rows：返回包含表格中所有行的第一行。2. insertRow（index）：在表格中插入一行。index表示新行将被插入到index所在行之前。若index等于表格中的行数，则新行被插入到表格的末尾。若index等于0，则新行被插入到表格的第一行，因此index不能小于0或大于表格中的行数。3. deleteRow（index）：从表格中删除行。ii. TableRow对象1. cells：返回包含行中所有单元格的一个数组。2. rowIndex：返回该行在表中的位置。a) insertCell（index）：在一行中的指定位置插入一个空的标签。如果index等于行中的单元格数，则在末尾添加，如果等于0，则在开始位置添加。3. deleteCell（index）：删除行中指定的单元格。iii. TableCell对象1. cellIndex：返回单元格在某行单元格集合中的位置。2. innerHTML：设置或返回单元格的开始标签和结束标签之间的HTML3. align：设置或返回单元格内部数据的水平排列方式。4. className：设置或返回元素的class属性。iv. document对象中的创建和删除节点的方法1. document.createElement(Tag)：创建Tag标签对应的节点。2. Node cloneNode（boolean deep）：复制当前节点。当deep为true时，表示在复制当前节点的同时，复制该节点的全部后代节点。false表示仅复制当前节点。3. 添加节点：当一个节点创建成功后，一定要将该节点添加到DOM中才行。对于普通节点，可采用Node对象的如下方法来添加节点：a) appendChild（Node newNode）：将newNode添加成当前节点的最后一个子节点。b) insertBefore（Node newNode，Node refNode）：在refNode节点之前插入newNode节点。c) replaceChild（Node newNode，Node oldNode）：将oldNode节点替换成newNode节点d) write（）：向document对象中输出一条字符串，输完不换行e) writeln（）：输完后换行。4. 删除节点：删除节点通常借助于父节点，Node对象提供了如下方法来删除子节点。removeChild（oldNode）：删除oldNode子节点。从父节点中删除该子节点后，该子节点代表的内容也会消失。三、 window对象的常用方法和属性window对象是整个javascript脚本运行的顶层对象。在定义一个全局变量时，该变量时作为window对象的一个属性存在的。常用方法：a) alert（）：只有一个参数，仅显示警告框的消息，无返回值，不能对脚本产生任何改变b) prompt（）：有两个参数，是输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击确定按钮则返回用户输入的值。c) confirm（）：只有一个参数，是确认对话框，显示提示框的消息，单击确定返回true，单击取消返回false。d) close（）：关闭窗口。e) open（）：打开窗口，用于装载新的URL所指向的地址，并可指定一系列的新属性，包括隐藏菜单等。f) 支持定时器的方法：setTimeout（“code”,interval）:用于在制定的“interval”毫秒后调用函数“code”-clearTimeout：删除g) setInterval（“code”,interval）：按照指定的周期“interval”重复调用函数“code”。-clearInteval（）：删除定时器。window对象常用属性：a)closed:返回一个Boolean值用于判断该窗口是否处于关闭状态。b)document:返回该窗口内装载的HTML文档。c)history：返回该窗口的浏览历史。d)location：返回该窗口装载的HTML文档的URL。e）screen：有关客户端的屏幕和现实性能的信息。window对象常用事件：a) onload：一个页面或一幅图片完成加载。b) onmouseover：鼠标移到某元素之上。c) onclick：鼠标单击某个对象。d) onkeydown：某个键盘按键被按下。e) onchange：域的内容被改变四、 HTML文档控件支持的事件及描述a) onclick：单击某个标签时触发。大多数可现实的标签都支持b) ondbclick：双击某个元素触发大多数可现实的标签都支持c) onload：某个对象对装载完毕时触发。、d) onabort：图片加载被中断。e) onerror：图片加载出错时触发。f) onblur：当某个HTML元素失去焦点时触发该事件，通常意味着用户已经激活了另一个HTML元素，通常对应用户单击了另一个HTML元素，或使用Tab切换了焦点。、都支持g) onfocus:当某个标签得到焦点时触发，通常是用户单击，或者使用Tab建切换焦点、都支持h) onchange：当表单域的值被修改时触发。、支持i) onkeydown：当焦点在当前元素上面，按下键盘的某个键时触发。表单控件和标签支持j) onkeypress：当焦点在当前元素上面，单击键盘的某个键时触发。表单控件和标签支持k) onkeyup：当焦点在当前元素上面，并且松开了键盘的某个键时触发，表单控件和标签支持l) onmousedown：当焦点停留在当前元素上面，并且按下数遍键时触发。m) onmousemove：当焦点停留在当前元素上面，并且鼠标在当前元素上面移动时触发。n) onmouseout：当鼠标移出某个元素时触发，及鼠标一开始停留在元素上面。o) o