选择器
获取元素的方法
1.document.querySelector('选择器');
选择器可以是
- id选择器 '#id名'
- class选择器 '.class名'
- 标签选择器 '标签名' ps: 标签选择器中
<input type="text" name="user" id="user">
document.querySelector('input[name = user]')
是可以获取到input的 故有
4.document.querySelector('标签[标签属性=value]')
5.后代选择器等
2.document.querySelectAll('选择器')
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<script type="text/javascript">
var oDiv = document.querySelectorAll('div');
console.log(oDiv);//NodeList(2)
</script>
这个方法获取出来的数据可以使用forEach等方法
类的操作
在代码1-2情况下
1. 添加类：
oDiv.classList.add('');
<div id="box1" class="box"></div>
<script type="text/javascript">
var oDiv = document.querySelector('div');
oDiv.classList.add('list');
console.log(oDiv);
</script>
打印出来的结果是
<div id="box1" class="box list"></div>
class里多了 list
2.删除类:
oDiv.classList.remove('')
oDiv.classList.remove('list');
打印出来的结果是
<div id="box1" class="box"></div>
class里少了 list
3.检查类
oDiv.classList.contains('')
class里有无这个值 有返回true 没有返回false
4.改变类
oDiv.classList.toggle('')
class里有无这个值 有的话变无 无的话变有
自定义属性
oDiv.dataset.自定义属性名 = 值
例
<div id="box1" class="box"></div>
<script type="text/javascript">
var oDiv = document.querySelector('div');
oDiv.dataset.test = true;
</script>
打印出来的结果是
<div id="box1" class="box" data-test="true"></div>
获取方法：直接使用 xx.dataset.自定义属性
console.log(oDiv.dataset.test);
文件读取
首先input type="file"
1.获取input元素 用var = fileInput = document.querySelector('input');
2.监听选中 fileInput.onchange = function(){}
3.获取文件 var file = this.files[0];
4.（核心）创建读取器 var reader = new FileReader();
5.（核心）读取读取器的内容 如文本就用readAsText()
6.（核心）监听读取 .onload = function(){}（这里的onload是读取完触发）
完整代码
<input type="file">
<script type="text/javascript">
//1.获取元素
var fileInput = document.querySelector('input');
//2.监听选中
fileInput.onchange = function(){
//3.获取文件
var file = this.files[0];
//4.创建读取器
var reader = new FileReader();
//5.开始读取
reader.readAsText(file);
//6.监听读取
reader.onload = function(){
console.log(reader.result);
}
}
</script>
JSON
JSON格式特点：
- 书写简单，一目了然
- 符合JS语法
JSON是各个网站交换数据的标准格式 每个JSON对象就是一个值，可能是数组或者是对象
格式 { "key":"value" }
规定：
- 复杂类型的值只能是数组或者是是对象，不能是函数 正则 日期
- 基本数据类型的值只有4种：字符串 数值 布尔值 null
- 字符串必须使用双引号表示，不能单引号
- 数组或对象最后一个成员后面，不能加逗号
json与json字符串的转化
JSON转化成JSON字符串：JSON.stringify();
JSON字符串转化成JSON：JSON.parse();
假设myJson是一个json对象
//1.把JSON转化为JSON字符串
var jsonStr = JSON.stringify(myJson);
console.log(jsonStr);
console.log(typeof jsonStr);//string
//2.将JSON字符串转化为JSON
var json = JSON.parse(jsonStr);
console.log(json);
console.log(typeof json);//object
LocalStorage
1. 将json对象转化为JSON字符串:
window.localStorage.setItem('要放进LocalStorage的name',JSON对象));
2. 获取数据
window.localStorage.getItem('LocalStorage里的name')
3. 清除数据
window.localStorage.removeItem('LocalStorage里的name')
或者
window.localStorage.clear(); 清除LocalStorage里的所有数据
localStorage、sessionStorage 和 Cookie 区别
cookie和localStorage的区别
（1）共同点：cookie、sessionStorage和localStorage都是由浏览器存储在本地的数据。
（2）区别：
a. cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密），数据始终在同源的http请求中携带，即在浏览器和服务器之间来回传递；localStorage不会自动把数据发给服务器，尽在本地保存
b. cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储大小也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据（如会话标识）；localStorage也有存储大小的限制，但比cookie大很多，可以达到5M或更大。
c. cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；localStorage始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；sessionStorage在当前浏览器窗口关闭之后自动删除
d. localStorage支持事件通知机制，可以将数据更新的通知发送给监听者，API接口使用更方便；cookie的原生接口不友好，需要程序员自己封装
（3）localStorage如何删除数据：localStorage对象可以将数据长期保存在客户端，除非人为清除，提供了以下几个方法：
a. 存储：localStorage.setItem(key,value) 如果key存在，更新value
b. 获取：localStorage.getItem(key) 如果key不存在，则返回null
c. 删除：localStorage.removeItem(key) 一旦删除，key对应的数据将会全部删除
d. 全部清除：localStorage.clear()使用removeItem逐个删除太麻烦，可以使用clear，执行的结果是清除所有的localStorage对象保存的数据
（4）localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据。
