cookie
1. cookie 只能在用服务器启动的页面中正常使用
语法: document.cookie = 'key=value'
设置一条 cookie
document.cookie = 'QQ=123456789'
设置多条 cookie
document.cookie = 'QQ=123456789'
document.cookie = 'password=987654321'
设置一条带有过期时间的 cookie
不管你设置的是那个时区的时间(我们是东八区),它都会按照世界标准时间去设置
如果我们想要设置一个过期时间的话, 需要先往后调整8小时; 然后加上你需要的过期时间
比如: 我需要设置一条 30秒后过期的 cookie
1. 获取当前时间
2. 将当前时间往后调整 8 小时
3. 把调整后的时间 加上我们设置的过期时间
var timer = new Date()
timer.setTime(timer.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30)
document.cookie = 'VX=6666;expires=' + timer
cookie 与 storage 的区别?
1.出现时间
cookie: 有 JS 的时候就有了
storage: 有 H5 以后才有的
2.存储大小
cookie: 4kb
storage: 20MB
3.前后端交互(前端向后端发送请求)
cookie: 交互时请求默认携带 cookie
storage: 交互式请求不会携带, 除非前端人员配置传递
4.前后端操作
cookie: 不管前后端语言都可以操作
storage: 只能有前端语言来操作 (JS)
5.过期时间:
cookie: 默认会话级, 页面关闭, 存储消失; 可以通过手动配置
storage: 不能通过手动配置
localStorage 与 sessionStorage 的区别?
过期时间:
localStorage: 永久存储, 除非手动清理
sessionStorage: 会话级别, 关闭页面, 存储就失效
认识DOM
对页面删除一个节点
增加一个节点
对某一个节点添加一个 class 类名
删除某一个节点的类名
获取非常规 DOM(HTML head body)
1.1 HTML语法: document.documentElement
var htmlEle = document.documentElement
1.2 head 语法: document.head
var headEle = document.head
1.3 body 语法: document.body
var bodyEle = document.body
获取常规 DOM
JS在获取常规元素时与CSS一样, 可以通过类名,标签名,ID名
1.1 通过类名去获取标签
<div class="box" id="box2">我是具有 class 的box1</div>
var Box = document.getElementsByClassName('box')
Box 是一个伪数组, 想要获取到某一个元素, 可以通过下标
伪数组: 长得和数组类似, 有下标有length, 但是没有数组的常用方法
不管页面具有这个 类名的 元素 有多少个, 获取到的永远是 伪数组的形式
1.2 通过 标签名 去获取标签
var oDiv = document.getElementsByTagName('div')[0]
oDiv 也是一个伪数组, 想要获取到某一个元素, 可以通过下标
1.3 通过 ID名 去获取标签
var oBox2 = document.getElementById('box2')
因为 ID 通常都是独一无二的
所以 这里获取到的就是一个具有 box2 ID 名的标签, 而不是一个伪数组
2.1 按照选择器的形式 获取标签满足条件的第一个
var myDiv = document.querySelector('.box')
querySelector: 获取到满足条件的 第一个标签
2.2 按照选择器的形式 后去所有满足条件的标签
var myDivAll = document.querySelectorAll('.box')
querySelectorAll: 获取到满足条件的 所有标签
innerHTML 和 innerText
innerHTML
获取到标签内部的文本与 HTML 结构
赋值时 会识别 字符串中的 html结构
如果有实际的标签, 会把它当成标签渲染到页面上
innerText
只会获取到页面结构的文本内容, HTML结构会被忽略掉
赋值时 不会识别 字符串中的 html 结构
如果有实际的标签, 会把它当成 字符串 渲染到页面上
获取元素的某些属性
<div class="box" a="100" b="200">我是一个具有很多属性的 DIV 标签</div>
1. 获取元素
var oBox = document.getElementsByClassName('box')[0]
console.log(oBox)
2. 获取元素的某些属性
// 语法: 元素.getAttribute('要查询的属性名')
console.log(oBox.getAttribute('class'))
console.log(oBox.getAttribute('a'))
3. 设置元素的某些属性
// 语法: 元素.setAttribute('要设置的属性名', '要设置的属性值')
oBox.setAttribute('a', 'qwer')
oBox.setAttribute('b', 'asdf')
oBox.setAttribute('qqq', 'qqqq123123')
4. 移出元素的某个属性
// 语法: 元素.removeAttribute('要移除的属性名')
oBox.removeAttribute('b')
h5的自定义属性
data-cs="123456789"
H5 自定义属性中 data- 是固定的
cs 是我实际的 属性名
"123456789" 是我实际的 属性值
<div qq="123" data-cs="123456789">H5新增自定义属性</div>
获取 H5 自定义属性
// 1. 获取语法: 元素.dataset.属性名
console.log(oDiv.dataset.cs)
// 2. 设置语法
oDiv.dataset.cs = 'qwe' // 标签中实际拥有
oDiv.dataset.age = 18 // 标签中实际没有
// 3. 删除
delete oDiv.dataset.age
