DOM操作与全局JS注册指南

      // 通过ID选择元素
const navbar = document.getElementById("topnav");
const mybutton = document.getElementById("back-to-top");

// 通过类名选择元素
const navbarToggler = document.querySelector('.navbar-toggler');
const navbarCollapse = document.querySelector('.navbar-collapse');
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')

// 通过标签名选择元素
var elements = document.getElementById("navigation").getElementsByTagName("a");

// 使用更复杂的选择器
const targetElement = document.querySelector(targetId);
const dropdowns = document.querySelectorAll('.dropdown');
    

      // 基本用法
document.addEventListener('DOMContentLoaded', function() {
    // 在这里执行DOM操作
    renderMathInElement(document.getElementById("content"), {
        // 配置选项
    });
});

// 箭头函数写法
document.addEventListener('DOMContentLoaded', () => {
    window.ImageHandler.init();
});
    

      // 滚动事件
window.addEventListener('scroll', function() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // 处理滚动逻辑
});

// 点击事件
document.addEventListener('click', function(event) {
    var isClickInsideElement = suggestions.contains(event.target);
    if (!isClickInsideElement) {
        suggestions.classList.add('d-none');
    }
});

// 键盘事件
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        this.closeZoom();
    }
});

// 窗口大小变化事件
window.addEventListener('resize', function() {
    if (window.innerWidth >= 992) {
        // 处理响应式逻辑
    }
});
    

      // 添加/移除类
navbar.classList.add("nav-sticky");
navbar.classList.remove("scrolled");
navbar.classList.toggle('open');

// 直接修改样式
mybutton.style.display = "block";
overlay.style.borderBottom = '1px solid var(--alert-border-color)'
    

      // 获取属性
const isExpanded = navbarToggler.getAttribute('aria-expanded') === 'true';
const href = elem.target.getAttribute("href");

// 设置属性
navbarToggler.setAttribute('aria-expanded', 'false');
element.setAttribute('data-collapse-state', 'collapsed');
    

      // 创建新元素
const overlay = document.createElement('div');
overlay.className = 'image-overlay';

const collapseBtn = document.createElement('button');
collapseBtn.setAttribute('type', 'button');

// 克隆元素
const clonedElement = this.cloneImageElement(element);

// 插入元素
document.body.appendChild(overlay);
parent.insertBefore(wrapper, block);
wrapper.appendChild(block);
    

      // 注册全局函数
window.toggleMenu = function() {
    const isActive = legacyToggle.classList.contains('active');
    if (isActive) {
        legacyToggle.classList.remove('active');
        navigation.classList.remove('show');
    } else {
        legacyToggle.classList.add('active');
        navigation.classList.add('show');
    }
};

// 注册全局对象
window.ImageHandler = {
    init() {
        // 初始化逻辑
    },
    toggleZoom(element) {
        // 缩放功能
    },
    closeZoom() {
        // 关闭功能
    }
};

// 注册全局工具函数
window.sanitizeHTML = function (str) {
    return str.replace(/[^\w. ]/gi, function (c) {
        return '&#' + c.charCodeAt(0) + ';';
    });
};