一、BOM核心对象与导航控制

1. location对象：页面跳转与刷新

// 跳转到指定URL
location.href = "https://example.com"; 

// 刷新当前页面
location.reload(); 

// 示例：点击按钮跳转
document.querySelector("#btn").onclick = () => {
  location.href = "detail.html";
};

2. history对象：历史记录管理

history.back();     // 返回上一页
history.forward();  // 前进下一页
history.go(-2);     // 后退两步

// 示例：返回主页的链接
<a href="javascript:history.back()">返回主页面</a>

---

二、DOM元素访问三剑客

方法	作用域	返回类型	适用场景
getElementById()	单个元素	HTMLElement	精确匹配ID的元素
getElementsByName()	同名元素集合	NodeList	表单元素批量操作
getElementsByTagName()	标签元素集合	HTMLCollection	操作同类标签元素

实战示例：

// 批量获取输入框内容
function collectInputs() {
  const inputs = document.getElementsByTagName("input");
  let values = [];
  for (let input of inputs) {
    values.push(input.value);
  }
  return values.join(", ");
}

// 操作同名复选框
function toggleCheckboxes(checked) {
  const checkboxes = document.getElementsByName("product");
  checkboxes.forEach(checkbox => checkbox.checked = checked);
}

---

三、元素显示与隐藏控制

1. visibility vs display

属性	特点	适用场景
visibility	隐藏元素但保留占位空间	需要保持布局稳定时
display	完全移除元素不占空间	动态切换显示状态

切换菜单显示：

function toggleMenu(menuId) {
  const menu = document.getElementById(menuId);
  menu.style.display = menu.style.display === "none" ? "block" : "none";
}

2. 树形菜单实现

<ul id="mainMenu">
  <li onclick="toggleMenu('subMenu1')">前端技术</li>
  <ul id="subMenu1" style="display:none">
    <li>HTML</li>
    <li>CSS</li>
  </ul>
</ul>
运行 HTML

---

四、TAB切换效果开发

实现思路：

1. 通过display:none隐藏所有内容区块

2. 使用事件监听触发切换

3. 动态修改目标元素的display属性

代码示例：

function switchTab(tabId) {
  // 隐藏所有内容
  const tabs = document.getElementsByClassName("tab-content");
  for (let tab of tabs) {
    tab.style.display = "none";
  }
  // 显示目标内容
  document.getElementById(tabId).style.display = "block";
}

<div class="tabs">
  <button onclick="switchTab('tab1')">商品详情</button>
  <button onclick="switchTab('tab2')">用户评价</button>
</div>
<div id="tab1" class="tab-content">...</div>
<div id="tab2" class="tab-content" style="display:none">...</div>
运行 HTML

---

五、复选框全选功能

实现原理：

1. 获取所有目标复选框

2. 根据全选框状态批量设置

function toggleAll(checkbox) {
  const items = document.getElementsByName("product");
  items.forEach(item => item.checked = checkbox.checked);
}

<input type="checkbox" id="checkAll" onchange="toggleAll(this)">
<label>全选</label>

<div class="products">
  <input type="checkbox" name="product"> 商品A
  <input type="checkbox" name="product"> 商品B
</div>
运行 HTML

---

六、最佳实践与性能优化

1. 减少DOM操作：缓存查询结果

   // 错误写法：每次循环都查询DOM
   for (let i=0; i<10; i++) {
     document.getElementById("item").style.color = "red";
   }
   
   // 正确写法：缓存元素
   const item = document.getElementById("item");
   for (let i=0; i<10; i++) {
     item.style.color = "red";
   }

2. 事件委托优化：

   document.querySelector(".tab-bar").addEventListener("click", e => {
     if (e.target.tagName === "BUTTON") {
       switchTab(e.target.dataset.tab);
     }
   });

3. 现代API替代方案：

   // 使用querySelectorAll简化查询
   document.querySelectorAll(".product-checkbox");
   
   // 使用classList操作样式
   element.classList.toggle("active");