Web Apis第1章 初学者自编

释怀452
123 阅读4分钟

Snipaste_2024-12-18_15-22-02.png

  • WebApi是浏览器提供的一组接口
  • API: 应用程序接口（Application Programming Interface）
  • 接口： 本质上就是各种函数，无需关心内部如何实现，程序员只需要调用就可以很方便实现某些功能
  • 作用： 开发人员使用 JavaScript提供的接口来操作网页元素和浏览器

DOM用来 操作网页文档，开发网页特效和实现用户交互
DOM的核心思想就是把网页内容当做对象来处理，通过对象的属性和方法对网页内容操作

  • document对象是DOM顶级对象
  • document对象中提供的属性和方法都是用来访问和操作网页内容的 ，可以这样理解就是我们所属的页面就是整个document对象.通过document.方法可以修改对象里面各种元素
  • 想要操作页面元素，那我们需要先利用DOM方式来获取（选择）这个元素

如下四种获取DOM元素的方式。了解即可

document.getElementById() 获取ID属性的一个元素

document.getElementsByClassName() 获取Class属性的一组元素

document.getElementsByTagName() 获取HTML属性的一个标签 如：div获取div标签的元素 *获取所有的元素

document.getElementsByName() 获取所有具有指定 name 属性值的元素的方法；它返回一个 NodeList 对象，ameValue - 指定要查找的 name 属性的值

（重点） css选择器来获取DOM元素

选择器是类名加点. ；是id加# ；是name加[]

  • document.querySelector('css选择器')
  1. 只选择第一个元素对象
  2. 选择单个li标签如何操作，选中ul里css选择器
  • document.querySelectorAll('css选择器')选择多个元素对象
  • 返回值是 CSS选择器匹配的NodeList 伪数组
  • 哪怕满足条件的元素只有一个，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
  • li:first-child 选择器；li:last-child 选择器；li:nth-child（不是下标从1开始） 选择器
  • 使用document.querySelectorAll('css选择器')获取过来的是一个NodeList伪数组，只能通过循环遍历获取数据

操作元素标签元素内容

对象.innerText 属性作用：渲染文本内容到标签里面，不解析标签

对象.innerHTML 属性作用：渲染文本内容到标签里面，会解析标签 重点

操作元素常用属性 可以通过dom操作元素属性，比如通过src更换图片地址 最常见的属性比如：href,title,src等等 img标签src；传图片路径 img标签title；鼠标停留图片显示的文字 img标签alt；加载失败网络不好导致图片没加载显示的文字给用户看 a标签href;将链接默认传递给url 能通过属性名修改 如下图：

  // 1. 先获取这个元素
  const img = document.querySelector('img')
  // 2. 操作DOM元素常见属性
  // 2.1 查
  console.log(img.src)
  // 2.2 改
  img.src = './images/3.png'
  // 2.3 增
  img.title = '我是播仔，我是不是很可爱'
  // 2.4 删
  img.alt = ''
</script>

获取这个元素后面直接点.出属性就行

获取的dom元素通过 style 属性操作样式 如果有-的样式，我们采取的是小驼峰命名法比如 fontSize

注意：className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名；不保留类名，会覆盖掉

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

  1. 对象.classLis.add((不要加.或#)类名)增加类名
  2. 对象.classLis.remove((不要加.或#)类名)删除类名
  3. 对象.classLis.toggle((不要加.或#)类名)切换类名：如果元素身上有这个类名，那么就删除，如果没有这个类名则添加

表单元素 input

  • value: 设置或获取输入框的值。
  • type: 定义输入框的类型，影响其外观和行为。
  • disabled：禁用输入框，使其不可用。
  • checked：设置或检查复选框和单选按钮的选中状态。选中返回为ture，离开返回false。
  • placeholder:显示文本框提示语

input标签自带属性

  • 如：class、id、title，type,value,placeholder

自定义属性

  • data-index ；data-oldname
  • 在标签上一律以data-开头
  • 在DOM对象上一律以.dataset对象方式获取
  • 注意：dataset里面的属性全部是小写

定时器函数

  • setInterval(函数，间隔时间)

  • 具名函数写法

  • function 函数名(){}
    let 变量 = setInterval(函数名,间隔时间)

  • 匿名函数写法 let 变量 = setInterval（function{},间隔时间）

  • ！！注意：在定时器里放函数名不用加括号和调用不一样不要加括号！

关闭定时器

  • 注意：关闭定时器需要给定时器定义变量，用变量名来关闭
  • 用法 clearInterval(变量名)
avatar
文章
阅读
粉丝