最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

焦点播报:WebAPI_DAY1

来源：博客园

WebAPI

作用：使用JS去操作html和浏览器

分类：DOM（文档对象类型）、BOM（浏览器对象类型）


(相关资料图)

DOM（Document Object Model）

  • 浏览器提供的一套专门用来操作网页内容的功能
  • 开发网页特效、实现用户交互

DOM树

将html文档以树状结构表现出来，称为文档树或DOM树

作用：只管体现标签与标签之间的关系

DOM对象

浏览器根据html标签生成的JS对象（DOM对象）

  • 所有标签属性都可以在这个对象上找到
  • 修改这个对象的属性会自动映射倒标签身上

DOM核心思想

把网页内容当作对象来处理

Document对象

  • DOM里最大的对象
  • 网页的所有内容都在document里

获取DOM对象

根据CSS选择器来获取DOM元素

1、选择匹配的第一个元素

语法：

document.querySelector("css选择器")

参数：

  • 包含一个或多个有效的css选择器字符串

返回值：

  • css选择器匹配的第一个元素，一个HTMLElement对象
  • 如果没有匹配返回null

2、选择匹配的多个元素

语法：

document.querySelector("ul li")

返回值：

css选择器匹配的NodeList对象集合

如何修改

通过遍历的方式一次给里面的元素做修改（哪怕只有一个元素）

设置/修改DOM元素内容

1、document.write()

  • 只能将文本内容追加到前面的位置
  • 文本中包含的标签会被解析

2、元素innerText属性

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

3、元素innerHTML属性

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

设置/修改DOM元素属性

1、设置/修改常用属性

对象.属性 = 值

2、设置/修改样式属性

2.1、通过style
对象.style.样式属性 = 值
2.2、操作类名(className)操作CSS

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

元素.className ="active"

注意:

  • 由于class是关键字,所以使用className去代替
  • className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
2.3、通过classList 操作类控制CSS

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

// 追加一个类元素.classList.add("类名")//删除一个类元素.classList.remove("类名")//切换一个类（如果有就删去，如果没有就添加）元素.classList.toggle("类名")

3、定时器：间歇函数

场景：倒计时

目标：使用定时器函数重复执行代码

3.1、开启定时器
setInterval(函数,间隔时间)

作用：每隔一段时间调用这个函数，间隔时间单位是毫秒

3.2、关闭定时器
let 变量名 = setInterval(函数,间隔时间)clearInterval(变量名)

关键词： 间隔时间 网页内容 元素属性