前端浅入门
获取节点
- childNodes 获取所有子节点
- children 获取所有子元素
- firstChild 获取第一个子节点
- firstElementChild 获取第一个子元素
- lastChild 获取最后一个子节点
- lastElementChild 获取最后一个子元素
- previousSibling 获取上一个兄弟节点
- previousElementSibling 获取上一个兄弟元素
- nextSibling 获取下一个兄弟节点
- nextElementSibling 获取下一个兄弟元素
- parentNode 获取父节点
- parentElement 获取父元素
节点属性
- nodeType
- 元素节点 =>1
- 属性节点 =>2
- 文本节点 =>3
- 注释节点 =>8
- nodeName
- 元素节点 =>大写标签名
- 属性节点 =>属性名
- 文本节点 =>#text
- 注释节点 =>#comment
- nadeValue
- 元素节点 =>null
- 属性节点 =>属性值
- 文本节点 =>文本内容
- 注释节点 =>注释内容
节点操作
- 创建节点
- createElement
- createTextNode
- 插入节点
- appendChild
- insertBefore
- 替换节点
- replaceChild
- 删除节点
- removeChild
- 克隆节点
- cloneNode
文档碎片
- 就是一个筐，承载所有的节点，然后一次性向页面中插入
- document.createDocumentFragment
元素尺寸
- clientWidth 和 clientHeight
- 获取的是内容 + padding值
- offsetWidth 和 offsetHeight
- 获取的是内容 + padding + border
元素偏移量
- offsetLeft 和 offsetTop
- 没有定位父级的时候，根据页面左上角
- 有定位父级的时候 ，根据定位父级的左上角（边框内侧）
点击事件，事件对象的坐标点
- offsetX 和 offsetY
- 根据准确触发元素的左上角（边框内侧）
- clientX 和 clientY
- 根据可视窗口的左上角
- pageX 和 pageY
- 根据文档流的左上角
获取屏幕尺寸
- innerWidth 和 innerHeight
- 获取包含滚动条的尺寸
- document.documentElement.clientWidth 和 document.documentElement.clientHeight
- 获取的是不包含滚动条的尺寸
获取非行内样式
- getComputedStyle(元素，是否获取伪元素).要获取的属性
- 标准浏览器
- 元素.currentStyle.要获取的属性
- IE低版本
循环绑定事件
- 在循环绑定事件的处理函数里面不能使用循环变量，在这里我们可以使用 this 表示当前事件是谁身上的
事件的组成
- 事件源（谁身上的事件）
- 事件类型（什么事件）
- 事件处理函数
事件对象
- 浏览器给我们提供的描述当前事件的一些信息对象
- window.event
- 以形参的方式获取 function(e){}
- 兼容写法
box.onclick = function(e){ e=e||window.event; }
点击事件按钮
- e.button===0 表示按下的是左键
- e.button===2 表示按下的是右键
键盘事件键盘码
- 用来描述你点击的是哪一个按键
- e.keyCode 标准浏览器
- e.which FireFox低于20版本
- 兼容写法
var code = e.keyCode||e.which;
键盘组和按键
当你按下某一个按键的时候，判断 alt/ctrl/shift/ 有没有同时被按下
- altKey =>true 表示被按下 以下同理
- ctrlKey
- shiftKey
事件绑定方式
- dom 0级事件
```
box.onclick= function(){}
```
- 标准浏览器 dom 2级事件
- box.addEventListener(“事件类型”,事件处理函数，冒泡还是捕获);
- IE低版本
- box.attachEvent(事件类型，事件处理函数)
- 他们的区别
- addEventListener
- 事件类型不用on
- 取消事件时用：removeEventListener
- attachEvent
- 事件需要on
- 取消事件时用：detachEvent
- addEventListener
- 如果事件需要移除，那么在注册的时候就要单独写函数
事件的传递
在元素触发事件的时候，会按照结构父级逐层向上传递，知道window,所有同类型事件都会触发
事件的冒泡和捕获
- 冒泡
- 从目标到window的顺序执行所有的同类型事件
- 捕获
- 从window到目标的顺序执行所有同类型事件
- 目标
- 准确触发行为的那个元素
- 取消冒泡
- e.cancelBubble=true IE低版本
- e.stopPropagation() 标准浏览器
事件委托
利用了事件冒泡的原理把属于子元素的事件委托给某一个结构父级
在事件里通过 target 来捕获你准确触发行为的那个元素是谁。
- e.target 标准浏览器
- e.srcElement IE低版本
- 兼容写法
var target = e.target||e.srcElement;
阻止浏览器默认行为
- 不需要我们注册事件，浏览器本身自带的行为
- 阻止默认行为
- e.returnValue=false; IE低版本
- e.preventDefault(); 标准浏览器
- return false; 通用（但是不是所有事件都好使）
