diff --git a/src/.vitepress/config.mts b/src/.vitepress/config.mts
index 7b811e2..d488e10 100644
--- a/src/.vitepress/config.mts
+++ b/src/.vitepress/config.mts
@@ -22,7 +22,24 @@ export default defineConfig(
         { text: "Home", link: "/" },
         {
           text: "JavaScript",
-          link: "/javascript/introduction/what-is-javascript",
+          items: [
+            {
+              text: "介绍",
+              link: "/javascript/introduction/what-is-javascript",
+            },
+            {
+              text: "ECMAScript",
+              link: "/javascript/ecma-script/es-version",
+            },
+            {
+              text: "BOM",
+              link: "/javascript/bom/what-is-bom",
+            },
+            {
+              text: "DOM",
+              link: "/javascript/dom/what-is-dom",
+            },
+          ],
         },
         {
           text: "前端",
diff --git a/src/.vitepress/sidebars/bom.yaml b/src/.vitepress/sidebars/bom.yaml
new file mode 100644
index 0000000..de66f88
--- /dev/null
+++ b/src/.vitepress/sidebars/bom.yaml
@@ -0,0 +1,8 @@
+/javascript/bom: 
+  - text: BOM
+    base: /javascript/bom
+    items:
+      - text: 什么是 BOM
+        link: /what-is-bom
+      - text: screen
+        link: /screen
\ No newline at end of file
diff --git a/src/.vitepress/sidebars/dom.yaml b/src/.vitepress/sidebars/dom.yaml
new file mode 100644
index 0000000..0a76e3a
--- /dev/null
+++ b/src/.vitepress/sidebars/dom.yaml
@@ -0,0 +1,6 @@
+/javascript/dom: 
+  - text: DOM
+    base: /javascript/dom
+    items:
+      - text: 什么是 DOM
+        link: /what-is-dom
\ No newline at end of file
diff --git a/src/.vitepress/sidebars/ecma-script.yaml b/src/.vitepress/sidebars/ecma-script.yaml
new file mode 100644
index 0000000..f4ebe85
--- /dev/null
+++ b/src/.vitepress/sidebars/ecma-script.yaml
@@ -0,0 +1,101 @@
+/javascript/ecma-script:
+  - text: ECMAScript
+    items:
+      - text: ES 的版本
+        link: /javascript/ecma-script/es-version
+      - text: JavaScript 引擎
+        items:
+          - text: 调用栈
+            link: /javascript/ecma-script/javascript-engine/call-stack
+          - text: 作用域
+            link: /javascript/ecma-script/javascript-engine/scope
+          - text: 作用域链
+            link: /javascript/ecma-script/javascript-engine/scope-chain
+          - text: this 关键字
+            link: /javascript/ecma-script/javascript-engine/this-keyword
+          - text: 事件循环
+            link: /javascript/ecma-script/javascript-engine/event-loop
+      - text: 变量声明
+        link: /javascript/ecma-script/variable-declaration
+      - text: 比较算法
+        link: /javascript/ecma-script/comparison-algorithm
+      - text: 浅拷贝和深拷贝
+        link: /javascript/ecma-script/shallow-copy-and-deep-copy
+      - text: 表达式与操作符
+        items:
+          - text: 条件访问表达式
+            link: /javascript/ecma-script/expression-and-operator/conditional-access-expression
+          - text: 逻辑表达式
+            link: /javascript/ecma-script/expression-and-operator/logical-expression
+          - text: 空值合并操作符
+            link: /javascript/ecma-script/expression-and-operator/nullish-coalescing-operator
+          - text: 逻辑赋值操作符
+            link: /javascript/ecma-script/expression-and-operator/logical-assignment-operator
+      - text: 基本引用
+        base: /javascript/ecma-script/basic-reference
+        items:
+          - text: Date
+            link: /date
+          - text: 正则表达式
+            link: /reg-exp
+      - text: 集合引用
+        base: /javascript/ecma-script/collection-reference
+        items:
+          - text: Array
+            items:
+              - text: 创建数组
+                link: /array/create-array
+              - text: 迭代数组
+                link: /array/iterate-array
+              - text: 搜索数组
+                link: /array/search-array
+              - text: 数组排序
+                link: /array/sort-array
+              - text: 添加或删除元素
+                link: /array/add-or-remove-element
+              - text: 检测数组
+                link: /array/detect-array
+              - text: 数组扁平化
+                link: /array/flatten-array
+              - text: 切片或连接数组
+                link: /array/slice-or-concat-array
+          - text: Map
+            link: /map
+          - text: Set
+            link: /set
+      - text: 迭代器与生成器
+        items:
+          - text: 迭代器
+            link: /javascript/ecma-script/iterators-and-generators/iterator
+          - text: 自定义迭代器
+            link: /javascript/ecma-script/iterators-and-generators/custom-iterator
+          - text: 生成器
+            link: /javascript/ecma-script/iterators-and-generators/generator
+      - text: JSON
+        items:
+          - text: 什么是 JSON
+            link: /javascript/ecma-script/json/what-is-json
+          - text: JSON 数据格式
+            link: /javascript/ecma-script/json/json-data-format
+          - text: 序列化
+            link: /javascript/ecma-script/json/serialization
+          - text: 反序列化
+            link: /javascript/ecma-script/json/deserialization
+      - text: 函数
+        items:
+          - text: 定义函数
+            link: /javascript/ecma-script/function/define-function
+          - text: 函数参数
+            link: /javascript/ecma-script/function/function-arguments
+          - text: 闭包
+            link: /javascript/ecma-script/function/closure
+      - text: 对象
+        items:
+          - text: 原型
+            link: /javascript/ecma-script/object/prototype
+          - text: 原型链
+            link: /javascript/ecma-script/object/prototype-chain
+      - text: 异步
+        items:
+          - text: 手写 Promise
+            link: /javascript/ecma-script/async/write-promise
\ No newline at end of file
diff --git a/src/.vitepress/sidebars/javascript.yaml b/src/.vitepress/sidebars/javascript.yaml
index 3075226..cdf2891 100644
--- a/src/.vitepress/sidebars/javascript.yaml
+++ b/src/.vitepress/sidebars/javascript.yaml
@@ -1,112 +1,7 @@
-/javascript:
+/javascript/introduction:
   - text: JavaScript 介绍
     items:
       - text: 什么是 JavaScript
         link: /javascript/introduction/what-is-javascript
       - text: JavaScript 发展历程
-        link: /javascript/introduction/history-of-javascript
-  - text: ECMAScript
-    items:
-      - text: ES 的版本
-        link: /javascript/ecma-script/es-version
-      - text: JavaScript 引擎
-        items:
-          - text: 调用栈
-            link: /javascript/ecma-script/javascript-engine/call-stack
-          - text: 作用域
-            link: /javascript/ecma-script/javascript-engine/scope
-          - text: 作用域链
-            link: /javascript/ecma-script/javascript-engine/scope-chain
-          - text: this 关键字
-            link: /javascript/ecma-script/javascript-engine/this-keyword
-          - text: 事件循环
-            link: /javascript/ecma-script/javascript-engine/event-loop
-      - text: 变量声明
-        link: /javascript/ecma-script/variable-declaration
-      - text: 比较算法
-        link: /javascript/ecma-script/comparison-algorithm
-      - text: 浅拷贝和深拷贝
-        link: /javascript/ecma-script/shallow-copy-and-deep-copy
-      - text: 表达式与操作符
-        items:
-          - text: 条件访问表达式
-            link: /javascript/ecma-script/expression-and-operator/conditional-access-expression
-          - text: 逻辑表达式
-            link: /javascript/ecma-script/expression-and-operator/logical-expression
-          - text: 空值合并操作符
-            link: /javascript/ecma-script/expression-and-operator/nullish-coalescing-operator
-          - text: 逻辑赋值操作符
-            link: /javascript/ecma-script/expression-and-operator/logical-assignment-operator
-      - text: 基本引用
-        base: /javascript/ecma-script/basic-reference
-        items:
-          - text: Date
-            link: /date
-          - text: 正则表达式
-            link: /reg-exp
-      - text: 集合引用
-        base: /javascript/ecma-script/collection-reference
-        items:
-          - text: Array
-            items:
-              - text: 创建数组
-                link: /array/create-array
-              - text: 迭代数组
-                link: /array/iterate-array
-              - text: 搜索数组
-                link: /array/search-array
-              - text: 数组排序
-                link: /array/sort-array
-              - text: 添加或删除元素
-                link: /array/add-or-remove-element
-              - text: 检测数组
-                link: /array/detect-array
-              - text: 数组扁平化
-                link: /array/flatten-array
-              - text: 切片或连接数组
-                link: /array/slice-or-concat-array
-          - text: Map
-            link: /map
-          - text: Set
-            link: /set
-      - text: 迭代器与生成器
-        items:
-          - text: 迭代器
-            link: /javascript/ecma-script/iterators-and-generators/iterator
-          - text: 自定义迭代器
-            link: /javascript/ecma-script/iterators-and-generators/custom-iterator
-          - text: 生成器
-            link: /javascript/ecma-script/iterators-and-generators/generator
-      - text: JSON
-        items:
-          - text: 什么是 JSON
-            link: /javascript/ecma-script/json/what-is-json
-          - text: JSON 数据格式
-            link: /javascript/ecma-script/json/json-data-format
-          - text: 序列化
-            link: /javascript/ecma-script/json/serialization
-          - text: 反序列化
-            link: /javascript/ecma-script/json/deserialization
-      - text: 函数
-        items:
-          - text: 定义函数
-            link: /javascript/ecma-script/function/define-function
-          - text: 函数参数
-            link: /javascript/ecma-script/function/function-arguments
-          - text: 闭包
-            link: /javascript/ecma-script/function/closure
-      - text: 对象
-        items:
-          - text: 原型
-            link: /javascript/ecma-script/object/prototype
-          - text: 原型链
-            link: /javascript/ecma-script/object/prototype-chain
-      - text: 异步
-        items:
-          - text: 手写 Promise
-            link: /javascript/ecma-script/async/write-promise
-  - text: BOM
-    base: /javascript/bom
-    items:
-      - text: screen
-        link: /screen
\ No newline at end of file
+        link: /javascript/introduction/history-of-javascript
\ No newline at end of file
diff --git a/src/index.md b/src/index.md
index eeec9c0..bd6cb8e 100644
--- a/src/index.md
+++ b/src/index.md
@@ -82,7 +82,10 @@ import MarkMap from './MarkMap.vue';
         - 异步
           - [手写 Promise](javascript/ecma-script/async/write-promise)
       - BOM
+        - [什么是 BOM](javascript/bom/what-is-bom)
         - [screen](javascript/bom/screen)
+      - DOM
+        - [什么是 DOM](javascript/dom/what-is-dom)
   - 前端
     - React
       - 核心概念
diff --git a/src/javascript/bom/what-is-bom.md b/src/javascript/bom/what-is-bom.md
new file mode 100644
index 0000000..9cc5adb
--- /dev/null
+++ b/src/javascript/bom/what-is-bom.md
@@ -0,0 +1,5 @@
+# 什么是 BOM
+
+BOM 的全称是“浏览器对象模型”，通常用来描述浏览器提供的对象，允许开发中与浏览器窗口进行交互。
+
+BOM 的核心是`window`对象，它代表浏览器的一个窗口或框架，并提供控制浏览器的功能。
diff --git a/src/javascript/dom/what-is-dom.md b/src/javascript/dom/what-is-dom.md
new file mode 100644
index 0000000..7bc754d
--- /dev/null
+++ b/src/javascript/dom/what-is-dom.md
@@ -0,0 +1,5 @@
+# 什么是 DOM
+
+DOM 的全称是“文档对象模型”，它是 HTML 和 XML 文档的编程接口。
+
+DOM 脱胎于网景和微软早期的动态 HTML，DOM 现在是真正的跨平台、语言无关的表示和操作网页的方式