JavaScript 获取DOM对象

原创于 2025-01-05 12:32:56 发布

· 905 阅读

版权

文章标签：

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

获取到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 = 4000
  img.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 a。我想把它运用到某个元素上面（table，div......）

首先我们需要先获取到这个元素

const div = document.querySelector("div")
div.className = "???"

然后更改它的className就可以实现class套用了，原本又有一个class则会覆盖原来的className

如果不想覆盖原有的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。