DOM和DHTML等，复习总结
2014-06-10 20:42
148 查看
DOM（Document Object Model），文件对象模型。
HTML（HyperText Markup Language），超文本标记语言。
HTML的超类：Node->Document；Node->Element->HTMLElement。
HTML的元素：HTMLDocument/HTMLBodyElement/HTMLDivElement/HTMLFormElement/HTMLSelectElement/HTMLOptionElement
/HTMLTableElement/HTMLTableCaptionElement/HTMLTableRowElement/HTMLTableColElement/HTMLTableCellElement
/HTMLOLElement/HTMLULElement/HTMLLIElement/HTMLTextAreaElement/HTMLInputElement/HTMLIFrame等。
访问HTML元素的两种方法：根据ID；根据节点关系。
根据ID访问HTML元素：document.getElementById("a").innerHTML。
根据节点关系访问：parentNode/firstChild/lastChild/previousSibling/nextSibling。
访问表单控件：form.elements[0]/form.elements['ctl_name']/form.ctl_name。
访问表格控件：table.caption/table.rows[i].cells[j]/table.rows.length。
访问列表控件：select.options[]/select.selectedIndex。
修改HTML元素：大部分控件，只需innerHTML赋值；输入控件，修改value值。
节点操作：createElement(tag)/cloneNode(bDeep)/appendChild(new)/InsertBefore(new,ref)/replaceChild(new,old)/removeChild(node)。
表格：table.insertRow(index)/deleteRow(index)/createCaption/createTFoot/createTHead/row.insertCell(index)/deleteCell(index)。
列表框：select.add(option,before)/new Option(text,value,defaultSelected,selected)/remove(index)。
DHTML（Dynamic HTML），是传统静态HTML的发展，现在已经被DOM所取代，但仍然可以使用。
DOM有树形结构，而DHTML则没有；DHTML中的对象，有包含关系；被包含者是包含者的属性，以关联数组的形式存在。
DHTML的包含关系：window(location,history,screen,navigator,frames,document(all,body,anchors,links,images,froms(elements)))。
全局变量是window的属性，函数是window的方法；window还提供了可以直接使用的很多方法和属性。
方法：alert/confirm/prompt/open/close/focus/blur/moveBy/moveTo/resizeBy/resizeTo/scrollBy/scrollTo/setInterval/clearInterval等。
属性：closed/status/defaultStatus/name/self/top/parent/history/location/navigator/screen/document/frames[]等。
访问历史（history）的方法：back/foward/go(int)等；屏幕信息（screen）的属性：width/height/colorDepth等。
访问页面URL（location）的属性：hostname/href/host/port/pathname/protocol等。
导航（navigator）的属性：appName/appVersion/platform等。
事件处理函数的绑定方法：可绑定到HTML元素的属性上或DOM对象的属性上。
事件处理函数的this指针：可代指window（onclick="fn();"）、HTML元素（onclick="this.*"）、DOM对象（dom.onclick=fn;）。
事件处理函数的返回值（true/false），可以改变事件的默认行为。
在代码中触发事件：click/blur/focus/select/submit/reset等。
上述是通用方法，还有IE专用方法（事实规范，IE浏览器份额大）和DOM方法（行业规范，Chrome/FireFox/Opera等）。
IE的绑定方法：<script for="bn" event="onclick" type="text/javascript>/dom.attachEvent("onclick",fn)。
DOM的绑定方法：dom.addEventListener("eventType",handler,captureFlag捕获/冒泡)。IE貌似也支持了。
事件对象：Event(load/focus/blur/select/submit)/UIEvent(DOMActivate)/MouseEvnet(click/mousedown/up)等。
事件属性：type/target/currentTarget/eventPhase/timeStamp/bubbles/cancelable、view/detail、button/key/xy。
事件传播：从父控件到子控件的传播（捕获）阶段，以及相反的（冒泡）阶段；event.stopPropagation()停止传播。
事件转发：document.createEvent("Events");/e.initEvent("click", true, false)/dom.dispatchEvent(e)。
取消事件的默认行为：event.preventDefault()。
传统的HTML只负责展现HTML页面，少量数据可用Cookie，但它有大小限制（4KB），未加密不安全，还会多次重复发送。
HMTL5增强了本地储存的功能：WebStorage用于缓存客户端的数据，待在线时提交给服务端；它又分为Session和Local两种。
window提供了两个属性：sessionStorage和localStorage，前者只在Session期限内有效，后者长期有效，直到显式地清除。
Storage其实就是键值对，有如下属性和方法：length/key(index)/getItem(key)/set(key,value)/remove(key)/clear()。
离线应用，需要在<html>中添加：manifest="*.manifest"；它包含：CACHE MANIFEST/CACHE/NETWORK/FALLBACK。
离线事件的监听，window.addEventListener("online/offline",listener,useCapture)；浏览器在线状态的判断：navigator.onLine。
applicationCache.update()/swapCache()/onerror/onchecking/onnoupdate/ondownloading/onprogress/onupdateready/oncached等。
使用Worker创建多线程：worker=new Worker('*.js');用postMessage(data)和worker.onmessage(event){event.data}发送和接收数据。
其中线程间传递的数据，也可以是JSON对象，用JSON.stringify(jsonObj)和jsonObj=JSON.parse(event.data)来打包和解包即可。
线程中可用：importScripts(urls)/sessionStorage/localStorage/XMLHttpRequest/navigator/location/setInteval()/praseInt()等。
跨文档消息传递，可以使用targetWin.postMessage(data,origin)和onmessage(MessageEvent e)来发送和接收消息。
MessageEvent有如下几个属性：信息数据data/源域名origin/源窗口source/目标窗口target等。可直接传JSON对象。
WebSocket可与服务端（ServerSocket/Socket）直接进行实时通信，从而无需使用HTTP协议的频繁请求或长连接。
WebSocket方法：send/close；状态：CONECTING/OPEN/CLOSING/CLOSED；事件：onopen/onclose/onmessage/onerror。
HTML（HyperText Markup Language），超文本标记语言。
HTML的超类：Node->Document；Node->Element->HTMLElement。
HTML的元素：HTMLDocument/HTMLBodyElement/HTMLDivElement/HTMLFormElement/HTMLSelectElement/HTMLOptionElement
/HTMLTableElement/HTMLTableCaptionElement/HTMLTableRowElement/HTMLTableColElement/HTMLTableCellElement
/HTMLOLElement/HTMLULElement/HTMLLIElement/HTMLTextAreaElement/HTMLInputElement/HTMLIFrame等。
访问HTML元素的两种方法：根据ID；根据节点关系。
根据ID访问HTML元素：document.getElementById("a").innerHTML。
根据节点关系访问：parentNode/firstChild/lastChild/previousSibling/nextSibling。
访问表单控件：form.elements[0]/form.elements['ctl_name']/form.ctl_name。
访问表格控件：table.caption/table.rows[i].cells[j]/table.rows.length。
访问列表控件：select.options[]/select.selectedIndex。
修改HTML元素：大部分控件，只需innerHTML赋值；输入控件，修改value值。
节点操作：createElement(tag)/cloneNode(bDeep)/appendChild(new)/InsertBefore(new,ref)/replaceChild(new,old)/removeChild(node)。
表格：table.insertRow(index)/deleteRow(index)/createCaption/createTFoot/createTHead/row.insertCell(index)/deleteCell(index)。
列表框：select.add(option,before)/new Option(text,value,defaultSelected,selected)/remove(index)。
DHTML（Dynamic HTML），是传统静态HTML的发展，现在已经被DOM所取代，但仍然可以使用。
DOM有树形结构，而DHTML则没有；DHTML中的对象，有包含关系；被包含者是包含者的属性，以关联数组的形式存在。
DHTML的包含关系：window(location,history,screen,navigator,frames,document(all,body,anchors,links,images,froms(elements)))。
全局变量是window的属性，函数是window的方法；window还提供了可以直接使用的很多方法和属性。
方法：alert/confirm/prompt/open/close/focus/blur/moveBy/moveTo/resizeBy/resizeTo/scrollBy/scrollTo/setInterval/clearInterval等。
属性：closed/status/defaultStatus/name/self/top/parent/history/location/navigator/screen/document/frames[]等。
访问历史（history）的方法：back/foward/go(int)等；屏幕信息（screen）的属性：width/height/colorDepth等。
访问页面URL（location）的属性：hostname/href/host/port/pathname/protocol等。
导航（navigator）的属性：appName/appVersion/platform等。
事件处理函数的绑定方法：可绑定到HTML元素的属性上或DOM对象的属性上。
事件处理函数的this指针：可代指window（onclick="fn();"）、HTML元素（onclick="this.*"）、DOM对象（dom.onclick=fn;）。
事件处理函数的返回值（true/false），可以改变事件的默认行为。
在代码中触发事件：click/blur/focus/select/submit/reset等。
上述是通用方法，还有IE专用方法（事实规范，IE浏览器份额大）和DOM方法（行业规范，Chrome/FireFox/Opera等）。
IE的绑定方法：<script for="bn" event="onclick" type="text/javascript>/dom.attachEvent("onclick",fn)。
DOM的绑定方法：dom.addEventListener("eventType",handler,captureFlag捕获/冒泡)。IE貌似也支持了。
事件对象：Event(load/focus/blur/select/submit)/UIEvent(DOMActivate)/MouseEvnet(click/mousedown/up)等。
事件属性：type/target/currentTarget/eventPhase/timeStamp/bubbles/cancelable、view/detail、button/key/xy。
事件传播：从父控件到子控件的传播（捕获）阶段，以及相反的（冒泡）阶段；event.stopPropagation()停止传播。
事件转发：document.createEvent("Events");/e.initEvent("click", true, false)/dom.dispatchEvent(e)。
取消事件的默认行为：event.preventDefault()。
传统的HTML只负责展现HTML页面，少量数据可用Cookie，但它有大小限制（4KB），未加密不安全，还会多次重复发送。
HMTL5增强了本地储存的功能：WebStorage用于缓存客户端的数据，待在线时提交给服务端；它又分为Session和Local两种。
window提供了两个属性：sessionStorage和localStorage，前者只在Session期限内有效，后者长期有效，直到显式地清除。
Storage其实就是键值对，有如下属性和方法：length/key(index)/getItem(key)/set(key,value)/remove(key)/clear()。
离线应用，需要在<html>中添加：manifest="*.manifest"；它包含：CACHE MANIFEST/CACHE/NETWORK/FALLBACK。
离线事件的监听，window.addEventListener("online/offline",listener,useCapture)；浏览器在线状态的判断：navigator.onLine。
applicationCache.update()/swapCache()/onerror/onchecking/onnoupdate/ondownloading/onprogress/onupdateready/oncached等。
使用Worker创建多线程：worker=new Worker('*.js');用postMessage(data)和worker.onmessage(event){event.data}发送和接收数据。
其中线程间传递的数据，也可以是JSON对象，用JSON.stringify(jsonObj)和jsonObj=JSON.parse(event.data)来打包和解包即可。
线程中可用：importScripts(urls)/sessionStorage/localStorage/XMLHttpRequest/navigator/location/setInteval()/praseInt()等。
跨文档消息传递，可以使用targetWin.postMessage(data,origin)和onmessage(MessageEvent e)来发送和接收消息。
MessageEvent有如下几个属性：信息数据data/源域名origin/源窗口source/目标窗口target等。可直接传JSON对象。
WebSocket可与服务端（ServerSocket/Socket）直接进行实时通信，从而无需使用HTTP协议的频繁请求或长连接。
WebSocket方法：send/close；状态：CONECTING/OPEN/CLOSING/CLOSED；事件：onopen/onclose/onmessage/onerror。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DOM和DHTML等，复习总结
- 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<Dom篇>）
- 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<js篇>）
- 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）
- 一周一话题之四（JavaScript、Dom、Jquery全面复习总结<js篇>）
- Javascript & DHTML 实例编程（教程）DOM基础和基本API
- (javascript,dhtml,dom,drag,drop)有关仿照google和msnspace的实现方法的小结
- 关于dom处理表格的问题 总结 转贴
- DHTML DOM 函数
- Javascript入门学习第九篇 Javascript DOM 总结第1/2页
- Socket网络编程复习与总结
- Javascript & DHTML DOM基础和基本API第1/5页
- 学习方法总结之 - 复习
- QuickSort分析,这是回复提问时碰到的,顺便对学过的算法进行复习,总结...
- IE与DOM下访问内联样式和外部样式表的常用方法总结
- JS应用DOM入门：和DHTML对象模型的比较
- T-SQL复习总结--用T-SQL创建，修改，管理，删除数据库
- 系统分析师 复习经验总结(转)
- xml 总结(五) DOM
- JS应用DOM入门(1): 和DHTML对象模型的比较