控件 HTMLFormElement 对应XHTML文档表单控件 HTMLSelectElement 对应XHTML文档列表框架、下拉菜单控件 HTMLOptionElement 对应XHTML文档列表框架、下拉菜单的选项控件 HTMLInputElement 对应XHTML文档单行文本框、密码框、按钮等控件 HTMLTableElement 对应XHTML文档中的表格控件 HTMLTableCaptionElement 对应XHTML文档中的表格的标题控件 HTMLTableColElement 对应XHTML文档中的表格的列控件 HTMLTableCellElement 对应XHTML文档中的表格的单元格控件 HTMLULElement 对应XHTML文档中的有序列表控件 HTMLOLElement 对应XHTML文档中的无序列表控件 HTMLLIElement 对应XHTML文档中的列表项控件 访问html元素 根据 id getElementById getElementsByTagName document.getElementById("A").getElementsByTagName("div") //g一层一层的用 attributes 返回元素的属性的 NamedNodeMap 5 1 9 Yes childNodes 返回元素的子节点的 NodeList 5 1 9 Yes object.childNodes(iIndex) firstChild 返回元素的首个子节点 5 1 9 Yes lastChild 返回元素的最后一个子节点 5 1 9 Yes 根据节点关系 DEMO 父元素:parent 上一个节点:previousSibling 下一个节点:nextSibling 访问表单域控件.. DEMO 
 ---一个表单不是的提交按钮提交到不同的url This.parentNode.lengh 表单数 This.parenNode.elements[0].value = “ddd” elements好像只适用于表单 访问下拉列表控件/列表框的(都是由seleted组成) DEMO htmlSelectElement.options属性来获取 ...options[select.length -1].selected = true 获取最后一个 ...options[select. selectedIndex -1].selected = true 获取上一个 访问表格子元素 Rows[] 指定的行 Cells[] 指定的列 Rows[0].cells[0].innerHTML Caption：返回此表格的标题对象。可通过修改此属性来改变表格的标题。 HTMLCollection rows：返回此表格里的所有表格行，此属性会返回 
 
 和 
元素里的所有表格行。只读属性 HTMLCollection Bodies：返回此表格里所有 
元素 tFoot：返回此表格里的 
元素 tHead：返回此表格里的所有 
 sectionRowIndex：返回此表格行在其所在元素（ 等元素）的索引值。只读属性 HTMLTableCellElement代表单元格，HTMLTableCellElement除了可使用普通的html 元素的各种属性和方法外，还支持如下额外属性： cellIndex：返回此单元格所在表格行内的索引值 //删除所有行 t.firstChild.removeNode(true) x.parentNode.removechild(x); //删除子节点 var oChild = Div1.children(0); Div1.removeChild(oChild); Table.deleteRow(1); //增加一行 t.insertRow(); document.all.tags("P"); document.getElementById("inner").firstChild 动态表格.html 动态增加表单预算DEMO var aNodeList = oParentNode.childNodes; childNodes() object.children(vIndex [, iSubIndex]) var addRow = table.children[0].cloneNode(true) ; table.appendChild(addRow) ; var addRow = table.firstChild.cloneNode(true) ; table.appendChild(addRow) ; 添加节点： 1.创建节点document.createElement(“合法标签”)，复制一个新节点，oldNode.clone(true); 2.指定元素的appendChild: inserBefore : 在某个节点之前插入 replaceChild : 将某个子节点替换成新节点 如需要为列表框、下拉菜单（由select元素生成） 1. 调用HTMLSelectElement的add(option,beforeBefore)方法添加 2. 直接为HTMLSelectElement的指定Option赋值 复制节点： var oCloneNode = oList.cloneNode(true); document.body.insertBefore(oCloneNode); var table = document.getElementById("ta"); var addRow = table.rows[1].cloneNode(true) ; table.appendChild(addRow) ; 替换节点： var oNewNode = document.createElement("OL"); oList.replaceNode(oNewNode); 删除节点： 普通的removeChild(oldNode) document.getElementById("table").firstChild.removeNode(true); 如果需要为下拉列表、下拉菜单（由select） x.parentNode.removechild(x); //删除子节点 DHTML包含关系图： Window Navigator farames location history document screen event.... All body forms anchors lonks images... Elements Document.images[0] Document.images[id] 相当于 Document.images.id Document.forms[0] form.elements[0].value 而Document.all是早期的DOM模型，一般不要去用它 (在fireFox3里已经不支持了) Window对象：可以直接在脚本中调用 Alert() confirm() prompt() 分别用于弹出警告对话框、确认对话框、和提示输入对话框 Close() 关闭窗口 Focus() blur() 让窗口获得焦点，推动焦点 moveBy moveTo 移动窗口 open 打开一个新的顶级窗口 print 打印当前窗口或frame resizeBy resizeBy 重设窗口的大小 scroolBy scrollTo 滚动当前窗口中的HTML文档 setInterval clearInterval 设置 删除定时器 setTimeout clearTimeout 设置定时器 window还提供如下的常用属性，通过这些属性即可访问window对象包含的一系列对象，例如location history: closed 返回一个布尔值，用于判断窗口是否处于关闭状态 defaultStatus status 返回浏览器栏的文本 document 返回此窗口内装载的XHTML文本 frames[] 返回此窗口内包含的Frame对象，每个Frame对象又是一个window对象（框架集） history 返回浏览历史 location 返回浏览当前页面的浏览器 name 返回此窗口的名字 navigator parent 如果当前窗口是一个Frame，则返回其直接父窗口 screen 当前浏览者的屏幕对象 self 返回自身 top 如果当前窗口是一个Frame,则此属性返回包含文本Frame的顶级父窗口 jsscript弹出窗口： alert confirm prompt window对象： if(confirm("是否确认删除邮件")) { alert("邮件已经被删除"); } else { alert("您取消了此邮件的删除操作"); } var password = prompt("请输入你的密码"," "); alert(password ); jsscript弹出窗口： alert confirm prompt window对象： if(confirm("是否确认删除邮件")) { alert("邮件已经被删除"); } else { alert("您取消了此邮件的删除操作"); } var password = prompt("请输入你的密码"," "); alert(password ); 网站弹出框关闭后就不再打开： Document.cookie = “name = waedasd;max = 234234”; //加入cookie //读取cookie Function getCookie(name) { Var cookieStr = document.cookie ; Var offset = cookieStr.indexOf(“name” + name.length + 1) ; Var end = cookieStr.indexOf(“;” , offset); If(end == 1) { End = cookie. } } { ... setTimeout(“fall()” , 300); //每次都执行 } setInterval(“fall()” , 300); //简洁点 访问历史： Window的history属性是一个History对象，此对象表示当前窗口的浏览历史，支持如下方法： Back():后退到 上一个，如果此页面是第一个打开的，则此方法没有任何效果 Forward() 前进到下一个浏览的页面，前提是之前使用了back或go Go(intValue) 可指定前进或后退多少个页面，其中intValue控件前进、后退的页面数。其中为正时，表示前进，为负时，表示后退 浏览器对象： Window的navigator属性是一个Navigator对象， appName：此浏览器的内核名称 appVersion：当前版本号 platform：返回当前浏览器所在的操作系统 访问页面URL： Window对象还包含一个location属性，用于访问此窗口或Frame所装载文档的地址。Location对象还包含了如下几个常用属性。 Hostname.... window.location[“host”] Window对象的screen属性，返回当前浏览者的屏莫对象 window.screen[“width”] Cookie Addcookie DEMO document.cookie = "favoriate=game;max-age=999999"; ReadCookie DEMO loop: ...for().. break loop; JS事件机制 绑定事件处理han数的方法： 绑定到HTML元素的onXXX属性，HTML元素属性的属性值是一条或多条可执行的JS代码 绑定到DOM元素的onXXX属性,DOM对象的onXXX属性应该是此han数的引用 JS中this关键字。到底代表谁？ 1. 如果在普通脚本中，this代表window。 2. 如果在函数中使用this关键字。 A。如果直接调用函数，this还是代表window。 B。如果用new来调用函数，也就是把函数当成类来用。 函数中this就代表该函数所创建的对象。 3. 当我们为DOM对象的onxxx属性分配一个函数时， 该函数中this就代表该DOM对象。 4. 当我们为DOM对象的onxxx属性分配某个对象某个方法时， 该函数中this不再代表原有的对象，而是代表该DOM对象。 5. 如果一段JS脚本（一条或多条JS执行性代码）设置HTML元素onxxx属性时， 该JS脚本中的this代表当前绑定脚本的HTML节点。 Onclick = “return confirm(“真的要删除吗？’)” DEMO this.form.submit(); 
 常见HTML元素触发事件 Click Blur 
 
 
 Focus  
 Select  type = text password file textarea Submit form Reset form IE提供了两种绑定事件监听器的方法，不过很少使用。 访问事件对象：通过隐式可用的全局对象event来访问 当事件监听器的执行结束时返回false，此动作的默认行为将被取消 注册事件处理： 对其进行封装 window.addEventListener('load',init,false) window.attachEvent('on'+eventName,eventHander) 注销事件： document.getElementById( ).onclick = null 发送请求： oxmlHttpRequest.send(varbody) ===============IE的事件机制===============(昌泡) IE提供了两种绑定事件监听器的方法，不过很少使用。 IE访问事件对象：通过隐式可用的全局对象 event来访问。 Document.body.onkeypress = function(){ If(event.keyCode == 97 || event.keyCode == ‘A’){ } } IE的事件冒泡：DEMO 当我们在某个子节点上触发事件时，该子节点所处父节点是不是也会相应地触发。 取消冒泡：调用event对象的cancelBubble=true. IE的事件重定向。调用target.fireEvent()方法。 (要先取消事件的昌泡) 这个方法将事件重定向到target对象。 DEMO 重定向时，容易与冒泡形成死循环。 IE中取消事件的默认行为：event.returnValue = false。 ===============DOM 2 的事件机制=============== 遵循规范的浏览器大致上都可。 (捕获，昌泡) 1. 提供了一个addEventListener("eventType" , 函数 , 是否在capture阶段触发); DEMO/ 删除removeEventListener DOM 2 访问事件对象：事件对象将隐式地作为事件处理函数的第一个参数传入。 DEMO 当浏览器检测到发生了某个事件时，将自动创建一个Event对象，并隐式地将此对象作为事件处理han数的第一个参数传入 当我们用传统方式绑定事件监听器时（ 1。绑定到HTML元素的属性； 2。绑定到DOM元素的属性。此事件监听器负责监听事件昌泡阶段的，并不监听捕获阶段。(意思就是默认的是昌泡机制吧) DOM2里evt的currentTarget，IE不支持currentTarget null 在IE中是”null” 在火孤里是空字符串 在IE中用 “ “ 表示空字符串 document.getElementById("sort").onclick = out ; 不可以用括号，如：out(); P244 DOM事件传播模型图 DEMO IE用event.cancelBubble = true 取消昌泡传播 DOM2 的阻止事件传播：用evt.stopPropagation(); ，比IE更强大,捕获昌泡两阶段都阻止 通常阻止事件传播，内部节点的事件会被阻止，DEMO （解决方法：取消传播） //这样可以兼容IE和DOM2 阻止事件的传播 var test = function(evt) { if(evt) evt.stopPropagation(); alert("______________________________") ; event.cancelBubble = true ; } //兼容两种浏览器的事件绑定 If(documetn.addEventListener) {} Else if(document.attachEvent) {} //兼容两种浏览器的取消事件默认行为 If(event.preventDefault) {} Else if() { event.returnValue = false ; } 注册事件处理： 对其进行封装 window.addEventListener('load',init,false) window.attachEvent('on'+eventName,eventHander) 注销事件： document.getElementById( ).onclick = null 取消事件的默认行为： 通用的：让此事件的事件监听器han数返回false即可 IE: 设置event的returnValue=false; DOM2: 调用event的preventDefault()即可 DOM2的事件转发： 事件重定向DEMO Target.dispatchEvent(evt) 将evt转发到target上 所转发的事件必须是由程序员创建的事件 Var e = document.createEvent(“Events”); //创建一个普通事件 e.initEvent(“click” , true , false); //初始化事件对象，指定此事件支持昌泡，不允许取消 IE的事件重定向。调用target.fireEvent()方法。 (要先取消事件的昌泡) 这个方法将事件重定向到target对象。 DEMO //将事件转发到按钮bn2上 Document.getElementById(“bn2”).dispatchEvent(e) ; 它与IE事件重定向不同的是，DOM2所转发的事件必须是一个人工合成的事件DEMO 创建事件： a. document.createEvent(Events | UIEvents | MouseEvents); b. 初始化事件：initEvent(事件类型，，是否昌泡，是否有默认行为) 复习方式： 1.如何绑定事件监听器（通用的，IE，DOM2） 2.如何在事件监听器中访问事件对象（IE的事件对象[event]和DOM2[第一个参数]） 3.事件传播（IE是昌泡，ODM2是先捕获再昌泡） 4.阻止事件传播（IE event.cacelBubble = true，DOM2 event.stopPropagation） 5.事件重定向（IE targetEle.fireEvent ； targerEle.dispatchEvent ； 通用的，也有，只是功能不好，只是表现为在代码中触发事件/form.reset();form.submit();） 5.取消事件默认行为（通用 ； IE event.returnValue=false ； DOM2 event.preventDefault） //js得到这天是星期几, var weekIndex = function(year , month , day) { var firstDay = new Date(year, month, day) ; return firstDay.getDay() ; } 规则一般这样： 客户端做过的校验，服务器端需要全部重新做 客户端没有做过的校验，服务器端可能还要补充做 表单