• DOM和DHTML等,复习总结


    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提供了两个属性:sessionStoragelocalStorage,前者只在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。

  • 相关阅读:
    ansible-playbook最佳实践
    zabbix 优化之 表分区
    ansible-playbook 打通ssh无秘钥
    jQuery 1.9 移除了 $.browser 的替代方法
    也谈前端基础设施建设
    滚动视差网站欣赏
    css常见的快捷开发代码汇总(长期更新)
    如何让搜索引擎抓取AJAX内容?
    Bookmarklet编写指南
    20个网页设计师应该学习的CSS3经典教程实例
  • 原文地址:https://www.cnblogs.com/gaojs/p/3796106.html
Copyright © 2020-2023  润新知