当前位置：首页 > article >正文

V少JS基础班之第二弹

article 2025/1/30 16:07:05

一、前言

更新说明。本来是一周一更的，但是作为入门基础。前面的基础概念太多了。我预计会在第一个月完成JS函数之前的内容。所以，前期会主动加更几期。到函数之后，就正式一周一更了。为了让各位同学有个基本的框架，我把后续要讲解的内容提前放出来，只是个大概，后续可能还是会新增部分内容。

暂定的是每周更新一期，从JS最基础【变量与作用域】到【异步编程，密码学与混淆】。计划历时6个月左右。希望自己能坚持下来，也希望给准备入行JS逆向的朋友一些帮助
先预告一下【V少JS基础班】的全部内容。看着很少，其实，正儿八经细分下来其实挺多的，第一个月的东西也一点不少。
第一个月【变量、作用域、BOM、DOM、操作符、数据类型】
第二个月【函数、闭包、原型链、this】
第三个月【面向对象编程、异步编程、nodejs】
第四个月【密码学、各类加密函数】
第五个月【jsdom、vm2、express】
第六个月【基本请求库、前端知识对接】

二、本节涉及知识点

1- DOM
2- BOM

三、重点内容

1- DOM的本质：

很重要！！！
大家一直DOM,DOM的念。但是一直会忽略什么叫DOM。
DOM (Document Object Model) 是一种文档对象模型，它使得程序能够动态地访问、修改和操作网页的内容和结构。
我们看全称。 DOM的意思应该是Document¹对象的模型。它是一个模型。在JavaScript引擎解析JS代码的时候。会根据JS代码，构建出一个模型出来。这个模型是树状结构，是从HTML或者XML文档中提取出来的。同时，这个模型给JavaScript引擎提供了一个接口，使得的JavaScript可以通过操作Document对象，来操控DOM,并映射到页面上。

2、DOM的核心概念：

DOM 将 HTML 或 XML 文档表示为一棵树，这棵树的每一个节点都代表一个文档中的元素、属性或文本。
例如，标签是根节点，<.head> 和 <.body> 是它的子节点，<.body> 下的 <.div> 是下一级节点，依此类推。

我们用代码直观的看一下

<!DOCTYPE html>
<html>
  <head>
    <title>DOM Example</title>
  </head>
  <body>
    <div id="content">Hello, DOM!</div>
  </body>
</html>

这段 HTML 代码经过浏览器解析后，会形成如下的 DOM 树结构：

Document
 ├── html
 │    ├── head
 │    │   └── title
 │    └── body
 │         └── div (id="content")
 │              └── text "Hello, DOM!"

通过 JS代码操作 Document对象，我们对Document对象的增删改查都可以直接作用到DOM[Document模型]上，而DOM[Document模型]又与html直接关联。从而起到操作document去修改页面的目的：

// 通过 document 获取页面中 id 为 "content" 的 div 元素
const divElement = document.getElementById('content');

// 修改 div 元素的内容
divElement.textContent = 'Hello, JavaScript!';

// 在网页中看到的内容会变成 "Hello, JavaScript!"

3、DOM的典型操作：

DOM作为一个接口，提供了很多方法，去操作document对象。下面列举出一些常用的操作。
获取元素：

const element = document.getElementById('id'); // 通过ID获取元素
const elements = document.getElementsByClassName('class'); // 通过类名获取一组元素
const queryElement = document.querySelector('.class'); // 通过选择器获取单个元素

修改内容：

element.textContent = 'New content'; // 修改文本内容
element.innerHTML = '<p>New HTML content</p>'; // 修改 HTML 内容

创建和添加内容

const newElement = document.createElement('div'); // 创建一个新的 div 元素
newElement.textContent = 'I am a new element';
document.body.appendChild(newElement); // 将新元素添加到页面的 body 中

赋值代码

document.body.removeChild(newElement); // 从 body 中删除刚才创建的元素

4- BOM的本质：

BOM（浏览器对象模型）：主要用于操作浏览器本身，提供浏览器窗口、设备信息、浏览器行为等的控制和访问。

5- BOM 中的常见对象：

window 对象、navigator 对象、location 对象、history 对象、screen 对象、

window 对象：

console.log(window);  // 浏览器窗口的 `window` 对象
console.log(window.innerWidth);  // 浏览器窗口的宽度
console.log(window.innerHeight); // 浏览器窗口的高度

navigator 对象：

console.log(navigator.userAgent); // 获取用户代理信息（浏览器、操作系统等）
console.log(navigator.language);  // 获取用户语言

location 对象

console.log(location.href); // 获取当前页面的完整 URL
location.href = 'https://www.example.com'; // 跳转到新页面

history 对象：

console.log(history.length); // 获取历史记录的长度
history.back();  // 返回上一页
history.forward(); // 前进到下一页

screen 对象：

console.log(screen.width);  // 屏幕宽度
console.log(screen.height); // 屏幕高度
console.log(screen.availWidth); // 可用宽度（不包括任务栏）
console.log(screen.availHeight); // 可用高度（不包括任务栏）

console 对象：

console.log('This is a log'); // 输出日志
console.error('This is an error'); // 输出错误信息
console.warn('This is a warning'); // 输出警告信息

6- BOM和DOM的关系：

OK，我们简单了解了BOM和DOM。如果文章到这里结束。大家真学到了吗。我在这里给大家做个总结：
1- BOM和DOM
BOM是浏览器对象模型。 DOM是document对象模型。那window是浏览器对象模型中的核心对象。document挂载在window上。所以BOM和DOM的关系是什么呢。其实他们就是简单的DOM中的document是BOM中的window对象的属性。我们了解到了DOM是个对象模型，表现形式的树状。而BOM的表现形式是多对象的集合，它是由多个window的对象属性构成的一个集合。以后我们脑海就该有个大概印象。BOM是个浏览器接口，它提供了大量的接口去操作浏览器。而DOM是个Document模型的操作接口。它更加细致的为浏览器页面提供各种操作。

2- 浏览器的接口
那我们现在有概念了， BOM和DOM是模型。同时也是接口。那浏览器的接口还有很多。

DOM：用于操作页面结构和内容。
BOM：用于操作浏览器环境（如窗口、历史、位置等）。
Canvas API：用于绘制和图形处理。
Web Storage：用于存储数据。
Fetch API / XMLHttpRequest：用于网络请求。
Geolocation API：用于获取地理位置。
WebSockets：用于实现实时双向通信。
Web Workers：用于多线程处理。

5- 总结：

HTML是一个文件类型，同时它还是一种标记语言。我们通过固定的格式，编写一个HTML文件出来之后，可以构建出一个网页。
CSS是一个文件类型，同时它还是一种样式表语言。我们通过固定格式，编写一个css文件出来，可以帮助HTML文件提供样式。
JavaScript是一个文件类型（js），同时它还是一种编程语言。我们可以使用JS代码操作HTML页面。而操作的工具，就是诸多的接口。比如BOM、DOM、WebSockets等等。
希望通过今天的总结，大家对JS能有更深刻的理解。我们只有打好基础才能更好地逆向。有一句话说的好，你JS逆向的水平取决于你正向的JS开发能力。我们只有更加了解JS，才能提高我们JS逆向的上限。