一、获取元素
1.document.getElementById（）
- 获取id名；获取是个元素；没有获取到的话是Null；
2.getElementsByTagName(）
- 获取标签名；获取的是该标签名的元素的集合，获取到的是个数组，没有的话是[]；
3.getElementsByClassName(）
- 获取类名；获取的是该标签class名的元素的集合，获取到的是个数组，没有的话是[]；
4.querySelector( )
- 获取的是是改标签元素
5.querySelectorAll( )
- 获取的是该标签的元素的集合，获取到的是个数组，没有的话是[]；
二、事件
| scroll | 滚动事件 |
|---|---|
| change | 改变事件 |
| click | 点击事件 |
| mouseover | 鼠标经过事件 |
| mouseout | 鼠标离开事件 |
| mouseenter | 鼠标经过事件 |
| mouseleave | 鼠标离开事件 |
| mousemove | 鼠标离开事件 |
| mouseup | 鼠标弹起事件 |
| mousedown | 鼠标按下事件 |
| focus | 获取光标焦点事件 |
| blur | 失去焦点事件 |
| dblclick | 双击事件 |
| keyup | 按下键盘事件 |
| keydown | 按下键盘事件 |
| keypress | 按下键盘事件，不能识别功能键 |
| keyCode | ASCII 码 |
| pageshow | 前进后退再次刷新，e.persited |
| input | 表单事件，不管输入什么都会触发 |
| lode | 页面加载事件 |
三、操作文本内容
1.innerText=""，除去换行、空格，不识别标签；
2.innerHTML="",识别标签；
四、自定义属性
获取元素属性：
- element .属性；
- 获取标签的属性：getAttribute（属性名）
更改属性值
- element.属性=‘值’；
- element.setArribute(‘属性’：‘值’)
自定义属性都是以 date开头；
以date开头的都是以dateset.属性名/或者dateset[‘属性名’]
设置.获取.删除属性:
禁用表单
disabled=true 禁用
disabl=false 不禁用
五.获取节点
父节点：
1. element.parentNode；包括文本 （空格）
2.element.parentElement; 不包括文本 （空格）
子节点;
1.element.childNodes; 获取当前所有子节点（亲儿子）
1. element.children;元素
2. element.firstChild;
创造节点
document.createElement(‘创造节点’)
添加节点
1.element.appendChild( 添加元素)；
2.element.insertBefore(添加元素，指定元素)；
如果要插的元素，页面上有的话，就从原来位置移动到新的位置；
删除节点元素
1. element.removeChild( )
2. remove（），要删除的元素
复制节点元素
emlement.cloneNode（）
括号为空，或者为false，克隆标签 ，为浅拷贝。true的时候为深拷贝，可以复制里面的内容；
创建元素三种方法区别
- document.write(’<h1我是添加的元素’);页面加载完之后执行
- document.innerHTML( ); 效率低
- document.createElement（ ）; 效率高
绑定事件：addEventListener（）
解绑事件：removeEventListener ( ‘事件如：click’，函数名)
传统解绑事件：事件源.事件=null；
IE解绑事件：detachEvent（‘事件’，函数名）；
六.事件对象
- e.target ：返回触发事件对象
- e.srcElement :返回触发事件的对象 使用在IE6-8；
- e.type :返回事件类型；
- e.preventDefault( ) 阻止事件的默认行为 ;
- e.stopPropagation( ) 阻止事件冒泡；
禁止鼠标右键菜单 contextmenu
禁止选中文字 selectstart
距离
e.clientX
e.clientY 浏览器窗口坐标；
e.pageX
e.pageY 根据文档的距离；
e.screenX
e.screenY 根据电脑屏幕的距离；
键盘事件
keyup 按键被松开的时候；
keydown 按下键的时候；识别功能键；
keypress 按下键的时候；不识别功能键；
e.keyCode 返回改键的ASCLL值
document.addEventListener('keyup',function(){
console.log('我是弹起的');
})
document.addEventListener('keydown',function(){
console.log('我是按下键的');
})
document.addEventListener('keypress',function(){
console.log('我是功能键不管用的按下事件');
})
浏览器功能
| lode | 窗口加载 |
|---|---|
| Domcontent | 窗口加载 |
| resize | 窗口大小 |
| innerWidth | 窗口大小 |
resize 获取浏览器页面大小
// 页面结构加载完成
document.addEventListener('DOMContentLoaded',function(){
alert('1111')
})
// 所有资源加载完成
window.addEventListener('load',function(){
alert('你是煞笔')
})
// 窗口关闭时候触发
window.addEventListener('upload',function(){
alert('我是窗口关闭触发的')
})
// 和获取屏幕大小
// resize
window.innerWidth;
window.innerHeight;
定时器
1.setTimeout();,延迟计时器
2.setInterval(),间隙定时器
function fn1() {
console.log('我是定时器1');
}
// 延迟定时器
var time1 = setTimeout(fn1, 2000)
// 清除定时器
clearTimeout(time1)
// 间歇定时器
function fn2(){
console.log('我是定时器2');
}
var time2=setInterval(fn2,2000)
// 清除定时器
clearInterval(time2)
添加类名
1.元素.className(‘名字’);
2.元素.classList.add()
删除类名
元素.classList.remove()
更换类名
元素.classList.toggle()
location - 地址栏
属性
href 地址栏中的地址
location.href = 新地址
注意：这里直接将当前页面的地址改变了，会将当前页面变为目标页面，这和跳转有区别，这里是不能进行页面的后退的。
location.search
获取网页地址栏中的？及其后面的字符。获取到的是一个字符串。
assign 跳转页面
location.assign(新地址)
注意：跳转后可后退，有历史记录
replace 跳转页面
location.replace(新地址)
注意：跳转后不可后退，没有历史记录
reload 刷新页面
location.reload(布尔值)
注意：
参数为true的时候，表示不使用缓存刷新，重新加载所有资源
参数为false或不写的时候，表示使用缓存刷新
history
forward() 前进
back() 后退
go()
1 前进1步
-1 后退1步
0 刷新
2 前进2步
navigator.userAgent
有关浏览器的信息
计算机系统
浏览器内核
浏览器版本
（重点）offset系列属性: 获取 标签的 大小 和 位置
offsetParent : 最近的有定位的上层元素 如果找不到就是body
有定位：position relative absolute fixed
offsetLeft、offsetTop : 标签参考 其offsetParent 的位置
offsetLeft：当前标签的左侧和其offsetParent的左侧之间的距离(两个标签左边框之间的距离)
offsetTop：当前标签的上侧和其offsetParent的上侧之间的距离(两个标签上边框之间的距离)
offsetWidth、offsetHeight ：标签的大小 width / height + padding + border
注意：以上offset系列书信都是只读属性（只能获取 不能设置）
user-select:none;
不让用户选中该盒子内的文字，这是一个CSS样式
client获取盒子大小
获取 标签的容纳范围 的大小和位置
clientLeft：左边框的宽度
clientTop：上边框的高度
clientWidth：width + padding （比offsetWidth少了一个border）
clientHeight：height + padding
pageshow：页面显示的时候触发该事件（和onload类似）
页面跳转的时候 触发
前进，后退的时候 触发
刷新页面的时候 触发
注意：onload事件在火狐浏览器中 不会被前进后退触发
（重点）立即执行函数（自执行函数）
( function(){ 代码 } )( )
( function(){ 代码 }() )
作用：独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
场景：当页面引入了多个功能独立的js文件时（a.js-页面交互 b.js-登录功能 c.js-上传文件功能），可以把不同js文件的代码封装在不同的立即执行函数中
重点）scroll系列属性
获取 标签内容的 大小、位置
scrollWidth：
如果标签的内容没有超出标签的容纳范围，即等于标签的容纳范围的宽度
如果标签的内容超出标签的容纳范围，即等于标签内容的真实宽度
scrollHeight：
如果标签的内容没有超出标签的容纳范围，即等于标签的容纳范围的高度
如果标签的内容超出标签的容纳范围，即等于标签内容的真实高度
scrollLeft
标签的内容超出标签本身左侧的宽度
注意：可以设置（可以赋值）
scrollTop
标签内容超出标签本身上侧的高度
注意：可以设置（可以赋值）
window.pageYoffset
获取页面滚动出去上方的高度
window.pageYOffset
（三）——移动端——
手指事件
手指开始摁下：touchstart
手指移动：touchmove
手指抬起：touchend
获取手指对象：
e.targetTouches：在目标元素上的手指列表
e.touches：在屏幕上的手指列表
e.changedTouches：改变状态的手指列表
获取手指坐标：
e.targetTouches[0].pageX
e.targetTouches[0].pageY
操作元素类名
元素.classList
添加类：元素.classList.add(新类名)
不会覆盖之前的类名
删除类：元素.classList.remove(新类名)
不会删除其他类
切换类：元素.classList.toggle(新类名)
如果有当前类，则删除该类
如果没有当前类，则添加该类
HTML5 Web 存储
localStorage
他是一个对象（window.ocalStorage )
没有时间限制的数据存储，一年以后数据仍然可以使用
数据永久性存储在浏览器中，以键值对的方式存储，它本身是一个对象
创建方法：
window.localStorage.key=value
window.localStorage[key}=value key需要加引号
window.localStorage.setItem=("key", "value") 这里键值对都需要加引号
修改方法：
如同修改变量
读取方法：
如同查看对象
localStorage.a;
localStorage["b"];
localStorage.getItem("key");
删除方法：
全部删除：window.localStorage.clear（）
删除单个键值对：window.localStorage.removeItem("key");
特点：相当于一个5M大小的针对前端页面的数据库
优点：拓展了cookie的4K限制、可以节约带宽
缺点：IE9及以上支持。限定存储的数据类型为string，所以我们日常需要存储对象类型的数据时，需要进行转换。存在字符串写读时消耗内存的缺点。其数据不能被抓取。
注意点：localStorage 的使用遵循同源策略，不同站点不能共享同一个localStorage
sessionStorage
针对一个session的数据存储，只能保存同一窗口（或标签页）的数据，并在关闭的时候清空
与localStorage的唯一区别：本存储在对话结束的时候会被清空。
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
