JavaScript 获取DOM对象

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选择器')，返回所有符合的对象。

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。