js中getElementsByClassName和getElementsByTagName无法获取元素

最新推荐文章于 2024-04-26 16:47:03 发布

爱吃土豆的粉条

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.7k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Jclam/article/details/129394003

版权

【注意】!!!!!:

一、 getElementsByClassName和getElementsByTagName返回对象为数组，当不加[0]则获取不了元素，或者a[0].style.backgroundColor = "blue";

二、使用querySelector获取元素时需要注明元素为id以及类名，即“#”，“.” ，而getElementsByClassName之类则不需要

附完整代码：需求为通过按钮改变盒子颜色

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

.box1 {

width: 100px;

height: 100px;

border: 1px solid #000;

background-color: red;

}

</style>

</head>

<body>

<div class="box1"></div>

<button class="btn" οnclick="change()">点击</button>

<script>

// 方法一：

// 在标签内部添加 οnclick="change() 事件

// function change() {

// // const a = document.querySelector('.box1')

// const a = document.getElementsByClassName("box1")[0];

// a.style.backgroundColor = "blue";

// console.log(a);

// }

// 方法二：添加监听事件

// addEventListener() 方法用于向指定元素添加监听事件。

// 且同一元素目标可重复添加，不会覆盖之前相同事件，

// 配合 removeEventListener() 方法来移除事件。

const a = document.querySelector(".btn");

a.addEventListener('click', function () {

document.querySelector(".box1").style.backgroundColor = "yellow"

})

</script>

</body>

</html>