JS_APIs之WebApi基础认知-EW帮帮网

作用和分类

作用: 就是使用 JS 去操作 html和浏览器

分类:DOM(文档对象模型)、BOM(浏览器对象模型)

什么是DOM

DOM(Document Object Model--文档对象模型)是用来呈现以及与任意 HTML或 XML文档交互的API。

白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用：开发网页内容特效和实现用户交互

DOM树

DOM树是什么
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树

描述网页内容关系的名词

>作用:文档树直观的体现了标签与标签之间的关系

DOM对象(重要)

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

- 所有的标签属性都可以在这个对象上面找到

- 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

- 把网页内容当做对象来处理

document对象

- 是 DOM 里提供的一个对象

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

√例:document.write()

- 网页所有内容都在document里面

根据CSS选择器来获取DOM元素(重点)

1.选择匹配的第一个元素语法:

document.querySelector('css选择器')

参数:
包含一个或多个有效的CSS选择器字符串

返回值:
CSS选择器匹配的第一个元素,一个HTMLElement对象

2.选择匹配的多个元索
语法:

document.querySelectorA1l('css选择器')

参数:

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

返回值:
CSS选择器匹配的NodeList 对象集合

例如:

document.querySelectorA1l('ul li")

- 得到的是一个伪数组
- 有长度有索引号的数组
- 但是没有 pop()push()等数组方法

想要得到里面的每一个对象，则需要遍历(for)的方式获得。

其他获取DOM元素方法(了解)

// 根据id获取一个元素
document.getElementById('nav')
// 根据 标签获取一类元素 获联页面 所有div
document.getElementsByTagName('div')
// 根据类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')

操作元素内容

目标:能够修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式:
学习路径:
1.对象.innerText 属性

- 将文本内容添加/更新到任意标签位置

- 显示纯文本，不解析标签

2. 对象.innerHTML 属性

- 将文本内容添加/更新到任意标签位置

- 会解析标签，多标签建议使用模板字符

操作元素属性

操作元素常用属性
还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片

最常见的属性比如:href、title、src等

语法:

对象.属性 = 值

操作元素样式属性

还可以通过JS 设置/修改标签元索的样式属性

- 比如通过轮播图小图点自动更换颜色样式

- 点击按钮可以滚动图片，这是移动的图片的位置 left

学习路径:
1. 通过 style 属性操作CSS

语法:

对象.style.样式属性=值

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

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

语法:

// active 是一个css类名
元素.className ='active

注意:
- 由于class是关键字，所以使用className去代替

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

3.通过 classList 操作类控制CSS

// 3.通过 classList 操作类控制CSS
    // const box = document.querySelector(".box")// 2.修改样式
    // 追加类 add()类名不加点，并且是字符串
    // box.classList.add('active')
    //删除类 remove()类名不加点，并且是字符串
    // box.classList.remove('box')
    // 切换类 toggle() 有就删掉，没有就加上
    // box.classList.toggle('active')

自定义属性

标准属性:标签天生自带的属性比如classid title等,可以直接使用点语法操作比如: disabled、checked、selected

自定义属性:
- 在html5中推出来了专门的data-自定义属性
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取

定时器-间歇函数

定时器函数基本使用

目标:能够使用定时器函数重复执行代码定时器函数可以开启和关闭定时器
1.开启定时器

setInterval(函数，间隔时间)

作用:每隔一段时间调用这个函数

间隔时间单位是毫秒

注意:

1.函数名字不需要加括号

2.定时器返回的是一个id数字

2.关闭定时器

let 变量名= setInterval(函数，间隔时间)
clearInterval(变量名)

JS_APIs之WebApi基础认知