DOM

Posted 2020-07-28

element元素 Event事件 node节点 Sibling兄弟 Tag标签

user.getElementsByTagName(*) //获取所有后代标签元素

获取节点
getElementsByClassName //获取class名称下的元素
users.getElementsByClassName("user last")[2]获取第三个元素

querySelector/All 获取第一个符合条件的元素/获取所有
list = element.querySelector/All(selector)

创建节点
element = documrnt.createElement(tagName)
document.createElement("div"); //div
document.createElement("a"); //a
document.createElement("script");//script

修改节点
element.textContent 节点及其后代节点的文本内容
element.innerText 节点及其后代节点的文本内容

插入节点
appendChild

insertBefore 指定位置插入节点

删除节点
child = element.removeChild(child)

属性操作
property accessor 属性访问器
getAttribute 返回指定属性名的属性值
setAttribute 添加指定的属性，并为其赋指定的值
dataset 获取保存数据

样式操作

事件流
事件注册
eventTarget.addEventListener（type，listener[,useCapture]）

取消事件注册
eventTarget.removeEventListener（type，listener[,useCapture]）

事件触发
eventTarget.dispatchEvent（type）

 

cookie缺陷
1、流量代价 2、安全性问题 3、大小限制

Storage
大小：5MB
localStorage 默认有效期为永久
sessionStorage 默认有效期为浏览器会话时间

动画三要素
对象 属性 定时器
setTimeout 在指定时间只执行一次
setInterval 在指定时间多次执行
requestAnimationFrame 间隔时间不由用户控制 由显示器刷新频率控制（更流畅）

视频/音频

playbackRate 播放速度
取值0-1 慢速播放
取值1 正常播放
取值1+ 快速播放（4以上基本不能播放）

currentTime 播放进度
有限区间：媒体资源的播放时长

volume 音量
有效区间：0-1的浮点数

muted 静音
ture/false