如果元素是 li 或者是按钮，如何签入 JavaScript

在网页开发中，我们经常需要给一些元素（如按钮、列表项等）添加一些交互效果，这时就需要用到 JavaScript。那么如果元素是 li 或者是按钮，如何签入 JavaScript 呢？下面是一些示例代码，供参考。

如何选中元素

在 JavaScript 中，我们可以使用 document.querySelector() 或 document.querySelectorAll() 方法来选中元素。区别在于前者只返回第一个匹配到的元素，后者返回所有匹配到的元素。以下是两种方法的示例代码：

使用 document.querySelector()

const element = document.querySelector('li'); // 选中第一个 li 元素
console.log(element); // 打印选中的元素

const button = document.querySelector('button'); // 选中第一个 button 元素
console.log(button); // 打印选中的元素

使用 document.querySelectorAll()

const elements = document.querySelectorAll('li'); // 选中所有 li 元素
console.log(elements); // 打印选中的元素列表

const buttons = document.querySelectorAll('button'); // 选中所有 button 元素
console.log(buttons); // 打印选中的元素列表

如何给元素添加事件监听器

使用 addEventListener() 方法可以给元素添加事件监听器。以下是一些示例代码：

给 li 元素添加点击事件监听器

const li = document.querySelector('li'); // 选中第一个 li 元素
li.addEventListener('click', function(event) { // 添加点击事件监听器
  console.log('li 元素被点击了！'); // 在控制台打印提示信息
});

给 button 元素添加点击事件监听器

const button = document.querySelector('button'); // 选中第一个 button 元素
button.addEventListener('click', function(event) { // 添加点击事件监听器
  console.log('button 元素被点击了！'); // 在控制台打印提示信息
});

如何修改元素样式

使用 element.style 属性可以修改元素的样式。以下是一些示例代码：

修改 li 元素的文本颜色

const li = document.querySelector('li'); // 选中第一个 li 元素
li.style.color = 'red'; // 修改文本颜色为红色

修改 button 元素的背景颜色和字体颜色

const button = document.querySelector('button'); // 选中第一个 button 元素
button.style.backgroundColor = 'blue'; // 修改背景颜色为蓝色
button.style.color = 'yellow'; // 修改字体颜色为黄色

以上就是关于如何签入 JavaScript 到 li 或者是按钮元素的介绍，希望能对网页开发者们有所帮助。