当前位置: 首页 > article >正文

JavaScript--WebAPI查缺补漏

文章目录

    • 1、web APIs
      • 1.作用
      • 2.DOM简介
      • 3. document 对象
      • 4.利用css选择器来获取DOM元素
      • 5.选择指定css选择器的所有元素
    • 2、操作元素内容
      • 1.innerText
      • 2.innerHTML
      • 3.操作类名(className) 操作CSS
      • 4.通过 classList 操作类控制CSS
      • 5.==自定义属性(重要)==
      • 6.定时器-间隔函数


提示:以下是本篇文章正文内容,下面案例可供参考

1、web APIs

1.作用

JavaScript 去操作页面文档和浏览器

2.DOM简介

DOM(Document Object Model——文档对象模型)

**作用:**DOM用来 操作网页文档,开发网页特效和实现用户交互

DOM的核心思想就是把网页内容当做对象来处理,通过对象的属性和方法对网页内容操作

3. document 对象

是 DOM 里提供的一个对象,是DOM顶级对象

作为网页内容的入口

所以它提供的属性和方法都是用来访问和操作网页内容的

例:document.write()

4.利用css选择器来获取DOM元素

// 利用css选择器来获取DOM元素
// 1. document.querySelector() 选择指定css选择器的第一个元素
// 1.1 参数是字符串的css选择器
const box = document.querySelector('div')
console.log(box)

// 1.2 返回值是dom对象
console.log(typeof box)  // object
console.dir(box)

const box = document.querySelector('.box')
console.log(box)

const li = document.querySelector('ol li')
console.log(li)   // 只选择满足条件的第一个元素li

const li = document.querySelector('ol li:nth-child(2)')
console.log(li)   // 选择第2个小li

// 1.3 如果获取不到则返回 null
const p = document.querySelector('p')
console.log(p)  // null

5.选择指定css选择器的所有元素

// 2. document.querySelectorAll() 选择指定css选择器的所有元素
// 2.1 参数还是字符串的css选择器
const lis = document.querySelectorAll('.nav li')

// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
console.log(lis)

// 2.3 伪数组
// (1) 有长度和索引号
// (2) 没有数组的一些常用方法 比如 push  pop  splice等方法
// lis.push(1)
// console.log(lis)  // 因为lis是伪数组无法使用push方法所以报错

// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
for (let i = 0; i < lis.length; i++) {
  console.log(lis[i]) // 里面的每一个元素对象
}

// 2.5 即使只有1个元素,我们querySelectorAll 获得的也是一个伪数组,里面只有1个元素而已

const boxs = document.querySelectorAll('.box')
console.log(boxs)

2、操作元素内容

DOM对象可以操作页面标签,所以本质上就是操作DOM对象(增删改查)

如果想要操作标签元素的内容,则可以使用如下2种方式:

1.对象.innerText 属性

2.对象.innerHTML 属性

1.innerText

innerText 将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析。

<script>
  // 操作DOM元素内容
  // 1. 对象.innerText 增删改查
  // 1.1 查
  console.log(box.innerText)  // 古丽扎娜
  // 1.2 改
  box.innerText = '迪丽热巴'
  // 1.3 增
  const box1 = document.querySelector('.box1')
  console.log(box1)
  box1.innerText = '佟丽丫丫'
  // 1.4 删  给空字符串可以删除内容
  box.innerText = ''
  box1.innerText = ''
</script>

2.innerHTML

innerHTML 将文本内容添加/更新到任意标签位置,文本中包含的标签会被解析。

<script>
  // 2. 对象.innerHTML  会解析标签
  box.innerHTML = '<strong>迪丽热巴</strong>'
</script>

3.操作类名(className) 操作CSS

如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式

**核心:**把多个样式放到css一个类中,然后把这个类添加到这个元素身上

<script>
  // 通过类名操作元素样式
  // 1. 获取box盒子
  const box = document.querySelector('.box')
  // 2. 利用类名操作元素样式
  // box.className = 'circle'
  box.className = 'box circle'
  // 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名
</script>

注意:

1.由于class是关键字, 所以使用className去代替

2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

4.通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名

<script>
  // 1. 获取box盒子
  const box = document.querySelector('.box')
  // 2.通过classList操作元素样式(推荐)
  // 2.1 追加类名
  // box.classList.add('circle')
  // 2.2 删除类名
  // box.classList.remove('box')
  // 2.3 切换类名: 如果元素身上有这个类名,那么就删除,如果没有这个类名则添加
  box.classList.toggle('circle')
</script>

5.自定义属性(重要)

标准属性: 标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如:对象.title

自定义属性:

  • 在html5中推出来了专门的data-自定义属性
  • 使用场景:通过自定义属性可以存储数据,后期可以使用这个数据
  • 在标签上一律以data-开头
  • 在DOM对象上一律以dataset对象方式获取
<script>
  // 自定义属性
  // 1. 获取盒子
  const box = document.querySelector('.box')

  // 2. 得到自定义属性值
  // console.log(box.dataset)  // 得到一个对象集合
  // console.log(box.dataset.id) // 1
  // console.log(box.dataset)  // 得到一个对象集合
  // eg:<div id="myDiv" data-user-id="12345" data-user-name="JohnDoe" data-role="admin"></div>
  console.log(box.dataset.userName) // box
</script>

6.定时器-间隔函数

setInterval 是 JavaScript 中内置的函数,它的作用是间隔固定的时间自动重复执行另一个函数,也叫定时器函数。
开启定时器:

<script>
  setInterval(function () {
    console.log('我是1秒钟执行一次')
  }, 1000)
</script>

关闭定时器

<script>
  let timer = setInterval(repeat, 1000)  // 注意调用的时候直接写函数名字不需要写小括号
  console.log(timer) //  1
  let timer1 = setInterval(repeat, 1000)  // 注意调用的时候直接写函数名字不需要写小括号
  console.log(timer1) //  2
  // 2. 关闭定时器
  clearInterval(timer)

</script>


http://www.kler.cn/a/450279.html

相关文章:

  • “檢測到不安全的代理”怎麼修復?
  • Windows 11 安装 Dify 完整指南 非docker环境
  • 四种自动化测试模型实例及优缺点详解
  • 数据结构---------二叉树前序遍历中序遍历后序遍历
  • Zabbix6.0升级为7.2
  • 制造研发企业与IPD管理体系
  • 绿盟CSSP靶场-挂载虚拟化磁盘
  • Android Bootable Recovery 中的 `freecache.cpp` 文件详解
  • Java成长之路(一)--SpringBoot基础学习--SpringBoot代码测试
  • iDP3复现代码数据预处理全流程(二)——vis_dataset.py
  • 解决“SVN无法上传或下载*.so、*.a等二进制文件“问题
  • 汽车经销商门店管理新趋势:信息化工具助力精益运营
  • 网安入门|前端基础之Html_css基础
  • idea2024创建JavaWeb项目以及配置Tomcat详解
  • 水利水电安全员考试题库及答案
  • 捋一捋相关性运算,以及DTD和NLP中的应用
  • 【超详细实操内容】django的身份验证系统之权限与权限管理
  • 【漏洞复现】CVE-2021-45788 SQL Injection
  • Ansible 批量管理华为 CE 交换机
  • 高性能卡尺找圆工具
  • http反向代理
  • ubuntu22.04安装PaddleX3
  • PyCharm专业版安装和学生认证教程
  • 没想到互联网大厂都喜欢问MySQL中的数据类型?
  • 《开启微服务之旅:Spring Boot Web开发》(三)
  • Nginx与Tomcat之间的关系