cookie与storage，获取DOM及属性，H5自定义属性

binbinXu
88 阅读2分钟
  1. cookie与storage 的区别

    出现时间： cookie：有js的时候就有了；

    storage：有H5以后才有的；

    存储大小： cookie：4kb；

    storage：20MB左右；

    前后端交互：

    cookie：交互时默认携带cookie内存储的信息；

    storage：交互时请求不会携带，除非前端人员配置传递；

    前后端操作： cookie：不管前端后端都可以操作；

    storage：只有前端语言来操作；

    过期时间： cookie：默认会话级，页面关闭则存储消失；可以通过手动配置；

    storage：不能通过手动配置；

    （补充说明：localStorage与sessionStorage的区别在于过期时间，localStorage中永久存储，除非手动清除，sessionStorage在会话级别，关闭页面存储失效）

  2. 获取常规与非常规 DOM 的方法

    获取常规DOM方法：

    通过类名获取：document.getElementsByClassName('类名')；得到一个伪数组。（伪数组：有下标有length，没有数组的常用方法）。

    var oBox = document.getElementsByClassName('box')

    通过标签名获取：document.getElementsByTagName('标签名称')；得到一个伪数组。

    var oDiv = document.getElementsByTagName('div')

    通过ID名获取：document.getElementById('id名称')；得到一个标签（id具有唯一性）。

    var oBox2 = document.getElementById('box2')

    按照选择器形式获取满足条件的标签：

    1），document.querySelector('选择器')；获取满足条件的第一个元素。

    2），document.querySelectorAll('选择器')；获取满足条件的所有元素，得到一个数组。

    var myDiv = document.querySelector('.box')//按照选择器的形式 获取标签满足条件的第一个;
var myDivAll = document.querySelectorAll('.box')//按照选择器的形式 后去所有满足条件的标签;

    获取非常规DOM方法：

    获取HTML：document.documentElement。

    获取head：document.head。

    获取body：document.body。

    //  获取非常规 DOM(HTML  head body)
var htmlEle = document.documentElement;
var headEle = document.head;
var bodyEle = document.body;
  3. 获取设置移出元素属性的方法(getAttribute, setAttribute, removeAttribute)

    获取元素的属性：元素.getAttribute('要查询的属性名')；

    修改元素的属性：元素.setAttribute('要设置的属性名'，'要设置的属性值')；如果设置的属性没有，则新增。

    移除元素的属性：元素.removeAttribute('要移除的属性名')；

  4. H5 自定义属性的获取设置与删除

    H5 自定义属性中 data- 是固定的，后面跟属性名，例：data-cs = "123"，123是属性值。

    获取：元素.dataset.属性名。

    设置：元素.dataset.属性名 = '修改的内容'；标签中有就修改，没有就新增。

    删除：delete 元素.dataset.属性名。

    <div qq="123" data-cs="123456789">H5新增自定义属性</div>
var oDiv = document.querySelector('div');
console.log(oDiv.dataset.cs);//获取、查询
oDiv.dataset.cs = 'qwertyuiop';//设置
delete oDiv.dataset.age;//删除
  5. innerHTML 与 innerText

    获取元素：

    innerHTML：获取到标签内部的文本何HTML结构。

    innerText：只会获取页面结构的文本内容，HTML结构会被忽略。

    操作元素属性： innerHTML：赋值时会识别字符串中的html结构，有实际标签效果会渲染到页面上。

    innerText：赋值时不会识别字符串中的html结构，有实际标签也当作字符串渲染。

作者留： 本猪学识不多，单纯分享，不喜勿喷，欢迎指点！

avatar
文章
阅读
粉丝