zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    052 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 14 Eclipse下程序调试——debug2 多断点调试程序
    051 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 13 Eclipse下程序调试——debug入门1
    050 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 12 continue语句
    049 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 11 break语句
    048 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 10 案例——阶乘的累加和
    047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用
    046 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 08 for循环的注意事项
    045 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 07 for循环应用及局部变量作用范围
    剑指OFFER----面试题04.二维数组中的查找
    剑指OFFER----面试题03. 数组中重复的数字
  • 原文地址:https://www.cnblogs.com/gaojs/p/3796106.html
Copyright © 2011-2022 走看看