前端之旅前端转载的～es5

前端工程师之DOM编程艺术（持续更新）

2016-03-06  本文已影响561人  7091a52ac9e5

@(书籍阅读)[网易云课堂|DOM]

DOM编程艺术

网易前端微专业之《DOM编程艺术》笔记，持续更新；

DOM树

HTML的对象的表示；

节点树

节点遍历

node.parentNode
node.firstChild
node.lastChild
node.previousSibling
node.nextSibling

节点类型

//最常用
ELEMENT_NODE
TEXT_NODE
元素遍历
p.firstElementChild
p.lastElementChild
em.nextElementSibling
em.previousElementSibling

节点操作

querySelector/All支持情况

属性操作

property accessor(属性访问器)

读取属性

input.className;
input["id"];

写属性

input.value='www.baidu.com'

类型（通过属性访问符会自动转换）
特点

-通用性差（名字异常）
-扩展性差
但是是一个实用对象，会预先转换；

getAttribute/setAttribute

var attribute = element.getAttribute(attributeName);
input.getAttribute(class)；字符串不存在名字冲突
input.setAttribute(name,value);
input.setAttribute("disabled","");设置为空则为false；

类型：
特点：

dataset（自定义属性）

事件传输流程

样式操作

页面换肤：就是一下子改变很多元素的样式；

更新样式element.style

element.style.borderColor = 'red';

问题
更新class；
换肤（一次性更新很多元素的样式）

更换样式表；
link元素也可以添加id，选中，然后更改href；

获取样式

element.style

对应的是元素的内嵌的样式，通过这种方式不能获取外联的样式；

window.getComputedStyle()

var style = window.getComputerStyle(element[,pseudoElt]);
获取到的是一个只读属性不能修改；
包含属性名和值的键值对，几乎包含所有属性；
ie9以下不支持；

CSS DOM overview

document.styleSheets~StyleSheetList
.link.sheet
.style.sheet

事件

什么是DOM事件？

事件流

capture phase:
从顶端往下；
target phase:
事件触发过程；
bubble phase;
当前节点的父节点开始冒泡到顶端的window对象；

事件注册

eventTarget.addEventListener(type,listener,[useCaptaure])模式捕获；

取消时间注册

eventTarget.removeEventListener(type,listener[,useCapture])
另一种方法：eventTarget.onClick="null";

时间触发

eventTarget.dispatchEvent(type);
事件注册与取消

事件对象

当事件被触发时，所包含的状态和信息；

时间对象的属性和方法：

属性：

阻止事件传播
默认行为

Event.preventDefault()：阻止默认行为（W3C）
Event.returnValue=false(IE)

事件分类

事件分类：
DOM事件分类及继承关系；鼠标事件类型、鼠标事件对象、鼠标事件举例；键盘、输入、焦点事件类型、事件对象、事件举例；其他常用事件介绍与举例;

Event:load,unload,error,select,abort;
UIEvent:resize,scroll;
FocusEvent:blur,focus,focusin,focusout;
InputEvent:beforeinput,input;
keyboardEvent:keydown,keyup;
MouseEvent:click,dbclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup;
WheelEvent:wheel;

事件分类
Event
Event事件
window
Image
UIEvent
UIEvent

div里冒泡为yes，document上处理时冒泡为false；

MouseEvent

mouseover和mouseenter：
mouseenter：进入个元素才会触发，忽略子对象；

MouseEvent对象

属性：

screenX坐标系
MouseEvent顺序
WheelEvent
WheelEvent
属性
FocusEvent
FocusEvent
属性：
InputEvent
InputEvent
先会触发beforeInputEvent
input:输入过程会不断触发；
keyboardEvent
keyboardEvent
属性：

事件代理

将事件注册到元素的父元素上

数据通信

请求报文
get
响应报文

常用HTTP方法：
常用HTTP方法
URL构成
URL构成
HTTP版本
HTTP版本
常见HTTP状态码
常见HTTP状态码

Ajax

Ajax通信流程
open()方法

xhr.open(method,url[,async=true]);
xhr.setRequestHeader(header,value);
xhr.send([data=null]);
请求参数序列化

同源策略

两个页面用了相同的协议（protocol），端口（port）和主机（host），那么两个页面就属于同一个源（origin）；

跨域资源访问

W3C定义了CORS（Cross-Origin Resource Sharing：跨域资源共享）；
现代浏览器已经实现了CORS标准

CORS

其它跨域技术

Frame代理
Frame代理
JSONP

填充式JSON
<script>可以实现跨域；

数据存储

服务器端设置
服务器端设置 作用域 作用路径
读取
function setCookie (name, value, expires, path, domain, secure) {
    var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires)
        cookie += '; expires=' + expires.toGMTString();
    if (path)
        cookie += '; path=' + path;
    if (domain)
        cookie += '; domain=' + domain;
    if (secure)
        cookie += '; secure=' + secure;
    document.cookie = cookie;
}
删除
function removeCookie (name, path, domain) {
    document.cookie = name + '='
    + '; path=' + path
    + '; domain=' + domain
    + '; max-age=0';
}
缺陷
cookie的作用：
一定程度上弥补了http无状态协议对交互式web应用的影响，它可以使用客户端存储部分信息，维护用户和服务器会话中的状态。

storage

sessionStorage
读取：
API

-获取键值对数量
-localStorage.length
读取

视频和音频

多媒体和图形编程

<audio><video>

canPlayType();

检查是否支持某种格式（Audio）；

<audio>和<video>除了界面上显示不一样，他们大部分的属性和方法是一样的
Web Audio API

音频：
视频：
多媒体相关事键表：
W3C官方定义：
mozilla官方教程：
第三方教程：

Canvas

canvas：不建议用css指定宽高；
ctx.globalCompositionOperation

ctx.globalCompositionOperation

基本绘图步骤

基本绘图的步骤
市面上常见的基于Canvas的引擎

1. Laro：
是一个基于html5 canvas的用于平面2d或者2.5d游戏制作的轻量级游戏引擎
2. X-Canvas：
一款跨平台的HTML5游戏引擎，提供手机游戏开发的完整解决方案。包含了加速引擎，游戏框架，物理引擎
3. CutJS：
一款专门用于跨平台游戏开发的开源2D HTML5渲染引擎，轻量级、快速、可交互
4. cocos2djs:
一个游戏框架，api广泛
5. Phaser：
一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架，提供JavaScript和TypeScript双重支持
Mozilla官方教程：

BOM

JS包含三部分：

属性

方法

三种对话框
开，关新窗口

var w = window.open();
w.close();

window事件

表单操作

步骤

  1. 构建表单
  2. 服务器处理
  3. 配置表单
构建表单
学习内容
<form id=test>
<input name="a"/>
<input name="b"/>
</form>
validity

- 自定义异常
- oninvalid
- setCustomValidity
- 禁止验证
- novalidate
- 利用form元素的novalidate属性，它可以关闭整个表单验证。(禁止当前表单内的所有可验证元素的验证)
利用input元素或submit元素的formnovalidate属性，此属性可以让表单验证对单个元素失效。(禁止单个指定的可验证元素的验证)

<!Doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>利用iframe实现表单的无刷新提交</title>
    </head>
    <body>
        <form target="formtarget" method="post">
            <input type="text" name="username">
            <input type="password" name="password">
            <input type="submit">
        </form>              
        <iframe name="formtarget"  style="display:none"></iframe>
        <div id='div1'></div>
                    
        <script type="text/javascript">
            var enventUtil={
                addHandler:function(elem,type,handler){
                    if(elem.addEventListener){
                        elem.addEventListener(type,handler,false);
                    }else if(elem.attachEvent){
                        elem.attachEvent('on'+type,handler);
                    }else{
                        elem['on'+type]=handler;
                    }
                }
            }
            var oFrame=document.getElementsByTagName('iframe');
            var oDiv=document.getElementById('div1');
            enventUtil.addHandler(oFrame,'load',function(){
                var frameDocument=oFrame.contentDocument || oFrame.contentwindow.document;
                if(frameDocument){
                    oDiv.innerHTML=frameDocument.body.innerHTML;
                }
            })
        </script>
    </body>
</html>

表单应用

列表操作

形式

编程方式

上一篇 下一篇

猜你喜欢

热点阅读