// 公式应用1：点击按钮显示隐藏菜单
document.querySelector('.menu-btn').addEventListener('click', function() {
    document.querySelector('.nav-menu').classList.toggle('show');
});

// 公式应用2：鼠标悬停显示提示
document.querySelector('.tooltip').addEventListener('mouseover', function() {
    this.nextElementSibling.style.visibility = 'visible';
});

// 公式应用3：输入时实时验证
document.querySelector('#email').addEventListener('input', function() {
    if(this.value.includes('@')) {
        this.style.borderColor = 'green';
    } else {
        this.style.borderColor = 'red';
    }
});

// 这些都是“选择元素”的方法
const byId = document.getElementById('header');      // 通过ID
const byClass = document.getElementsByClassName('item'); // 通过类名(集合)
const byTag = document.getElementsByTagName('div');  // 通过标签名(集合)
const bySelector = document.querySelector('.main');  // 通过CSS选择器(第一个)
const bySelectorAll = document.querySelectorAll('.btn'); // 通过CSS选择器(所有)

element.addEventListener('click', function() {});      // 点击
element.addEventListener('mouseenter', function() {}); // 鼠标移入
element.addEventListener('mouseleave', function() {}); // 鼠标移出
element.addEventListener('input', function() {});      // 输入框输入时
element.addEventListener('submit', function() {});     // 表单提交时
element.addEventListener('scroll', function() {});     // 滚动时

// 内容操作
element.innerHTML = '<strong>新内容</strong>'; // 可以包含HTML
element.textContent = '纯文本内容';           // 只是纯文本

// 样式操作
element.style.color = 'red';                // 直接修改样式
element.classList.add('active');            // 添加类
element.classList.remove('active');         // 移除类
element.classList.toggle('active');         // 切换类（有就删，没有就加）

// 显示/隐藏
element.style.display = 'block';    // 显示
element.style.display = 'none';     // 隐藏

// 属性操作
element.setAttribute('data-value', '123');  // 设置属性
element.getAttribute('data-value');         // 获取属性

<!-- HTML 部分 -->
<img src="small.jpg" class="gallery-img" data-fullsize="large.jpg">
<div class="lightbox" style="display:none;">
    <span class="close">&times;</span>
    <img class="lightbox-img">
</div>

<script>
// JavaScript 部分
// 点击小图显示大图
document.querySelector('.gallery-img').addEventListener('click', function() {
    const largeUrl = this.getAttribute('data-fullsize');
    document.querySelector('.lightbox').style.display = 'block';
    document.querySelector('.lightbox-img').setAttribute('src', largeUrl);
});

// 点击关闭按钮隐藏灯箱
document.querySelector('.close').addEventListener('click', function() {
    document.querySelector('.lightbox').style.display = 'none';
});
</script>