JavaScript加强篇——第五章 DOM节点（加强）与BOM

目录

一、DOM节点基础

二、节点查找

三、节点操作

四、移动端事件

五、插件使用

六、BOM基础概念

七、window对象详解

八、BOM子对象概览

---

此章节主要讲解：DOM节点基础、节点查找、节点操作、移动端事件、插件使用、BOM基础概念、window对象详解、BOM子对象概览。

一、DOM节点基础

节点类型与特性

节点类型	说明	实际应用场景
元素节点	HTML标签	页面结构搭建
属性节点	标签属性	元素样式/数据存储
文本节点	标签内的文本内容	动态内容更新

❗ 核心要点

1. 整个DOM文档是树形结构，html是根节点

2. 元素节点可以包含子节点（文本/元素/属性节点）

3. 开发中重点关注元素节点，用于构建页面结构

---

二、节点查找

1. 父子节点查找

属性/方法	说明	返回内容
parentNode	查找父节点	单个父元素
children	查找所有子元素节点	元素伪数组
childNodes	查找所有子节点	包含文本/注释节点

<!-- 示例结构 -->
<div class="erweima"><img src="code.png" alt="二维码"><i class="close-btn">x</i>
</div><script>
// 点击关闭按钮删除父元素
document.querySelector('.close-btn').addEventListener('click', function() {this.parentNode.remove(); // 删除整个二维码容器
});
</script>

2. 兄弟节点查找

属性	说明
nextElementSibling	下一个兄弟元素节点
previousElementSibling	上一个兄弟元素节点

// 导航菜单激活切换
const items = document.querySelectorAll('.menu-item');
items.forEach(item => {item.addEventListener('click', function() {// 移除所有兄弟节点的激活状态let prev = this.previousElementSibling;let next = this.nextElementSibling;while(prev) {prev.classList.remove('active');prev = prev.previousElementSibling;}while(next) {next.classList.remove('active');next = next.nextElementSibling;}// 激活当前节点this.classList.add('active');});
});

⚠️ 注意事项

1. children 只返回元素节点，忽略文本/注释节点

2. nextElementSibling 与 previousElementSibling 只匹配元素节点

---

三、节点操作

1. 创建与添加节点

// 创建新节点
const newDiv = document.createElement('div');
newDiv.className = 'alert';
newDiv.innerHTML = '操作成功！';// 添加到页面中的两种方式
// 方式1：追加到父元素末尾
document.body.appendChild(newDiv);// 方式2：插入到指定元素前
const container = document.querySelector('.container');
container.insertBefore(newDiv, container.firstChild);

2. 克隆节点

const template = document.querySelector('.product-card');// 克隆节点（浅拷贝）
const clone1 = template.cloneNode(false); // 不包含子元素// 克隆节点（深拷贝）
const clone2 = template.cloneNode(true); // 包含所有子元素// 添加克隆节点
document.querySelector('.products').appendChild(clone2);

3. 删除节点

// 正确方式：通过父元素删除
const item = document.querySelector('.item');
item.parentNode.removeChild(item);// 现代简化方式（需考虑兼容性）
item.remove();

⚠️ 关键区别

操作	说明	内存影响
隐藏节点	element.style.display='none'	节点仍存在内存中
删除节点	remove() 或 removeChild()	节点从内存移除

---

四、移动端事件

触屏事件类型

事件类型	触发时机	应用场景
touchstart	手指触摸到元素时触发	按钮按下效果
touchmove	手指在元素上滑动时触发	滑动轮播图
touchend	手指从元素上移开时触发	结束操作反馈

基础使用示例

const slider = document.querySelector('.slider');slider.addEventListener('touchstart', (e) => {console.log('触摸开始', e.touches[0].clientX);
});slider.addEventListener('touchmove', (e) => {e.preventDefault(); // 阻止默认滚动行为console.log('触摸移动', e.touches[0].clientX);
});slider.addEventListener('touchend', () => {console.log('触摸结束');
});

⚠️ 注意事项

1. 使用 e.touches[0] 获取第一个触摸点信息

2. 在 touchmove 中常需调用 e.preventDefault() 阻止页面滚动

3. PC端开发时需模拟测试移动端事件

---

五、插件使用

四步使用流程

1. 熟悉官网

   • 了解插件功能：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

2. 查看演示

   • 选择合适demo：Swiper演示 - Swiper中文网

3. 学习基础用法

   • 掌握使用流程：Swiper使用方法 - Swiper中文网

4. 配置API

   • 定制插件功能：中文api - Swiper中文网

使用示例（Swiper轮播图）

<!-- 1. 引入CSS -->
<link rel="stylesheet" href="swiper-bundle.min.css"><!-- 2. 基础HTML结构 -->
<div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div></div><div class="swiper-pagination"></div>
</div><!-- 3. 引入JS -->
<script src="swiper-bundle.min.js"></script><!-- 4. 初始化 -->
<script>
const mySwiper = new Swiper('.swiper', {direction: 'horizontal',loop: true,pagination: {el: '.swiper-pagination',},
});
</script>

⚠️ 重要提示

1. 多个插件实例需使用不同类名区分

2. 仔细查看文档中的兼容性说明

3. 按需加载插件模块以减少体积

---

✅ 核心要点总结

📝 高频面试题速答

1. Q：children和childNodes的区别？

   A：children只返回元素节点，childNodes返回所有节点类型

2. Q：如何正确删除DOM节点？

   A：通过父元素调用removeChild()或直接使用element.remove()

3. Q：移动端三大触屏事件是什么？

   A：touchstart、touchmove、touchend

4. Q：克隆节点时cloneNode(true)和false的区别？

   A：true克隆所有后代节点，false只克隆当前节点

5. Q：使用插件的基本流程？

   A：查官网→看演示→学用法→配API

---

🧠 记忆口诀

"增删改查四操作，移动触屏三事件"

• 四操作：创建、添加、克隆、删除

• 三事件：start、move、end

六、BOM基础概念

BOM定义

BOM（Browser Object Model）：浏览器对象模型，提供与浏览器窗口交互的接口

BOM与DOM对比

特性	BOM	DOM
作用对象	浏览器窗口及功能	文档内容
核心对象	window	document
标准化	无统一标准（浏览器实现不同）	W3C标准
主要功能	控制浏览器行为	操作页面元素

BOM结构图解

---

七、window对象详解

window的特殊地位

1. 顶级对象：JavaScript中的最高层级对象

2. 全局容器：

   • 所有通过var定义的全局变量 → 成为window的属性

   • 所有全局函数 → 成为window的方法

3. 隐式调用：可省略window.前缀

代码验证

// 1. 全局变量成为window属性
var globalVar = 10;
console.log(window.globalVar); // 输出10// 2. 全局函数成为window方法
function sayHello() {console.log('Hello!');
}
window.sayHello(); // 输出"Hello!"// 3. 原生方法实际属于window
window.console.log('等同于console.log');
window.alert('等同于alert');

⚠️ 关键注意事项

// let/const不会成为window属性
let localVar = 20;
console.log(window.localVar); // 输出undefined// 避免命名冲突
var alert = '自定义变量'; // 覆盖原生alert方法
alert('会报错！'); // TypeError: alert is not a function

---

八、BOM子对象概览

1. navigator：浏览器信息

console.log('浏览器名称:', navigator.appName);
console.log('浏览器版本:', navigator.appVersion);
console.log('用户代理:', navigator.userAgent);
console.log('操作系统:', navigator.platform);

2. location：URL操作

属性/方法	说明	示例
href	获取/设置完整URL	location.href = 'https://new.com'
host	获取主机名和端口	location.host → "example.com:8080"
pathname	获取路径部分	location.pathname → "/path/page.html"
search	获取查询参数	location.search → "?id=123"
reload()	刷新页面	location.reload()
assign()	跳转到新页面（保留历史）	location.assign('new.html')

3. history：浏览历史

// 后退一页
history.back(); // 前进一页
history.forward();// 跳转到历史记录中特定位置
history.go(-2); // 后退两页// 添加新历史记录（不会触发跳转）
history.pushState({data: 'state'}, '', 'new-url');

4. screen：屏幕信息

console.log('屏幕宽度:', screen.width);
console.log('屏幕高度:', screen.height);
console.log('可用宽度:', screen.availWidth); // 减去任务栏等
console.log('可用高度:', screen.availHeight);

5. document：DOM入口

虽然属于BOM对象，但实际是DOM的入口点
window.document 简写为 document

---

✅ BOM核心要点总结

📝 高频面试题速答

1. Q：BOM和DOM的区别？

   A：BOM操作浏览器窗口，DOM操作页面内容

2. Q：var和let/const定义的全局变量有何区别？

   A：var变量会成为window属性，let/const不会

3. Q：如何获取当前浏览器名称？

   A：使用navigator.userAgent分析

4. Q：如何不刷新页面修改URL？

   A：使用history.pushState()

5. Q：location.reload()和location.replace()的区别？

   A：reload刷新页面，replace替换当前历史记录

---

🧠 记忆口诀

"BOM五大将，窗口我最强"

• 五大将：naviagtor、location、history、screen、document

• 窗口：window对象是核心