JavaScript核心知识第一章---DOM 文档对象模型（含大量案例分析）

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

console.log(nav);

var li = document.querySelector(‘li’);

console.log(li);

// 3. querySelectorAll()返回指定选择器的所有元素对象集合

var allBox = document.querySelectorAll(‘.box’);

console.log(allBox);

var lis = document.querySelectorAll(‘li’);

console.log(lis);

（5）获取特殊元素（body，html）

1️⃣ 获取body元素

doucumnet.body // 返回body元素对象

2️⃣ 获取html元素

document.documentElement // 返回html元素对象

代码演示如下：

---

三、事件基础

---

（1）事件概述

1️⃣ JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解： 触发— 响应机制。

2️⃣ 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

（2）事件三要素

1. 事件源 （谁）

2. 事件类型 （什么事件）

3. 事件处理程序 （做什么）

2.1 案例：点击按钮弹出警示框

要求：页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框；

案例分析：

1. 获取事件源（按钮）；

2. 注册事件（绑定事件），使用 onclick；

3. 编写事件处理程序，写一个函数弹出 alert 警示框；

代码演示如下：

点击这里哦

（3）执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式）

（4）常见的鼠标事件

| 鼠标事件 | 触发条件 |

| — | — |

| onclick | 鼠标点击左键触发 |

| onmouseover | 鼠标经过触发 |

| onmouseout | 鼠标离开触发 |

| onfocus | 获得鼠标焦点触发 |

| onblur | 失去鼠标焦点触发 |

| onmousemove | 鼠标移动触发 |

| onmouseup | 鼠标弹起触发 |

| onmousedown | 鼠标按下触发 |

---

四、操作元素

---

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等；

（1）改变元素内容

1️⃣ element.innerText：从起始位置到终止位置的内容，但它去除 html 标签，同时空格和换行也会去掉；

2️⃣ element.innerHTML：起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行；

1.1 innerText 和 innerHTML的区别

代码演示如下：

我是文字

123456

显示效果如下：

1.2 案例：分时显示不同图片，显示不同问候语

要求：根据不同时间，页面显示不同图片，同时显示不同的问候语。

1. 如果上午时间打开页面，显示上午好，显示上午的图片。

2. 如果下午时间打开页面，显示下午好，显示下午的图片。

3. 如果晚上时间打开页面，显示晚上好，显示晚上的图片。

案例分析：

1. 根据系统不同时间来判断，所以需要用到日期内置对象；

2. 利用多分支语句来设置不同的图片；

3. 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性；

4. 需要一个div元素，显示不同问候语，修改元素内容即可；

完整代码演示如下：

上午好

😆温馨提醒😆：因代码涉及到使用图片，所以小伙伴们首先先理解代码，然后再将自己准备的图片代替代码中的图片即可哦；

（2）表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：type、value、checked、selected、disabled

代码演示如下：

按钮

显示效果如下：

2.1 案例：仿京东显示密码

要求：点击按钮将密码框切换为文本框，并可以查看密码明文；

案例分析：

1. 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码；

2. 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框；

3. 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1；

案例图片素材：

完整代码演示如下：

（3）样式属性操作<1>

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1️⃣ element.style：行内样式操作；

😆温馨提醒😆：

1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor；

2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高；

3.1 案例：显示隐藏文本框内容

要求：当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示；

案例分析：

1. 首先表单需要2个新事件，获得焦点 onfocus 失去焦点 onblur；

2. 如果获得焦点， 判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容；

3. 如果失去焦点， 判断表单内容是否为空，如果为空，则表单内容改为默认文字；

代码演示如下：

（4）样式属性操作<2>

1️⃣ element.className：类名样式操作；

😆温馨提醒😆：

1. 如果样式修改较多，可以采取操作类名方式更改元素样式；

2. class因为是个保留字，因此使用className来操作元素类名属性；

3. className 会直接更改元素的类名，会覆盖原先的类名；

完整代码演示如下：

文本

4.1 案例： 密码框格式提示错误信息

要求：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息；

案例分析：

1. 首先判断的事件是表单失去焦点 onblur；

2. 如果输入正确则提示正确的信息颜色为绿色小图标变化；

3. 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化；

4. 因为里面变化样式较多，我们采取className修改样式；

案例图片素材：

完整代码演示如下：

请输入6~16位密码

（5）操作元素总结

（6）排他思想

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）；

2. 给当前元素设置样式 （留下我自己）；

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己；

代码演示如下：

按钮1

按钮2

按钮3

按钮4

按钮5

显示效果如下：

6.1 案例1：表格隔行变色

显示效果如下：

完整代码演示如下：

代码 名称 最新公布净值 累计净值 前单位净值 净值增长率 003526 农银金穗3个月定期开放债券 1.075 1.079 1.074 +0.047% 000689 前海开源新经济混合A 1.075 1.079 1.074 +0.047% 003567 华夏行业景气混合 1.075 1.079 1.074 +0.047% 002296 长城行业轮动混合A 1.075 1.079 1.074 +0.047% 001704 国投瑞银进宝混合 1.075 1.079 1.074 +0.047% 515220 国泰中证煤炭ETF 1.075 1.079 1.074 +0.047%

6.2 案例2：表单全选取消全选案例

业务需求：

1. 点击上面全选复选框，下面所有的复选框都选中（全选）；

2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选）；

3. 如果下面复选框全部选中，上面全选按钮就自动选中；

4. 如果下面复选框有一个没有选中，上面全选按钮就不选中；

5. 所有复选框一开始默认都没选中状态；

案例分析：

1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可；

2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中；

3. 可以设置一个变量，来控制全选是否选中；

显示效果如下：

完整代码演示如下：

商品 价钱 iPhone13 8399 iPad Pro 5000 iPad Air 2000 Apple Watch 2000

（7）自定义属性的操作

1️⃣ 获取属性值

• element.属性 ：获取属性值。

• element.getAttribute('属性');

😆区别😆：

• element.属性 ：获取内置属性值（元素本身自带的属性）；

• element.getAttribute(‘属性’); ：主要获得自定义的属性 （标准） 我们程序员自定义的属性

2️⃣ 设置属性值

• element.属性 = ‘值’ ：设置内置属性值。

• element.setAttribute('属性', '值');

😆区别😆：

• element.属性 ：设置内置属性值；

• element.setAttribute(‘属性’); ：主要设置自定义的属性 （标准）；

3️⃣ 移除属性

• element.removeAttribute('属性');

代码演示如下：

7.1 案例：tab 栏切换（重点案例）

要求：当鼠标点击上面相应的选项卡（tab），下面内容跟随变化；

案例分析：

1. Tab栏切换有2个大的模块；

2. 上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式；

3. 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面；

4. 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配；

5. 核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号；

6. 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏（排他思想）；

显示效果如下：

完整代码演示如下：

• 商品介绍
• 规格与包装
• 售后保障
• 商品评价(50000)
• 手机社区
• 商品介绍模块内容

  规格与包装模块内容

  售后保障模块内容

  商品评价(50000)模块内容

  手机社区模块内容

  （8）H5自定义属性

  1️⃣ 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

  2️⃣ 自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

  H5给我们新增了自定义属性：

  8.1 设置H5自定义属性

  H5规定自定义属性data-开头做为属性名并且赋值。

  比如

  或者使用 JS 设置

  element.setAttribute(‘data-index’, 2)

  8.2 获取H5自定义属性

  1. 兼容性获取：element.getAttribute(‘data-index’);

  2. H5新增 element.dataset.index 或者 element.dataset[‘index’]，ie11才开始支持

  代码演示如下：

  文末

  从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

  个人将这段时间所学的知识，分为三个阶段：

  第一阶段：HTML&CSS&JavaScript基础

  

  第二阶段:移动端开发技术

  

  第三阶段:前端常用框架

  

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  tem 这些div 隐藏

  for (var i = 0; i < items.length; i++) {

  items[i].style.display = ‘none’;

  }

  // 留下我自己 让对应的item 显示出来

  items[index].style.display = ‘block’;

  }

  }

  （8）H5自定义属性

  1️⃣ 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

  2️⃣ 自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

  H5给我们新增了自定义属性：

  8.1 设置H5自定义属性

  H5规定自定义属性data-开头做为属性名并且赋值。

  比如

  或者使用 JS 设置

  element.setAttribute(‘data-index’, 2)

  8.2 获取H5自定义属性

  1. 兼容性获取：element.getAttribute(‘data-index’);

  2. H5新增 element.dataset.index 或者 element.dataset[‘index’]，ie11才开始支持

  代码演示如下：

  文末

  从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

  个人将这段时间所学的知识，分为三个阶段：

  第一阶段：HTML&CSS&JavaScript基础

  

  第二阶段:移动端开发技术

  

  第三阶段:前端常用框架

  

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

  网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

  需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-7s4kVL3Y-1713142987493)]

  一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！