本地存储区别 DOM

爆炸小丸子
261 阅读3分钟

一.本地存储的区别

1.cookie和storage的区别?

  • 出现时间

    cookie: 有js的时候就有了

    storage: 有H5以后才有的

  • 存储大小

    cookie: 4kb

    storage: 20MB

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

    cookie: 交互时请求默认携带cookie

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

  • 前后端操作

    cookie: 不管前后端语言都可以操作

    storage: 只能有前端语言操作(js)

  • 过期时间

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

    storage: 不能通过手动配置

2.localStorage与sessionStorage的区别?

  • 过期时间

    localStorage: 永久存储,除非手动清理

    sessionStorage: 会话级别,关闭页面,存储就失效

二.DOM

1.认识DOM

  • 对页面删除一个节点
  • 对页面增加一个节点
  • 对节点添加一个class类名
  • 删除某个节点的类名

2.获取非常规DOM

  • 获取非常规DOM(HTML head body)

  • 语法 :

    1. html语法: document.documentElement
    2. head语法: document.head
    3. body语法: document.body

3.获取常规DOM

  1. js在获取常规元素时与css一样,可以通过类名,标签名,ID名

    //1.1通过类名获取标签
var oBox = document..getElementsByClassName('box')
/*
oBox是一个伪数组,想要获取到某一个,可以通过下标
伪数组: 长得和数组类似,有下标有length,但是没有数组常用的方法
不管页面具有这个类名的元素有多少个,获取到的永远是伪数组的形式
​
*/
​
//1.2通过标签名获取标签
 var oDiv = document.getElementsByTagName('div')
  // console.log(oDiv)
  // console.log(oDiv[0])
  // oDiv也是一个伪数组,想要获取到某一个元素,可以通过下标
  
 //1.3通过ID名获取标签
 var oBox2 = document.getElementById('box2')
 // console.log(oBox2)
 //因为ID通常都是独一无二的
 //所以这里获取到的就是一个具有box2 ID名的标签,而不是一个伪数组
 
 //2.1按照选择器的形式获取标签满足条件的第一个
 var myDiv = document.querySelector('.box')
 console.log(myDiv)
 //querySelector:获取到满足条件的第一个标签
 
 
 //2.2按照选择器形式后去所有满足条件的标签
 var myDivAll = document.querySelectorAll('.box')
 console.log(myDivAll)
 //querySelectorAll: 获取到满足条件所有标签

    3.innerHTML 与 innerText

    • 获取属性

    1. innerHTML获取标签内部的文本与HTML结构

    2. innerText只会获取到页面结构的文本内容,HTML结构会被忽略掉

    • 操作元素的属性

    1. nnerHTML

      • 赋值时会识别字符串中的html结构
      • 实际的标签,会把它当成字符串渲染到页面

    2. innerText

    赋值时不会识别字符串中的html结构

    实际标签,会把它当成字符串渲染到页面

    4.元素属性的获取设置与移出

    <body>
    <div class="box" a="asadgfs" b="SDGwr">我是div标签</div>
    <script>
        // 需求: 获取元素的某些属性
​
        // 1. 获取元素
        var oBox = document.getElementsByClassName('box')[0]
        console.log(oBox)
​
        // 2. 获取元素的某些属性
        // 语法: 元素.getAttribute('要查询的属性名')
        console.log(oBox.getAttribute('class'))
        console.log(oBox.getAttribute('a'))
        console.log(oBox.getAttribute('b'))
​
        // 新需求: 修改某些元素的某些属性
        
        // 3. 设置元素的某些属性
        // 语法: 元素.setAttribute('要设置的属性名', '要设置的属性值')
        oBox.setAttribute('a', 'dfhh')
        oBox.setAttribute('b', 'dfgafh')
        oBox.setAttribute('df', 'sdfs145')
        console.log(oBox.getAttribute('a'))
​
​
        // 4. 移出元素的某个属性
        // 语法: 元素.removeAttribute('要移除的属性名')
        oBox.removeAttribute('b')
    </script>
</body>

    5.H5自定义属性

​
    date-lh='1234'
     H5自定义属性中 data- 是固定的
     lh 是实际的属性名
     '1234'是实际的值
 
       var oDiv = document.querySelector('div')
        console.log(oDiv)
​
        // 获取 H5 自定义属性
        // 1. 获取语法: 元素.dataset.属性名
        console.log(oDiv.dataset.cs)
​
        // 2. 设置语法
        oDiv.dataset.cs = 'qwertyuiop'  // 标签中实际拥有; 做修改操作
        oDiv.dataset.age = 18           // 标签中实际没有; 做新增操作
​
        // 3. 删除
        delete oDiv.dataset.age
avatar
文章
阅读
粉丝