cookie 与 storage 的区别

  出现时间

    cookie: 有 JS 的时候就有了
    storage: 有 H5 以后才有的

存储大小

    cookie: 4kb
    storage: 20MB

前后端交互(前端向后端发送请求)

    cookie: 交互时请求默认携带 cookie
    storage: 交互式请求不会携带, 除非前端人员配置传递

前后端操作

    cookie: 不管前后端语言都可以操作
    storage: 只能有前端语言来操作   (JS)

过期时间:

    cookie: 默认会话级, 页面关闭, 存储消失; 可以通过手动配置
    storage: 不能通过手动配置

localStorage 与 sessionStorage 的区别

过期时间:

  localStorage: 永久存储, 除非手动清理
  sessionStorage: 会话级别, 关闭页面, 存储就失效

DOM相关

1.获取非常规 DOM(HTML head body)

  1.1获取html
  var htmlEle = document.documentElement

  1.2:获取body

  var bodyEle = document.body

  1.3:获取head

  var headEle = document.head

2.获取常规 DOM

  2.1 通过 类名 去获取 标签

  	var oBox = document.getElementsByClassName('box')

  2.2 通过 标签名 去获取标签

  	 var oDiv = document.getElementsByTagName('div')

  2.3 通过 ID名 去获取标签

  	var oBox2 = document.getElementById('box2')

  注意:类名/标签名两种方式得到的结果为伪数组,想要获取具体的属性值必须结合下标获取,而id的方式获取到的就是一个具有ID名的标签, 而不是一个伪数组

3.按照选择器的形式

3.1: 获取满足条件的第一个标签

  	var myDiv = document.querySelector('.box')

  3.2: 获取满足条件所有标签

  	var myDivAll = document.querySelectorAll('.box')

操作元素的步骤

* 1.获取需要的标签(参考前面小结)
* 2.获取属性
		2.1:innerHTML:获取到标签内部的文本与 HTML 结构
		2.2:innerText:只会获取到 页面结构的文本内容, HTML结构会被忽略掉
* 3.操作元素属性
		3.1:innerHTML:赋值时 会识别 字符串中的 html结构;如果有实际的标签, 会把它当成标签渲染到页面上
		3.2:innerText: 赋值时 不会识别 字符串中的 html 结构;如果有实际的标签, 会把它当成 字符串 渲染到页面上

元素属性的设置

* 1. 获取元素
* 2. 获取元素的某些属性
* 3. 设置元素的某些属性
		语法: 元素.setAttribute('要设置的属性名', '要设置的属性值')
		举例: 

			oBox.setAttribute('a', 'qwer')
			oBox.setAttribute('b', 'asdf')
* 4.移出元素的某个属性
		语法: 元素.removeAttribute('要移除的属性名')

			oBox.removeAttribute('b')

DOM相关操作

cookie 与 storage 的区别

DOM相关

操作元素的步骤

元素属性的设置