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

目录

一、DOM节点基础

二、节点查找

三、节点操作

四、移动端事件

五、插件使用

六、BOM基础概念

七、window对象详解

八、BOM子对象概览

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

一、DOM节点基础

节点类型与特性

❗ 核心要点

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

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

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

二、节点查找

1. 父子节点查找

<!-- 示例结构 -->
<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. 兄弟节点查找

// 导航菜单激活切换
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();

⚠️ 关键区别

四、移动端事件

触屏事件类型

基础使用示例

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结构图解

七、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操作

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对象是核心