巴中网站开发网页设计教程
html的标签被js获取到之后就变成了js对象，对象里面包含了标签的属性和方法 。同一时间获取多个对象则会翻译一个数组，数组元素是对象
获取方法
1. const a = document.getElementById("id")，根据标签的id来获取。因为id是唯一的、不可重复的，所以获取到的对象只有一个。
2.const td = document.getElementsByClassName('classname')，根据标签的class获取，由于class没有要求不能重名。所以获取到的对象都会存储到HTMLCollection中，这个有点类似于数组，可以通过下标访问
3.const td = document.getElementsByTagName('标签名')，获取指定标签，返回值和2一样
4.const a = document.querySelector('css选择器')，根据css选择器的方法获取对应的对象。默认返回第一个符合条件的对象。
5.const a = document.querySelectorAll('css选择器')，返回所有符合的对象。
| 选择器种类 | 书写方法 | 注意事项 | 选择规则 |
| 元素选择器 | 标签名 | 直接写标签名即可 | 选择所有对应的标签 |
| 类选择器 | .类名 | 点加类名 | 选择运用这个类的标签 |
| id选择器 | #id | 井号加id（id唯一且由用户自行输入 | 选择id是我们所需要的标签 |
| 通配符选择器 | * | 星号 | 选择所有元素 |
| 后代选择器 | 父标签 子标签 | 父标签与子标签空格隔开 | 选择父标签的子标签 |
操作元素内容
获取到DOM对象之后我们就可以对他进行一些操作。
const a = document.getElementById('nihao')//假设通过这个获取到一个id为nihao的DOM对象
1.a.innerText --- 对象里面的一个属性，获取的是该HTML元素内所有的文字，不包括HTML标签。可以通过它修改数据。
2.a.innerHTML --- 对象里的一个属性，获取的是改HTML元素内所有的文字包括HTML标签。也可以修改，并且会自动识别HTML标签内容并渲染到页面。
如图所示
操作元素属性
1.更改src路径
const img = document.querySelector("img")img.src = "img/屏幕截图 2025-01-04 220938.png"获取一个img对象，通过.src来替换这个图片
2.更改图片宽高
img.height = 4000img.width = 80更改为指定的宽高，也可以之更改其中之一。
3.鼠标悬停提示
img.title = "tishi"当鼠标停止在图片上时会提示 --- tishi
操作样式属性
获取一个div对象，我们可以修改div对象的所有属性。包括但不限于长宽高背景颜色等等等等
const div = document.querySelector('#example');获取一个id是example的div对象。
修改宽高
div.style.width = '500px'div.style.height = '500px'修改div的宽高，为什么不直接使用div.width来修改呢？div.width返回的是实际宽度。并不能修改
修改背景颜色
div.style.backgroundColor = "red";在HTML中修改背景颜色应该是 background - clolr ，但是在js里面我们要把它改成小驼峰命名法：backgroundColor。也就是说如果在HTML里面有用‘-’连接的单词在js里面都需要改为小驼峰命名法，不然这个‘-’会被识别为减号。导致错误
修改页面背景色和背景图
document.body.style.backgroundColor = "yellow"document.body.style.backgroundImage="url('img/屏幕截图 2024-08-19 081458.png')"因为body是唯一的，所以直接使用就可以。同样的小驼峰命名法，在设置背景图的时候我们要用以下格式："url('图片路径')"
将已有的class套用到HTML元素中
className
假设我有一个class a。我想把它运用到某个元素上面（table，div......）
首先我们需要先获取到这个元素
const div = document.querySelector("div")
div.className = "???"然后更改它的className就可以实现class套用了，原本又有一个class则会覆盖原来的className
classList
如果不想覆盖原有的class，我们可以通过另一个方法来添加类。
const div = document.querySelector("div")获取对象之后，假设此时的div已经有一个class m，我想再把class a追加到div上就可以通过classList.add来追加一个类
div.calssList.add(".a")此时，div同时拥有a和m两个类，如果有重合的样式，则后添加的覆盖原有的。
如果想删除已有的class，可以通过classList.remove(".a") 删除类a
切换类，如果类存在就删除类，如果类不存在就运用类
div.classList.toggle("b")，如果div已经运用类b就取消运用，如果没运用则运用类b。