JavaScrip——BOM编程

一、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");