1. dom操作初探
查找：
- document代表整个文档
- document.getElementById(‘id’)：元素id在ie8一下不区分大小写
- document.getElementsByTagName(‘div’)：通过标签名选择，类数组
- document.getElementsByName()：注意，只有部分标签name可生效（表单，表单元素、img，iframe）
- document.getElementsByClassName()：有兼容性问题,ie8及ie8以下没有
- document.querySelector()：CSS选择器，ie6和ie7以下没有，不时事
- document.querySelectorAll()：CSS选择器
遍历节点数：
- parentNode ->父节点（最顶层为#document）；
- childNodes ->子节点们
- firstChild -> 第一个子节点
- lastChild -> 最后一个子节点
- nextSibling ->后一个兄弟节点 previousSibling -> 前一个兄弟节点
基于元素节点数的遍历：
- parentElement -> 返回当前元素的父元素节点
- children -> 只返回当前元素的元素子节点
- node.childElementCount === node.children.length 当前元素节点的子节点个数
- firstElementChild -> 返回的是第一个元素节点（IE不兼容）
- lastElementChild -> 返回的是最后一个元素节点（IE不兼容）
- nextElementSibling/previousElementSibling -> 返回后一个/前一个兄弟元素节点（IE不兼容）
节点的四个属性：
- nodeName：元素的标签名，以大写形式表示，可读
- nodeValue：Text节点或Comment（注释）节点的文本内容，可读写
- nodeType：节点的类型，只读
- attributes：Element 节点的属性集合
节点的一个方法：Node.hasChildNodes();
节点的类型：
- 元素节点 —— 1
- 属性节点 —— 2
- 文本节点 ——3
- 注释节点 —— 8
- document —— 9
- DocumentFrament —— 11
2. dom继承树，dom基本操作
document —> HTMLDocument —> Document
基本操作：
- geElementById方法定义在Document.prototype上，即Element节点不能使用
- getElementsByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用
- getElementsByTagName方法定义在Document.prototype和Element.prototype上
- HTMLDocument.prototype定义了一些常用属性，body，head分别指代HTML文档中的<body><head>标签
- Document.prototype上定义了DocumentElement属性，指代文档的跟元素，在HML文档中，他总是指代<html>元素
- getElementsByClassName、querySelectorAll、querySelector在Document.prototype，Element.prototype类中均有定义
增：
- document.createElement();
- document.createTextNode();
- document.createComment();
- document.createDocumentFragment();
插： - PARENTNODE.appendChild()
- PARENTNODE.insertBefore(a, b);
删： - parent.removeChild()
- child.remove()
替换： - parent.replaceChild(new, origin);
Element节点的一些属性
- innerHTML
- innerText(火狐不兼容)/ textCntent（老版本IE不好使）
Element节点的一些方法 - ele.setAttribute();
- ele.getAttribute();
3. data对象，定时器
js定时器
- setInterval()
- setTimeout()
- clearInterval()
- clearTimeout()
- 全局对象window上的方法，内部函数this指向window
- 注意：setInterval(“func()”, 1000);
4. 获取窗口属性，获取dom尺寸，脚本化CSS
查看滚动条的滚动距离
- window.pageXOffset/pageYOffset（IE8及IE8以下不兼容）
- document.body / documentElement.scrollLeft/scrollTop（兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时的值）
- 封装兼容性方法，求滚动轮滚动离getScrollOffset()
查看视口的尺寸
- window.innerWidth/innerHeight
- document.documentElement.clientWidth/clintHeight
- document.body.clientWidth/clientHeight
- 封装兼容性方法，返回浏览器视口的尺寸getViewportOffset()
查看元素的几何尺寸
- domEle.geetBoundingClientRect()
- 兼容性很好
- 该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右上角的X和Y坐标
- heigth和width属性老版本IE并未实现
- 返回的结果并不是“实时的”
查看元素的尺寸
- dom.offsetWidth ，dom,offsetHeight
查看元素的位置 - dom.offsetLeft，dom.offsetTop
- 对于无定位父级的元素，返回相对文档的坐标。对于有定位的父级的元素，返回相对于最近的有定位的父级的坐标
- dom.offsetParent
- 返回最近的有定位的父级，如无，返回body，body.offsetParent返回
- eg：求元素相对于文档的坐标getElementPosition
让滚动条滚动
- window上有三个方法
- scroll()，scrollTo() scrollBy()
- 三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置
- 区别：scrollBy() 会在之前的数据基础之上做累加
- eg：利用scrollBy()快速阅读的功能
查询计算样式
- window.getComputedStyle(ele, null);
- 计算样式只读
- 返回的计算样式的值都是绝对值，没有相对单位
- IE8及IE8以下不兼容
5. 事件
如何绑定事件处理函数
- ele.onXXX = function(){}
- 兼容性好，但是一个元素的同一个事件上只能绑定一个处理函数
- 基本等同于写在HTML行间上
- obj.addEventListener(type, fn, false)
- IE9以下不兼容，可以为一个事件绑定多个处理程序
- obj.attachEvent(‘on’ + type, fn)
- IE独有，一个事件同时可以绑定多个处理程序
解除事件处理程序
- ele.onclick = false/ " "/ null
- ele.removeEventListener(type, fn, false)
- ele.datachEvent(‘on’ + type, fn)
- 注：若绑定匿名函数，则无法解除
事件处理模型——事件冒泡、捕获
- 事件冒泡：
- 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
- 事件捕获：
- 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）（自顶向下）
- IE没有捕获事件
- 触发顺序，先捕获，后冒泡
- focus、blur、change、submit、reset、select等事件不冒泡
取消冒泡和阻止默认事件
- 取消冒泡：
- W3C标准event.stopPropagation();但不支持ie9以下版本
- IE独有event.cancelBubble = true
- 封装取消冒泡的函数stopBubble(event)
- 阻止默认事件：
- 默认事件——表单提交，a标签跳转，右键菜单等
-
- return false;以对象属性的方式注册的事件才生效
-
- event.preventDefault(); W3C标准，IE9以下不兼容
-
- event.returnValue = false; 兼容IE
- 封装阻止默认事件的函数cancelHander(event)
事件对象
- event || window.event用于IE
- 事件源对象：
- event.target 火狐只有这个
- event.srcElement le只有这个
- 这俩chome都有
- 兼容性写法
事件委托
- 利用事件冒泡，和事件源对象进行处理
- 优点：
-
- 性能 不需要循环所有的元素一个个绑定事件
-
- 灵活 当有新的子元素时不需要重新绑定事件
-
事件分类
- 鼠标事件
- click、mousedown、mousemove、mouseup、contextmnu、mouseover、mouseout、mouseenter、mouseleave
- 用button来区分鼠标的按键
- DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键
- 如何解决mousedown和click的冲突
移动方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渡一</title>
<script src="js.js" defer></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
top: 0;
left: 0;
line-height: 100px;
text-align: center;
user-select: none;
}
</style>
</head>
<body>
<div>我是方块</div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
div.onmousedown = function () {
document.onmousemove = function (e) {
var event = e || window.event;
div.style.left = e.pageX - 50 + "px";
div.style.top = e.pageY - 50 + "px";
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</body>
</html>
键盘事件
- keydown，keyup，keypress
- keydown > keypress > keyup
- keydown和keypress的区别：
- keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
- keypree返回ASCLL码，可以转换成响应字符
+ 文本操作事件 + input，focus，blur，change
+ 窗体操作类（window上的事件） + scroll load
window.onscroll = function(){
console.log(window.scrollX + " " + window.scrollY);
}
6. json
- JSON是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象是本地用的，json是用来传输的）
- JSON.parse(); string ——>json
- JSON.stringify(); json ——> string
异步加载js
- js加载的缺点：加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作
- 有些工具方法需要按需加载用到再加载，不用不加载
javascript异步加载的三种方案：
- defer异步加载，但是等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写在内部
- async异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里
- 1and 2执行时也不阻塞页面
- 创建script，插入到DOM中，加载完毕后callBack
js加载时间线（略）
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
