-
cookie 与 storage 的区别?
* * 出现时间 * cookie: 有 JS 的时候就有了 * storage: 有 H5 以后才有的 * * 存储大小 * cookie: 4kb * storage: 20MB * * 前后端交互(前端向后端发送请求) * cookie: 交互时请求默认携带 cookie * storage: 交互式请求不会携带, 除非前端人员配置传递 * * 前后端操作 * cookie: 不管前后端语言都可以操作 * storage: 只能有前端语言来操作 (JS) * * 过期时间: * cookie: 默认会话级, 页面关闭, 存储消失; 可以通过手动配置 * storage: 不能通过手动配置 * * 2. localStorage 与 sessionStorage 的区别? * * 过期时间: * localStorage: 永久存储, 除非手动清理 * sessionStorage: 会话级别, 关闭页面, 存储就失效
获取非常规DOM
<div>
<p>hhhh <span>yyyyy</span></p>
</div>
<script>
// 1. 获取非常规 DOM(HTML head body)
// 1.1 HTML语法: document.documentElement
var htmlEle = document.documentElement
// console.log(htmlEle)
// 1.2 head 语法: document.head
var headEle = document.head
// console.log(headEle)
// 1.3 body 语法: document.body
var bodyEle = document.body
console.log(bodyEle)
获取常规语法DOM
<div class="box" id="box2">我是具有 class 的box2</div>
<div class="box">我是具有 class 的box1</div>
<p>我是一个P标签</p>
<div class="box">我是具有 class 的box3</div>
<script>
/**
* JS 在获取常规元素时与 CSS 一样, 可以通过 类名, 标签名, ID名
*/
// 1.1 通过 类名 去获取 标签
var oBox = document.getElementsByClassName('box')
// console.log(oBox)
/**
* 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: 获取到满足条件的 所有标签
*/
07_innerHTML与innerText
我是 DIV 的文本
<p>
我是 P 的文本
<span>
我是 SPAN 的文本
</span>
</p>
<div>
我是内部 DIV 的文本
</div>
</div>
<script>
// 获取页面的 DIV 标签
var oDiv = document.querySelector('div') // 获取满足条件的第一个标签 条件: div
// console.log(oDiv)
// 获取属性
/**
* innerHTML
* 获取到标签内部的文本与 HTML 结构
* innerText
* 只会获取到 页面结构的文本内容, HTML结构会被忽略掉
*/
// console.log(oDiv.innerHTML)
// console.log('====================')
// console.log(oDiv.innerText)
// 操作元素的属性
/**
* innerHTML
* 赋值时 会识别 字符串中的 html结构
* 如果有实际的标签, 会把它当成标签渲染到页面上
* innerText
* 赋值时 不会识别 字符串中的 html 结构
* 如果有实际的标签, 会把它当成 字符串 渲染到页面上
*/
// oDiv.innerHTML = '1234567890'
oDiv.innerHTML = '<div>12345678555590<div>'
// oDiv.innerText = '1234567890'
// oDiv.innerText = '<div>1234567890<div>'
元素属性
<div class="box" a="100" b="200">我是一个具有很多属性的 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', 'qwer')
oBox.setAttribute('b', 'asdf')
oBox.setAttribute('qqq', 'qqqq123123')
console.log(oBox.getAttribute('a'))
// 4. 移出元素的某个属性
// 语法: 元素.removeAttribute('要移除的属性名')
oBox.removeAttribute('b')
H5自定义属性
<div qq="123" data-cs="123456789">H5新增自定义属性</div>
<script>
/**
* data-cs="123456789"
* H5 自定义属性中 data- 是固定的
* cs 是我实际的 属性名
* "123456789" 是我实际的 属性值
*/
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
