APIS-获取和操作DOM元素

星星该睡觉啦

于 2024-09-27 14:50:04 发布

阅读量542

点赞数 14

文章标签： javascript 前端

本文链接：https://blog.csdn.net/TwTei/article/details/142593475

版权

获取DOM元素

查找元素DOM元素就是利用J5 选择页面中标签元素

学习路径:

根据CSS选择器来获取DOM元素(重点)
其他获取DOM元素方法(了解)

<body>
<div class="box">123</div>
<div class="box">abc</div>  //获取不到
<ul>
 <li>测试</li>
 <li>测试</li> 
 <li>测试</li>
    </ul>
<script>
    //11.获取匹配的第一个元素
    const box = document.querySelector('div')//一定要加单引号，不然就是变量了
 const box = document.querySelector('.box')//第二种方式
    console.log(box)
// 我要获取第一个小 ul li
const li = document.querySelector('ul li:first-child')
console.log(li)
</script>
</body>

2.选择匹配的多个元素

语法:

document.querySelectorA1l('css选择器')

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

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

document.querySelectorAll('ul li')

注意：querySelector可以直接修改，querySelectorA1l不能直接修改，要通过遍历

document.querySelectorA1l('css选择器')

得到的是一个伪数组：

有长度有索引号的数组
但是没有 pop()push()等数组方法

想要得到里面的每一个对象，则需要遍历(for)的方式获得。

//1.获取元素
const lis = document.querySelectorAll('.nav li')
// console.log(lis)
for(let i=0;i< lis.length; i++){
console.log(lis[i])// 每一个小li对象
}

操作元素内容

目标:能够修改元素的文本更换内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式:
学习路径:

对象.innerText属性

<div class="box">我是文字的内容</div>
//1.获取元素
const box = document.querySelector('.box')
//2.修改文字内容 对象.innerText 属性
console.log(box.innerText)//获取文字内容
box.innerText='我是一个盒子' //修改文字内容
box.innerText='<strong>我是一个盒子</strong>' // 不解析文字内容

2.对象.innerHTML属性（解析文字内容）

//3.innerHTML 解析标签
console.log(box.innerHTML)
// box.innerHTML='我要更换'
box.innerHTML ='<strong>我要更换</strong>

操作元素属性

1.操作元素常用属性

还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片
最常见的属性比如:href、title、src等

语法: 对象.属性 = 值举例说明:

//1.获取元素
const pic = document.querySelector('img')
// 2.操作元素
pic.src ='./images/b02.jpg'
pic.title ='刘德华黑马演唱会'

<body>
<img src="./images/1.webp" alt="">
<script>
//1.获取图片元素
const img = document.querySelector('img')
//2.修改图片对象的属性 对象.属性=值
img.src='./images/2.webp'
img.title ='pink老师的艺术照'
</script>
</body>

例题：获取随机图片

<body>
<img src="./images/1.webp" alt="">
<script>
//取到N~M 的随机整数
function getRandom(N,M){
return Math.floor(Math.random()*(M-N+1))+ N
}
//1.获取图片对象
const img = document.querySelector('img')
//2.随机得到序号
const random=getRandom(1,6)
// 3.更换路径
img.src=`./images/${random}.webp`
    </script>
</body>

2.操作元素样式属性style

<style>
.box{
width: 200px;
height:200px;
background-color:■pink;
  }
</style>
</head>

<body>
<div class="box"></div>
<script>
//1.获取元素
const box = document.querySelector('.box')
//12.修改样式属性 对象.style.样式属性 ='值'  别忘了加单位
box.style.width='300px' //一定是字符串形式+''
//多组单词的采取 小驼峰命名法
box.style.backgroundcolor ='hotpink'
box.style.border ='2px solid blue'
box.style.borderTop = '2px solid red'
</script>
</body>

3.操作元素样式属性className

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
语法:
```
// active 是一个css类名
元素.className='active'
//要用到两个盒子的话
div.className = 'nav box'
```
注意: 由于class是关键字，所以使用className去代替

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

4.通过 classList 操作类控制CSS(重点用这个)

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

语法:

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

// 通过classList添加
//1.获取元素
const box= document.querySelector('.box')
//2.修改样式
// 2.1 追加类 add() 类名不加点，并且是字符串
box.classList.add('active')
//2.2删除类 remove()类名不加点，并且是字符串
box.classList.remove('box')
//2.3切换类 toggle()有还是没有啊,有就删掉，没有就加上
box.classList.toggle('active')

操作表单元素属性

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

表单.value ='用户名'

表单.type ='password'

<body>
<input type="text" value="电脑"><script>
//1获取元素
const uname =document.querySelector('input')
//2.获取值获取表单里面的值用的表单.value
console.log(uname.value)  // 电脑
// 3.设置表单的值
1uname.value='我要买电脑'
console.log(uname.type)
//设置看不见的密码
uname.type ='password'
</script>
</body>

2.让复选框全选中

<input type="checkbox" name=" " id="">
//1.获取
const ipt = document.querySelector('input')
// console.log(ipt.checked)// false 只接受布尔值 
ipt.checked = true
//ipt.checked='true'  // 会选中，不提倡 有隐式转换

自定义属性

<body>
<div data-id="1" data-spm="不知道">1</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
const one=document.querySelector('div')
console.log(one.dataset.id)  //1 
console.log(one.dataset.spm) // 不知道
</script>
</body>

定时器-间歇函数

1.开启定时器

// setInterval(函数，间隔时间)
setInterval(function(){}，1000)

function fn(){console.log('一秒执行一次')
setInterval(fn, 1000)

2.关闭定时器

let 变量名 = setInterval(函数，间隔时间)
clearInterval(变植名)

星星该睡觉啦

关注

14
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫