1.cookie(储存)
特点:默认情况下,只在用服务器时储存,页面关闭就失效
语法:document.cookie = "key=value"
如果想要储存多条就只能在写一条
如果想要增加储存时间就要借助expires
例如:我想要关闭页面30s以后cookie在过期
思路:a.获取现在的时间
b.把我们的时间(东八区 比世纪标准时间早8小时)调整到世纪标准时间
c.在这个基础上设置想要保存的时间
var time = new Date()
time.setTime(time.getTime - 1000*60*60*8 + 1000*30)
document.cookie = "qq=88888; expires=" + time
console.log(document.cookie)
2. cookie与storage 的区别
a.出现时间
cookie:有js的时候就有了
storage:H5以后才有
b.储存大小
cookie: 4kb
storage: 20Mb
c.前后端交互(前端向后端发送请求)
cookie : 交互时请求默认携带cookie (我发给你你全部都可以看见)
storage : 交互式请求不会携带 (你要什么我就给你什么)
d.前后端操作
cookie:前后端都可以操作
storage : 只能前端操作(js)
e. 过期时间
cookie: 页面关闭,储存就消失
storage: 不能手动改变时间
过期时间
localStorage(永久储存,除非手动清除)与 sessionStorage (会话级别,简单的
理解就是关闭页面时,储存就会失效)
3. 获取常规与非常规 DOM 的方法
3.1 获取常规DOM的方法
获取HTML的语法:document.documentElement
获取head的语法:document.head
获取body的语法:document.body
3.2 获取常规DOM的方法
a.通过类名获取标签
document.getElementsByClassName("类名")
获取的是一个伪数组 有数组的长度和下标但是没有数组的方法 获取某个元素可以
通过它的下标
不管有几个满足条件都是一个伪数组
b. 通过标签名获取标签
document.getElementsByTagName("标签名") 也是获取伪数组
c. 通过ID名获取标签名
document.getElementById("类名")
因为ID是独一无二的 所以这里获取的是标签
d. 获取满足条件的第一个标签
document.querySelector("和css命名一样")
获取满足条件的第一个标签
f. 获取满足条件的元素
document.querySelectorAll("和css命名一样")
也是获取伪数组
4. innerHTML 与 innerText
a.innerHTML
获取标签内部的文本和标签
注意:这里它会覆盖前面
例子:
oDiv.innerHTML = '<div>1234567890</div>'
所以只有 这里要是字符串
b.innerText
获取文本内容
例子:
oDiv.innerText = '<div>1234567890<div>'
容覆盖
5.获取元素的某些方法
5.1获取元素 (上面有提到)
5.2获取元素的某些属性
语法:元素.getAttribute("要查询的属性名")
5.3设置元素的某些属性
语法:元素.setAttribute("要设置的属性名", "要设置的属性值")
这个语法也可以增加属性名
语法:元素.setAttribute('要添加的属性名', '要添加的属性值')
5.4移除元素的某个属性
语法:元素.removeAttribute('要移除的属性名')
6.h5自定义属性
6.1 data-cs="12354"
H5自定义属性
data- 是固定定的 cs才是我们短的属性名 当然12354是属性值
6.2 获取语法
元素.dataset.属性名
6.3 设置语法
元素.dataset.cs = "要修改的属性值"
元素.dataset.age = "要添加的属性值"
6.4 删除语法
delete 元素.dataset.要删除的属性名
