获取标签对象的方法

135 阅读2分钟

1.cookie与storage 的区别

(1)出现时间:

coookie:有JS的时候就有了

storage:有H5以后才有的

(2)存储大小:

cookie:4KB

storage:20MB

(3)前后端交互:

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

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

(4)前后端操作:

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

storage:只能有前端语言来操作

(5)过期时间:

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

storage:不能通过手动配置

localStorage 与 sessionStorage 的区别?

过期时间:

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

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

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

3.1获取常规DOM方法:

3.1.1通过类名获取标签:

document.getElementsByClassName(' ')

3.1.2通过标签名获取标签:

document.getElementsByTagName(' ')

3.1.3通过id名获取标签:

document.getElementById(' ')

3.2获取非常规DOM(html head body)

3.2.1获取html语法:document.documentElement

3.2.2获取head语法:document.head

3.2.3获取body语法:document.body

3.3按照选择器的形式获取标签满足条件的第一个

document.querySelector(' ')

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

document.querySelectorAll(' ')

3.获取设置移出元素属性的方法(getAttribute, setAttribute, removeAttribute)

4.1获取元素的某些属性:

元素.getAttribute('要查询的属性名')

4.2设置元素的某些属性:

元素.setAttribute('要设置的属性名','要设置的属性值')

4.3移出元素的某个属性:

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

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

5.1获取语法:元素.dataset.属性名

5.2设置语法:元素.dataset.属性名=' '

如果属性名存在做的是修改操作;如果属性名不存在做的是新增操作;

5.3删除语法:delete 元素.dataset.属性名

5.innerHTML 与 innerText

 innerHTML

获取到标签内部的文本与 HTML 结构;赋值时会识别字符串中html结构

innerText

只会获取到 页面结构的文本内容, HTML结构会被忽略掉;赋值时不会识别字符串中html结构