Flands Blog HomeArchivesTags
DOM操作笔记

DOM学习笔记

文档树

节点遍历

节点(获取标签后) 代码
父节点 element.parentNode
第一个子节点 element.firstChild
最后一个子节点 element.lastChild
上一个同胞节点 element.previousSibling
下一个同胞节点 element.nextSibling
返回子节点所有列表 element[0].childNodes
节点类型
body,div,p… elementNode
字符 text_Node

节点操作

获取节点(Element)

方法 代码(document)
获取ID .getElementById("")
获取ClassName .getElementsByClassName("f")
获取Name属性 .getElementsByName("")
获取标签 .getElementsByTagName("p")
获取(一个/全部)节点 .querySelector/All()

参数说明

  • ("*")获取所有后代元素，包括子节点
  • ClassName("user last")获取具有两个Class的标签
  • Selector #user .user具有id=user和class=user下的元素，返回数组

节点

路径:创建节点—创建节点文本—在节点中添加文本节点—执行节点动作

方法 代码
创建节点’b’ document.createElement("b")
节点文本内容 element.textContent
↑↑↑↑ element.innerText
插入节点 element.appendChild(achild)
指定位置插入节点 element.insertBefore(新节点，指定节点(ul.firstChild))
删除节点 element.removeChild(指定节点a.firstChild)
修改节点内容(加节点标签) element.innerHTML
布尔值,true深度复制:节点所有子节点复制.false简单复制:只复制当前节点，不复制子节点 element.cloneNode(Boolean)
替换节点 element.parentNode.replaceChile(a,被替换节点)

创建节点流程

var a = document.get...;
var ul = document.createElement('ul');
ul.innerText = 'ul项';

innertext兼容

if(!('innerText' in document.body)){
         HTMLElement.prototype.__defineGetter__("innerText",function () {
             return this.textContent;
         });
         HTMLElement.prototype.__defineSetter__("innerText",function (s) {
             return this.textContent = s;
         });
     }

节点属性

属性

elementNode.nodeName 		//节点内name属性名称
elementNode.nodeValue	 	//节点的值，除文本类型，其他为null
elementNode.nodeType		//节点类型为数值
Type数值 描述
1 元素标记
2 属性
3 文本
8 注释
9 文档
10 文档类型

属性异常(CSS对应JS)

  • class === className
  • for === htmlFor

属性

<input id="a" class="b" value = "" maxlength="10" onclick="show();">

读取

  • input.className;“a”
  • input["id"];“userName”
  • 同名关键词，要加前缀(for=htmlFor)

写

  • input.value='a';写入a
  • input.disabled=true;不可输入

类型

Boolean只要出现就为true

属性 数据 类型
className “u-txt” String
maxLength 10 Number
disabled true Boolean
onclick function onclick Function

属性操作

方法 代码
读 element.getAttribute("class或id")
设置element的id为node element.setAttribute("id","node")

获得的属性都为String类型

dataset自定义属性

  • HTMLElement.dataset
  • data-*属性集合
  • 元素上保存数据

<div data-id="123" data-email="qqq@qq.com
获取到id=”123”;email=”qqq@qq.com

样式操作

样式

  • 外部样式表 <link rel="stylesheet" href="base.css">更换为<link rel="stylesheet" href="skin.css">

  • 内嵌样式表

  • element.sheet.cssRules返回列表

  • .style.lineHeight设置属性

  • .slectorText选择器，选择标签

  • element.className += 'invalid'更新class

  • element.removeAttribute("style")清空样式

  • window.getComputedStyle(element)获取标签样式，只读

  • element.currentStyleIE9兼容

  • window.getComputedStyle("元素", "伪类").getPropertyValue(style)获取单一标签样式

  • .currentStyle.getAttributeIE9兼容

  • IE的element.currentStyle.getAttribute方法需要驼峰式属性名

    function camelize(a) { return a.replace(/-(\w)/g, function(all, letter) { return letter.toUpperCase(); }) }

  • 内嵌样式
  • element.style.color内嵌样式修改
  • element.style.cssText = 'border-color:red'直接修改

实例

最近写一个排序后要输出的网页，放上关键代码

var aqiul = document.getElementById('aqi-list');	//获取ul标签的ID
var a = Data.filter((i) => {
        return i[1] > 60;
});													//filter返回为true的数值，这里过滤掉小于60的数组中的值
a.reverse();			//倒序排序
for (var i = 0; i < b.length; i++) {
    var li = document.createElement('li');			//创建li标签
    aqiul.appendChild(li);		//将li标签添加至ul内
    li.innerHTML = "第" + day[i] + "名：" + b[i];	//li标签添加内容
}
/*Date为需要排序的数组[["北京", '90'],["上海", '50']]，排序会忽略掉字符串(?)。
day为显示汉字数字*/

DOM事件

事件流

  • capture phase 捕获,文档树从上向下查找,Window开始
  • target phase 触发,事件的触发过程
  • bubble phase 冒泡,事件节点开始冒泡到顶层

事件注册与触发

  • 事件注册
    eventTarget.addEventListener(type,listener[,useCapture])接受参数(事件类型,事件处理函数,[是否是捕获过程])

  • 取消事件注册
    eventTarget.removeEventListener(type,listener[,useCapture])

  • 事件触发
    eventTarget.dispatchEvent(type)

  • IE兼容注册与取消
    attchEvent/datachEvent

  • IE事件触发:
    fireEvent(e)

  • IE没有捕获过程，无此参数
    兼容

    var addEvent = document.addEventListener ? function (elem, type, listener, useCapture) { elem.addEventListener(type, listener, useCapture); } : function (elem, type, listener,) { elem.attachEvent(‘on’ + type, listener); }; var delEvent = document.removeEventListener ? function (elem, type, listener, useCapture) { elem.addEventListener(type, listener, useCapture); } : function (elem, type, listener,) { elem.detachEvent(‘on’ + type, listener) }

事件对象

  • 属性
  • type 时间类型
  • target(srcElement//IE内核) 事件触发的DOM节点
  • currentTarget当前处理的事件
  • 方法
  • event.stopPropagation | event.cancelBubble=true //IE阻止事件传播到父节点
  • preventDefault | returnValue=false //IE阻止默认行为
  • stopImmediatePropagation阻止冒泡,跟第一个一样,阻止后续时间

参考
事件列表

MouseEvent

元素:Element,元素例子:div

类型 冒泡 默认事件 说明
click Y focus.activation 点击
dbclick Y focus.activation 双击
mousedown Y drag/scroll text selection 按下
mouseup Y context menu 鼠标回弹
mousemove Y None 移动
mouseout Y None 移到
mouseover Y None 移开
mouseenter N None 移到元素,嵌套元素不触发
mouseleave N None 移开元素,嵌套元素不触发

属性

  • clientX,clientY，至页面距离
  • screenX,screenY，至屏幕距离
  • ctrlKey,shiftKey,altKey,metaKey，鼠标按下如果键盘这些键按下则为true
  • button(0,1,2)左键中间右键

顺序

  • 从元素A上方移过
    mousemove -> mouseover(A) -> mouseenter(A) -> mousemove(A) -> mouseout(A) -> mouseleave(A)

  • 点击元素
    mousedown -> mousemove -> mouseup -> click

WheelEvent滚轮

  • 事件
  • 事件类型:wheel
  • 冒泡:Y
  • 元素:Element
  • 默认事件:scroll or zoom document
  • 例子:div
  • 属性
  • daltaMode
  • deltaX
  • deltaY
  • deltaZ

FocusEvent焦点

获得焦点和失去焦点的时候
元素:Window、Element,默认事件:None,元素例子:window、input

类型 冒泡 说明
blur N 失去焦点
focus N 获得焦点
focusin Y 即将获得焦点
focusout Y 即将失去焦点
  • 属性
  • relatedTarget 失去焦点时另一个获得焦点的元素

InputEvent输入事件

是否冒泡:Y,元素:Element,元素例子:input

类型 默认事件 说明
beforeinput update DOM Element 先触发，无输入内容
input None 已输入内容
onpropertychange IE下Input

KeyboardEvent 键盘事件

是否冒泡:Y,元素:Element,元素例子:div,input

类型 默认事件 说明
keydown beforeinput/inputfocus/blur activation 按下
keyup None 抬起
  • 属性
  • key
  • code 按键码
  • ctrlKey、shiftKey、altKey、metaKey
  • repeat 按住不动
  • keyCode ascii码

Event

是否冒泡:N,默认事件:None,元素用W=Window\D=document\E=Element代替

类型 元素 元素例子 说明
load W,D,E Window\image\iframe 元素加载完成
unload W,D,E window window退出的时候
error W,E window\image 加载错误
select E input\textarea 输入框被选择了
abort W,E window\image 图片退出
  • Window
  • load
  • unload
  • error
  • abort
  • Image
  • load
  • error <image src=".jpg" onerror="this.src=',jpg'"
  • abort 加载时按下ESC退出触发

UIEvent

默认事件:None,元素用W=Window\D=document\E=Element代替

类型 是否冒泡 元素 元素例子 说明
resize N W,E Window\iframe 修改窗体大小
scrikk N/Y D,E document\div 页面滚动,元素上触发可冒泡

事件代理

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

数据通信

常用HTTP方法

方法 描述 是否包含主体
GET 从服务器获取一份文档 否
POST 向服务器发送需要处理的数据 是
PUT 将请求的主题部分储存在服务器上 是
DELETE 从服务器上删除一份文档 否
HEAD 只获取文档的头部 否
TRACE 对可能经过代理传送到服务器的报文追踪 否
OPTIONS 决定可以在服务器上执行哪些方法 否

HTTP状态码

状态码 描述 原因短语
200 请求成功,GET和POST方法 OK
301 资源移动.所请求的资源自动到新URL,浏览器自动跳转新URL Mover Permanently
304 所请求的资源未修改，浏览器读取缓存数据 Not Modified
400 请求语法错误 Bad Request
404 未找到资源 Not Found
451 没有权限访问(阻止访问) Unavailable For Legal Reasons
500 服务器内部错误 Internal Server Error

Ajax

XHR(ajax对象)—open()开启请求,不发送—send()正式发送—返回数据接受—结束请求

readyState: 0 (每次调用方法+1) status: 结束请求时(200) responseText: <!DOCTYPE html>

var xhr = new XMLHttpRequest();//创建XHR对象
/*处理请求*/
xhr.onreadystatechange = function (callback) {
    if (xhr.readyState == 4){
        if ((xhr.status >=200 && xhr.status <300) || xhr.status == 304){
            callback(xhr.responseText);
        }else {
            alert('Request不成功:' + xhr.status);
        }
    }
};
/*发送请求*/
xhr.open('get', 'example.json', true);
xhr.setRequestHeader('myHeader', 'myValue');
xhr.send(null);//get方法
xhr.send(serialize(formdata));//post方法

方法

xhr.open(method, url[,async = rtue])

  • method方法
  • GET
  • POST
  • url 地址
  • source
  • ./source
  • async 布尔值
  • true 开启异步请求
  • false 开启同步请求

xhr.setRequestHeader(header, value)设置头部字段

  • header:Content-Type
  • value: application/x-www-form-urlencoded[mulitipart/form-data] 表单编码(文件上传的话) xhr.send([data = null]);
  • data:String/FormData

请求参数序列化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
xhr.open('get', 'example.json?' + 'name1=value1&name2=value2', true);
带查询请求
传入对象返回字符串
function serialize(data) {
    if (!data) return '';
    let pairs = [];
    for (let name in data){
        if (!data.hasOwnProperty(name)) continue;
        if (typeof data[name] === 'function') continue;
        let value = data[name].toString();
        name = encodeURIComponent(name);
        value = encodeURIComponent(value);
        pairs.push(name + '=' + value);
    }
    return pairs.join('&');
}

同源策略

  • 两个页面拥有相同的协议(protocol)，端口(port)和主机(host)，那么这两个页面就属于同一个源(origin)

跨域资源访问

  • 不满足同源策略的资源访问
  • W3C定义了CORS
  • 现代浏览器已实现支持

其他跨域

  • Frame代理
  • JSONP

数据存储

cookie转为对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 function getcookie() {
    var cookie = {},
        all = document.cookie,
        list = all.split(';');
    if (all === ''){
        return cookie;
    }
    for (let i=0;i< list.length;i++){
        var item = list[i],
            p = item.indexOf('='),
            name = item.substring(0,p),
            value = item.substring();
        name = decodeURIComponent(name);
        value = decodeURIComponent(value);
        cookie[name] = value;
    }
    return cookie;
}

cookie增加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   document.cookie = 'name=value';
或者
   function setCookie(name,value,expires,path,domain,secure) {
       var cookie = {};
           var all = document.cookie;
           if (all === '') return cookie;
           var list = all.split('; ');
           for (var i = 0, len = list.length; i < len; i++) {
             var item = list[i];
             var p = item.indexOf('=');
             var name = item.substring(0, p);
             name = decodeURIComponent(name);
             var value = item.substring(p + 1);
             value = decodeURIComponent(value);
             cookie[name] = value;
           }
           return cookie;
   }

cookie删除

1
2
3
4
5
6
function removeCookie (name,path,domain){
    document.cookie = name+'='
    + ';path='+path
    + ';domain='+domain
    + ';max-age=0';
}

缺陷

  • 流量代价
  • 安全性问题(明文传递)
  • 大小限制

storage(替代cookie)

建议设置大小5M左右

  • sessionStorage
  • 有效期为浏览器的会话时间
  • 作用域包含窗口和localStorage
  • localStorage
  • 有效期永久
  • 作用域:协议,主机名,端口
  • 不共享窗口

JS对象

  • 读取 localStorage.name
  • 添加修改 lacalStorage.name = "NetEase"只支持字符串
  • 删除 delete localStorage.name

API

解决兼容问题

  • 获取键值对数量 localStorage.length
  • 读取 localStorage.getItem("name")或localStorage.key(i)
  • 添加修改 localStorage.setItem("name","NetEase")
  • 删除对应键值 localStorage.removeItem("name")
  • 删除所有数据 localStorage.clear()

JS动画

定时器

1
2
3
4
5
6
setInterval(func执行改变属性操作,delay时间,[,列表])只执行一次
clearInterval(set对象)清除定时器
setTimeout(func执行改变属性操作,[delay时间]可选,[,列表])重复执行
clearTimeout(set对象)
requestAnimationFrame(func)间隔时间不由用户控制，由刷新频率控制，默认1秒60次
cancelAnimationFrame(request对象)

多媒体和图形

1
2
3
4
5
6
7
8
9
<audio src="music.mp3"></audio>
<video src="movie.mov width=320 height=240></video>
兼容写法
<audio>
<source src="music.mp3" [type="audio/mpeg]>
<source src="music.wav" [type="audio/x-wav]>
<source src="music.ogg" [type="audio/ogg]>
</audio>
<video>一样用src

检测兼容性 

1
2
var a = new Audio();
a.canPlayType('audio/nav');//不支持返回""空字符

常用HTML属性

属性 是否必须 默认值 备注
src 是 音频文件的URL
controls 否 false 向用户显示控件
autoplay 否 false 音频在就绪后马上播放
preload 否 none 可为none/metadata/auto,音频在页面加载时加载并预备播放,使用autoplay则忽略该属性
loop 否 false 结束后重新播放

控制多媒体

  • load() 加载媒体内容
  • play() 开始播放
  • pause() 暂停
  • playbackRate 播放速度(区间0-4左右)
  • currentTime 播放进度
  • volume 音量
  • muted 静音

查询多媒体

  • paused 暂停
  • seeking 跳转
  • ended 播放完成
  • duration 媒体时长
  • InitialTime 媒体开始时间

相关事件

  • loadstart 开始请求媒体内容
  • loadmetadata 媒体元数据已经加载完成
  • canplay 加载了一些内容可以开始播放
  • play 调用Play()或这只了autoplay
  • waiting 缓冲数据不够播放暂停
  • playing 正在播放

canvas

1
2
3
4
<canvas id="" width="300" height"150"></canvas>
var canvas = d.getid('tutorial');
var ctx = cavas.getContext('2d');//渲染上下文对象
ctx.globalCompositeOperation = 'destination-over';图层显示方式

流程

清除画布 — 绘制图形 — 保存渲染上下文状态(设置) — 绘制图形 — 恢复渲染上下文状态 — 回到第二步

cavans教程

BOM

属性

属性名 描述
navigator 浏览器信息
location 浏览器定位和导航
history 窗口浏览器历史
screen 屏幕信息
  • navigator.userAgent判断是什么浏览器
  • location
  • assign(url) 载入新的url,记录浏览历史
  • replace(url) 载入新的url,不记录历史
  • reload() 重载当前页
  • history
  • length 历史记录长度
  • back() 正整数 后退
  • forward() 正整数 前进
  • go() 整数，前进或后退
  • screen
  • avail为浏览器

方法

  • alert 提示框
  • confirm 确定取消
  • prompt 输入框

窗口

1
2
window.open('http://','_blank','width=600,height=400')
window.close
参数 值 说明
top Num 离屏幕像素
W,H Num 宽高
_blank或_self 新窗口/当前显示
toolbar Y,N 工具条
menubar 菜单
scrollbars 滚动条
status 状态栏
resizable 窗口大小

事件

属性名 描述
load 文档和图片加载完
unload 离开当前文档
beforeunload 类似上面但询问用户是否确定离开
resize 拖动改变浏览器窗口大小
scroll 拖动滚动浏览器

表单操作

验证表单

  • 必须填写的字段在属性内加required

form

  • autocomplete on | off 候选值
  • elements
  • 该变淡子孙表单控件(除图片按钮)
  • 归属于该表单的表单控件(除图片按钮)
  • 操作表单form[index] | form['name'] | testForm.elements[]同上
  • ['name'] 先查找name再找Id
  • 一旦获取到，不管id,name如何变化，只要在页面上都可以用原名称获取
  • elements为动态获取，改变后返回null
  • reset()接口
  • 可重置:imput,keygen,output,select,textarea
  • file.reset()重置
  • label
  • htmlFor:for"txtId"关联到表单控件激活行为
  • 可关联元素:button,input(除hidden),keygen,meter,output,progress,select,textarea
  • 属性添加class可以改变关联的上传文件按钮
  • control
  • 未指定for则为第一个子孙可关联元素
  • form
  • 关联归属表单
  • 可关联:button,fieldset,input,keygen,label,object,output,select,textarea
  • 只读
  • input

select

  • select属性
  • name 表单提交名称指定
  • value 选中选项的value值
  • multiple 选择器的多选
  • options 动态选项集合
  • seletedOptions 所有选中选项的集合
  • selectedIndex 选中选项的索引，没有则返回-1
  • add(element[,before]) 指定位置添加选项
  • remove([index]) 删除某个选项
  • optgroup. 相关比较大的选项做分组
  • disabled 当前所有选项不可选
  • label 必选
  • option属性，除了上面两个还有
  • value 值
  • text 文字
  • index 当前选项索引值
  • selected 是否被选中
  • defaultSelected 默认选中
  • select创建
  • document.createElement
  • new Option([text[,value[,defaultSelected[,selected]]]])
  • select添加选项
  • insertBefore
  • select.add
    option 
    1
    2
    opt.parentNode.insertBefore(option,opt);
    select.add(option,opt);
  • select删除
  • removeChile
  • select.remove 
    1
    2
    opt.parentNode.removeChild(opt);
    select.remove(2);
JSDOM