当前位置：首页 > news >正文

dom基本操作

news 2025/9/13 5:15:31

1、style修改样式

基本语法：
元素.style.样式=’值‘

注意:
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
4.后面的值必须是字符串

<div></div>
// 1、获取元素
const div=document.querySelector('div');
// 2、通过style操作css
div.style.height='300px';
div.style.width='200px';
// 属性有-连接符，需要转换为小驼峰命名法
div.style.backgroundColor='rgba(249, 69, 69, 0.5)';

2、className通过修改类名改样式

className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
他会覆盖之前的类名

<style>.nav{width: 300px;height: 300px;background-color: pink;border: 5px solid green;}.box{width: 200px;height: 200px;background-color: red;}
</style>
<div class="nav"></div><script>// 1、获取元素let div=document.querySelector('div');// 2、修改类名 不用加点，因为是类名 自动加点// className会覆盖前面的类名，需要写多个类名div.className='nav box';</script>

在这里插入图片描述

3、通过classList控制css

为了解决className容易覆盖以前的类名，我们可以通过classList方式
追加和删除类名
追加一个类
元素.classList.add(‘类名’)
删除一个类
元素.classList.remove(‘类名’)
切换一个类
元素.classList.toggle(‘类名’)

<style>.one {width: 200px;height: 200px;background-color: pink;}.two {border: 10px solid yellowgreen;}
</style><div class="one"></div>
<script>const div = document.querySelector('div');// 追加一个类div.classList.add('two');// 删除一个类div.classList.remove('two');// 切换一个类   有就删掉，没有就加上// 此时，类two已经被删除 div.classList.toggle('two');
</script>

在这里插入图片描述

4、trim()去除字符串两侧的空格

<script>const str='         khfgdjh        ';console.log(str);//         khfgdjh        console.log(str.trim());//khfgdjhconst a='            ';console.log(a.trim());
</script>

在这里插入图片描述

5、自定义属性

标准属性: 标签天生自带的属性比如class id title等,
可以直接使用点语法操作比如: disabled、checked、selected

自定义属性:
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset.对象方式获取

<div class="box" data-id="1" data-info="这只是一个普通的盒子">盒子</div>
<script>const box=document.querySelector('.box');// 输出自定义属性console.log(box.dataset.id);console.log(box.dataset.info);// 增加自定义属性box.dataset.name='lxl';console.log(box.dataset.name);
</script>

在这里插入图片描述

6、定时器-间歇函数

目标:能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器

1.开启定时器
setInterval(函数，间隔时间)
这个函数可以是匿名函数
作用:每隔一段时间调用这个函数，间隔时间单位是毫秒

注意:
1.函数名字不需要加括号
2.定时器返回的是一个id数字

setInterval(function () {document.write('我是半秒钟打印一次</br>'); },500)

7、环境对象this

环境对象this是什么?
它代表着当前函数运行时所处的环境
this指向的粗略规则：
谁调用，this就指向谁

// 每个函数里面 都有this
function fn() {// 普通函数里面this指向的是windowconsole.log(this);console.log(typeof this);//object 是一个对象
}
window.fn()

在这里插入图片描述

<button>点击</button>
。。。。。。。。。
// 点击按钮
const btn = document.querySelector('button');
// 下面的这个function也是回调函数
btn.addEventListener('click', function () {// this指向这个btn按钮// 谁调用，this就指向谁console.log(this);//<button>点击</button>// this就等于btn。在这个例子中btn.style.color='red';this.style.color='blue';
})

在这里插入图片描述

8、回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A为回调函数

// 函数fn作为参数，传递给setInterval
function fn() {console.log('我是回调函数');
};
setInterval(fn,1000);

在这里插入图片描述

     const btn = document.querySelector('button');// 下面的这个function也是回调函数btn.addEventListener('click', function () {// this指向这个btn按钮// 谁调用，this就指向谁console.log(this);//<button>点击</button>
})