js web api学习
选择器
- el.getElementById('id')
- el.getElementsByTagName('li') 返回伪数组
- el.getElementsByClassName('classname') 返回伪数组
- el.querySelector('selector') 返回第一个元素对象
- el.querySelectorAll('selector') 返回伪数组
- body = document.body
- html = document.documentElement
事件
事件三要素：
- 事件源
- 事件类型
- 事件处理函数
修改元素内容
- innerText
- innerHtml 保留空格和换行，识别标签
修改元素样式
- style
- className
获取元素属性：
- el.id el.className 获取内置属性
- el.getAttribute("id") 获取自定义属性
- el.setAttribute("name", value) 设置属性
- el.removeAttribute("name") 移除属性
h5自定义属性用data-开头
- el.getAttribute("data-index")
- el.setAttribute("data-index", 1)
- el.dataset.index
- el.dataset['index'] 驼峰命名法 data-index-name el.dataset.indexName el.dataset['indexName']
node节点关系：
- node.parentNode
- node.childNodes 可能多很多换行文本节点
- node.chileren 不包含文本节点
- node.firstChild 包含文本节点
- node.lastChild 包含文本节点
- node.firstElementChild不包含文本节点
- node.lastElementChild
- node.nextSibling 包含文本节点
- node.previousSibling
- node.nextElementSibling 不包含文本节点
- node.previousElementSibling
创建节点：
- document.write() 文档流加载完毕再调用，导致页面重绘
- el.innerHtml = html
- document.createElement('div')
- node.appendChild(el)
- node.insertBefore(el要插入的节点, 位置el)
a链接href为javascript:;点击不跳转
删除节点：
- node.removeChild(child) 返回child
复制节点：
- node.cloneNode() node.cloneNode(false)浅复制，只复制标签，不复制里面内容
- node.cloneNode(true) 复制整个节点，包含内容
注册事件
- onclick方法只能添加一个事件，后面的会覆盖前面的
- addEventListener方法，可以添加多个处理函数，按注册顺序依次执行
- type:click,mouseover
- function
- useCapture,默认false，只冒泡，不捕获
删除事件
- el.onclick = null
- el.removeEventListener('click',fn)
DOM事件流
三个阶段：
- 捕获阶段 addEventListener('eventType', fn, false或省略)
- 当前目标阶段
- 冒泡阶段 addEventListener('eventType', fn, true)
事件对象
btn.click = function (event) {}
- event.target 返回触发事件的对象
- this 返回绑定事件的对象，同currentTarget
阻止默认行为：
- event.preventDefault()
- return false;只适合 onclick=function(){}注册的事件处理程序
阻止事件冒泡：
- event.stopPropagation()
事件委托：
不要将事件注册到多个子节点上，而是注册的父节点上，用event.target得到子节点
常用的鼠标事件：MouseEvent
-
onclick
-
onmouseover
-
onmouseout
-
onfocus
-
onblur
-
onmousemove
-
onmouseup
-
onmousedown
-
e.clientX,Y 相对于浏览器窗口坐标
-
e.pageX,Y 相对于文档页面坐标
-
e.scrennX,Y 相对于电脑屏幕坐标
鼠标右键菜单：
`contextmenu
document.addEventListener("contextmenu", function (event) {
event.preventDefault()
})
禁止鼠标选中
selectstart
document.addEventListener("selectstart", function (event) {
event.preventDefault()
})
常用键盘事件：
- onkeydown 不区分字母大小写，文字未落入文本框就触发
- onkeyup 不区分字母大小写
- onkeypress 不识别 ctrl,shift等功能键，区分字母大小写 文字未落入文本框就触发
按下a键，依次触发 keydown,keypress,keyup
- event.keyCode ascii值
BOM
window对象
- window.onload 图片，脚本，css加载完毕
- window DOMContentLoaded 不包含图片，脚本，css
- window.onresize
- window.innerWidth
定时器
- var timer = window.setTimeout(fn, ms)
- setTimeout('fn()', ms)
- window.clearTimeout(timerid)
- window.setInterval(fn, ms)
- window.clearInterval(timerid)
this
同步异步
location对象
-
location.href
-
location.host
-
location.port
-
location.pathname
-
location.search
= location.hash -
location.href =
-
location.assgin("") 能后退
-
location.replace("") 不能后退
-
location.reload(true) true为强制刷新
navigator
- user-agent
history
- back()
- forward()
- go(1) go(-1)
offset属性
- el.offsetParent 返回带定位的父元素，若父元素没有定位，则返回body
- el.offsetTop 相对于带定位的父元素上方偏移
- el.offsetLeft 相对于带定位的父元素左方偏移
- el.offsetWidth 返回自身宽度，包括 border,padding,content
- el.offsetHeight 返回自身高度
offset与style区别：
- offset可以得到任意样式的样式值，style只能得到行内样式值
- offset返回值没有单位，style有单位
- offsetWidth包含border,padding,content;style只有content
- offsetWidth属性只读，不可写；style可读可写
- 得到值用offset,写用style
client属性
- el.clientWidth 包括padding,content,不包含border
- el.clientHeight
- el.clientTop 上border大小
- el.clientLeft 下border大小
匿名函数执行
- (function(){})();
- (function(){}());
scroll 系列
- el.scrollWidth 包含padding,content,不包含border
- el.scrollHeight 真正内容大小，包含溢出的部分
- el.scrollTop 被卷去的高度
- el.scrollLeft
- window.pageYOffset 页面被卷去的高度
mouseover与mouseenter
- mouseover经过自身与子元素时，都会触发，事件冒泡
- mouseenter只经过自身触发，对应mouseleave
