API的基本认知,获取DOM对象和操作元素内容和属性

Web-API基本认知

API的作用与分类

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

分类; DOM(文档对象模型), BOM(浏览器对象模型)

JavaScript分两大类 ECMAscript 与 Web-API

Web-API又分DOM(页面文档对象模型)和BOM(浏览器对象模型)

什么是DOM

1. DOM 就是文档对象模型 ,是用来呈现以及与任意HTML或者XML文档交互的api (操作网页内容)
2. 简单说就是浏览器提供的一套专门操作网页内容的功能
3. DOM的作用:开发网页内容特性和实现用户交互

DOM树

DOM树是什么

DOM就是将html文档以树状的结果直观的表现出来,称之为文档树或DOM树

作用: 直观的体现标签与标签之间的关系

如图:

DOM对象

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

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

DOM的核心思想

把网页内容当成对象出来

document对象

1. document是DOM里提供的一个对象
2. 它提供的属性和方法都是用来访问和操作网页内容的
3. 网页所有的内容都在document里面
   如图:

获取DOM元素

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

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

语法:

document.querySelector('CSS选择器')

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

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

​ 没有匹配如果到,就返回null

1.2 选择匹配多个元素

​ 语法:

document.querySelectorAll('CSS选择器')

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

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

返回的是一个伪数组: 有长度索引号,

但是没有pop( ), push( )等方法,想要得到里面的每一个对象,则要遍历的方式获得

哪怕只有一个元素,通过querySelectorAll()获取过来也是一个伪数组,里面只有一个元素

1.3.其他获取DOM元素的方法

document.getElementByID( )

根据id获取一个元素

document.getElementsByTagName( )

根据标签获取一类元素,获取页面使有的div

document.getElementsByClassName( )

根据类名获取元素,获取页面所有类名一样的

2.修改DOM元素的内容

1. 元素.innerText属性
   1.1 将文本内容添加/更新到任意标签位置
   1.2 文本包含的html标签不会被解析

2. 元素.innerHTML属性
   1.1 将文本内容添加/更新到任意标签位置
   1.2 文本包含的标签会被解析

3. document.write( )
   ​ 1.1 只能将内容追加到前面的位置
   ​ 1.2 文本包含的标签会被解析

修改DOM元素属性

通过js修改标签的元素的常见属性

比如: href, title, src

语法: 对象.属性 = 值

<img src="./images.1JPG">
// 获取元素
let pic = document.querySelector('img')
//操作元素
pic.src = './images/2.JPG'
pic = title = '这是一张图片'

修改DOM元素样式属性

通过js修改标签的元素的样式属性

比如: 轮播图小圆点,点击按钮滚动图片

1.通过style属性操作CSS

语法: 对象.style.样式属性 = 值

<div> </div>
//获取元素
let box = document.querySelector('.box')
//修改背景颜色
box.style.backgroundColor = 'red'
box.style.width = '300px'
box.style.marginTop = '20px'

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

如果修改样式较多,通过style属性修改较繁琐,可以通过CSS类名形式修改

语法: 元素.className = ‘active’

注意: class是关键字,所以使用className替换

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

3.通过classList操作类控制Css

为解决classList覆盖以前类名,可以通过classList方式追加和删除类名

语法:

# 追加一个类
元素,classList.add('类名')
# 删除一个类
元素,classList.remove('类名')
# 切换一个类
元素,classList.toggle('类名')

修改表单属性

表单也需要修改属性 比如: 点击眼镜,课堂看到密码,本质是把表单类型转换为文本框

语法:

1. 获取: DOM对象.属性名
2. 设置: DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

表单中添加有效果,移除没有效果,一律使用布尔值表示,如果为true表示添加了该属性,false代表移除了该属性

disabled 禁用/启用按钮

元素.disabled = false // 可以用 负负得正
元素.disabled = true // 不可用

checked 勾选/不勾选

元素.checked  = false // 不勾选
元素.checked  = true // 勾选