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提供了两个属性: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篇>)
-->目录导航 一. 初探Dom 1. Dom介绍 二. Dom基础 1. window顶级对象 2. body.document对象事件 3. 通用的HTML元素的事件 4. 冒泡事件 5. ...
- 一周一话题之四(JavaScript、Dom、jQuery全面复习总结<jQuery篇>)
-->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...
- 一周一话题之四(JavaScript、Dom、jQuery全面复习总结<js篇>)
-->目录导航 一. JavaScript 1. js介绍 2. js语法 3. js进阶 4. js高级 5. 事例代码下载 一. JavaScript 做BS系统,JavaScript的使用 ...
- Dom学习笔记
今天老师出了一道面试题目:取到表单里面的textbox的值,两种方法.知道一种,老师说的什么dom,我竟然不知道. 以前学html的时候,老师也重来没有提到dom的概念.javaScript只是学了一 ...
- JavaScript DOM编程艺术第二版学习(1/4)
接下来项目需要网页相关知识,故在大牛的指引下前来阅读本书. 记录方式:本书分四部分阅读,完成阅读之后会多写一篇包括思维导图的算是阅读指南的东西,浏览的童鞋看着指南可以跳过一些不必要的坑~ 当前水平:H ...
- DOM操作和样式操作库的封装
一.DOM常用方法和属性复习 以下粗略的罗列一下DOM的常用方法和属性,由于不是介绍DOM的基础内容,所以就不一一详细说明各个方法和属性了(学习DOM的封装的,一般都对基础DOM比较熟悉了). 1.1 ...
- 【基础知识】Dom基础
[学习日记]Dom基础 1. 内容:使用JavaScript操作Dom进行DHTML开发 2. 目标:能共使用JavaScript操作Dom实现常见的DHTML效果 3. DHTML= C ...
- JavaScript学习1
http://blog.csdn.net/lilongsheng1125/article/details/8479391 数据类型 1.基础数据类型 数值型.字符串型.逻辑型.undefined.nu ...
- js 函数声明方式以及javascript的历史
1.function xx(){} 2.匿名方式 window.onload=function(){dslfjdslfkjdslf}; 3.动态方式 var demo=new Function ...
随机推荐
- 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践
目 录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...
- 2017技术核心——Spring
从毕业从事Java WEB开始到现在已差不多快5年时间了,一直使用的Spring相关的技术,其实最主要的是SpringMVC这一块.其实,一直停留在用的地步,并不知晓其原理,真正耐下心来去研究Spri ...
- numpy常用用法总结
numpy 简介 numpy的存在使得python拥有强大的矩阵计算能力,不亚于matlab. 官方文档(https://docs.scipy.org/doc/numpy-dev/user/quick ...
- js检测手机摇一摇
1.检测设备是否支持重力感应事件deviceorientation deviceorientation 提供设备的物理方向信息,表示为一系列本地坐标系的旋角 function motionHandle ...
- Qt容器类——1. QList类、QLinkedList类和QVector类
在开发一个较高性能需求的应用程序时,程序员会比较关注这些容器类的运行效率,表2.1列出了QList.QLinkedList和QVector容器的时间复杂度比较. 1.QList类 QList<T ...
- linux系统中如何查看日志(转)
cat tail -f 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安 ...
- SpringMVC常用配置-添加静态资源处理器-针对SpringMVC中静态资源无法访问的问题
- MVC中的成员资格,授权,安全性
使用 Authorize 特性登录 Authorize 是 ASP.NET MVC 自带的默认授权过滤器, 可用来限制用户对操作方法的访问. 保护控制器操作 Authorize 特性在表单身份验证和 ...
- nodejs的request创建的get和post请求,带参数
1.导入request : var request = require('request'); 2.get请求 request({ timeout:5000, // 设置超时 method:'GET' ...
- eclipse配置项目
project facets -> dynamic web module 2.5 java -> 1.6 deployment assembly -> webapp Web Proj ...