1、了解事件对象。 IE支持全局事件对象。FF不支持 为了兼容,可以将event作为参数传递 2、事件对象的属性: 浏览器窗口坐标:clientX,clientY 获得发生事件的组件 注意IE与firefox 获得发生事件的组件的方式不一样 IE:srcElement FireFox:target 3、了解事件冒泡机制: 浏览器中, 事件触发后会由子元素向父元素逐级传播, 这种传播方式称为”事件冒泡” 采用 event.cancelBubble = true; 阻止事件的传播。 4、掌握样式对象 style和currentStyle(IE)的区别 组件对象的style属性只可以获取内联样式;获得所有的样式可以采用currentStyle属性 getComputedStyle(FF) 在FireFox中不支持currentStyle,使用window.getComputedStyle代替 5、理解HTML DOM模型,掌握几个常见对象的方法和属性。 Window对象 window open方法 打开一个新的窗口,例如: window.open ('1.html', 'new', 'height=100, width=200, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'); '1.html' 弹出窗口的文件名; 'new' 弹出窗口的名字;如果该参数指定了一个已经存在的窗口,则 open() 方法不再创建一个新窗口,而只是返回对指定窗口的句柄。 height=100 窗口高度; width=200 窗口宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; toolbar=no 是否显示工具栏,yes为显示; menubar 是否显示菜单栏。 scrollbars 是否显示滚动栏。 resizable=no 是否允许改变窗口大小,yes为是 。 location=no 是否显示地址栏,yes为是。 status=no 是否显示状态栏内的信息。 close方法 关闭窗口 返回值为窗口对象句柄 status 属性 设置或返回窗口状态栏中的文本。 document属性 获得Document对象 location属性 获得Location对象 alert方法 弹出一个警告对话框 confirm方法 弹出一个选择对话框,返回用户是否确认。 prompt方法 弹出一个供用户输入信息的对话框,返回用户输入信息。 setTimeout方法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 clearTimeout方法 clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。 setInterval方法 按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。 clearInterval方法 clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID Document对象 write方法 write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 getElementById 根据id获得元素对象 属性 forms forms[] 返回对文档中所有 Form 对象的引用 Form对象 onsubmit onreset 属性 elements elements[] 包含表单中所有元素的数组 Select对象 length l length 属性可返回下拉列表中选项的数目。 selectedIndex selectedIndex 属性可设置或返回下拉列表中被选选项的索引号 options 返回包含 <select> 元素中所有 <option> 的一个数组。 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除; 如果 options.length 属性的值比当前值小,出现在数组尾部的元素就会被丢弃。; 如果把 options[] 数组中的一个元素设置为 null,那么选项就会从 Select 对象中删除. onchange 当改变选择时调用。 Select 对象的 onchange 属性引用了一个事件句柄函数。当用户选中一个选项, 或者取消了对一个选项的选定时,就会调用该句柄。这个事件不会指定新的选项是什么, 必须通过 Select 对象的 selectedIndex 属性,或者各个 Option 对象的 selected 属性来确定. 组件对象的style属性只可以获取内联样式;获得所有的样式可以采用currentStyle属性 getComputedStyle(FF) 在FireFox中不支持currentStyle,使用window.getComputedStyle代替 Table对象 属性 rows 属性 rows 集合返回表格中所有行的一个数组,该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行。 tBodies属性 tBodies[] 返回包含表格中所有 tbody 的一个数组。 tFoot 返回表格的 TFoot 对象。如果不存在该元素。 tHead 返回表格的 THead 对象。如果不存在该元素。 方法 insertRow insertRow(index) 方法用于在表格中的指定位置插入一个新行。 返回一个 TableRow,表示新插入的行。 该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。 新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。后续可以使用TableRow.insertCell() 方法给新创建的行添加内容。为该行添加单元格。 deleteRow方法 deleteRow(index) 方法用于从表格删除指定位置的行。 TableRow对象 属性 cells cells[] 返回包含行中所有单元格的一个数组 rowIndex 返回该行在表中的位置。 方法 deleteCell方法 deleteCell(index) 方法用于删除表格行中的单元格(<td> 元素)。 insertCell方法 insertCell(index) 方法用于在 HTML 表的一行的指定位置插入一个空的 <td> 元素。 返回值 一个 TableCell 对象,表示新创建并被插入的 <td> 元素。 该方法将创建一个新的 <td> 元素,把它插入行中指定的位置。新单元格将被插入当前位于 index 指定位置的 表元之前。如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。后续可以调用 TableCell的innerHTML属性指定单元格中的内容. w3c dom 1、继承关系图 Node Document HTMLDocument HTMLBodyElement Element HTMLElement HTMLFormElement HTMLInputElement HTMLSelectElement HTMLOptionElement HTMLDivElement HTMLTableElement HTMLTableCaptionElement HTMLTableRowElement HTMLTableCellElement 2、操作 (1)查找 document.getElementById() 或者遍历 parentNode previousSibling nextSibling childNodes firstChild lastChild getElementsByTagName(tagName) (2)创建 document.createElement(Tag) (3)添加 appendChild insertBefore replaceChild (4)删除 removeChild