webAPI

2023-05-19 12:53| 来源: 网络整理| 查看: 265

1.webAPI的基本认识 1.1 作用和分类

作用：用js操作html和浏览器分类： API分为 DOM(文档对象模型) BOM(浏览器对象模型)

1.2 什么是DOM（Document object model）

用来呈现以及与任意html或xml文档交互的API 是浏览器提供的一套专门用来操作网页内容的功能

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

1.3 DOM树

直观地体现了标签与标签之间的关系

将html文档以树状结构直观的变现出来

1.4 DOM对象(浏览器根据html生成的js对象) 所有标签属性都可以在这个对象上找到修改这个对象的属性会自动映射到标签上

DOM的核心思想：把网页内容当做对象来处理

document对象是DOM里最大的对象

2.获取DOM元素 2.1 根据css选择器来获取DOM元素 1. 选择匹配的第一个元素 document.queryselector('css选择器')

其返回值为： css选择器匹配的第一个元素，一个htmlElement对象

2. 选择匹配多个元素（通过for遍历，可以得到每一个对象） document.queryselectorAll('css选择器')

其返回值为： css选择器匹配的nodelist对象集合

此对象集合为伪数组，没有pop()等这些方法

3.操作元素内容

方法： 1.对象.innerText （显示纯文本，不解析标签） 2.对象.innerHtml (可以识别标签)

4.操作元素属性 4.1 操作元素常用属性（如：href 、title 、 src）

语法：对象.属性 = 值

4.2 操作元素样式属性 1.通过style属性操作css

对象.style.样式属性 = 值

2.通过类名操作css（需要修改的属性很多时使用）

对象.className = ' 类名 '

会覆盖原有的类名，若想保留，使用：对象.calssName ='类名1 类名2'

3.通过classList操作类控制css（为了解决claaName会覆盖原类名的问题）

1.加: 对象.classList.add('类名') 2.删: 对象.classList.remove('类名') 3.转换(有则删，无则加): 对象.classList.toggle('类名')

4.3 操作表单元素属性获取表单的里面的值用value 对象.属性名（获取）对象.属性名 = 值（设置）例如：对象.value = ' ' 对象.type = 'password' (表单类型转为密码框)

checked disabled（true禁用） selected 只能设置布尔值例如：对象.checked = 'true' (为true选中)

4.4 自定义属性以data开头的以dataset 对象获取 5.定时器，间歇函数

1.开启定时器： setInerval(函数名，间隔时间)

直接写在里面的函数为匿名函数，调用的不用加括号时间单位为：ms (1s = 1000ms) 定时器返回的是一个ID数字

2.关闭定时器： clearInterval(变量名)

【本文地址】

今日新闻