跳到主要内容
JavaScript 基础详解：核心语法与 DOM 操作指南 | 极客日志
JavaScript Node.js 大前端 算法
JavaScript 基础详解：核心语法与 DOM 操作指南 JavaScript 基础教程涵盖核心语法、数据类型、运算符、控制流及函数定义。内容涉及 DOM 操作、事件处理、内置对象（String、Array、Date、Math）以及计时器功能。通过实际代码示例讲解变量声明、流程控制、字符串与数组操作，帮助开发者理解如何在网页中实现动态交互与逻辑处理。
DevStack 发布于 2026/3/16 更新于 2026/5/2 JavaScript 简介
JavaScript 是一种广泛应用于网页开发的脚本语言，它能够使网页变得更加动态和交互性。作为一种客户端脚本语言，JavaScript 可以被嵌入到 HTML 中，并且被所有现代浏览器支持。
JavaScript 的强大之处在于它能够让开发者通过编写简单的代码实现许多复杂的功能。无论是实现页面元素的动态变化、响应用户的交互操作，还是处理表单提交数据，JavaScript 都能够胜任。
HTML、CSS 与 JavaScript 共同构成了现代网页的基石：
HTML ：定义网页内容，如标题、正文、图像等。CSS ：修饰网页组件的外观，如颜色、大小、位置、背景等。JavaScript ：实时更新网页内容，例如从服务器获取数据并更新到页面，修改标签样式，让网页变得生动。
JavaScript 历史
JavaScript 原名 LiveScript，由美国网景（Netscape Communications Corporation）开发，用于对网页操作的脚本语言，也是面向对象的。后来 Sun 公司与网景合作将其更名为 JavaScript。
脚本语言无需编译，可以由解释器直接执行（如 SQL、Python、JavaScript）。它们直接由引擎逐行从上到下解释执行。
需要注意的是，JavaScript 和 Java 完全是两种不同的语言：
JavaScript 是嵌入在网页中的脚本语言，用于对网页进行操作。
Java 是一种后端的高级语言，需要编译。
JavaScript 特点
解释型脚本语言 ：与 C、C++ 等需要先编译再运行的语言不同，JavaScript 代码不需要编译，可以直接运行。面向对象 ：不仅可以创建对象，也能操作使用已有的对象。弱类型 ：对使用的数据类型没有严格要求，变量初始化为任意类型后也可以随时改变类型。动态性 ：采用事件驱动，不需要借助 Web 服务器即可对用户的输入做出响应，如点击或滚动窗口时直接响应。跨平台 ：不依赖操作系统，只要系统上的浏览器支持 JavaScript 即可运行。
第一个 JavaScript 程序
JavaScript 程序不能独立运行，只能在宿主环境中执行。一般情况下将代码放在网页中，借助浏览器环境来运行。
在 HTML 文档中嵌入 JavaScript
在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签。具体步骤如下：
新建 HTML 文档。
在 <head> 标签或者 <body> 标签中插入 <script> 标签。
在 <script> 标签中编写 JavaScript 代码。
示例：
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
< script
alert ("你好 JavaScript" )
</script >
</head >
<body >
</body >
</html >
注：alert('welcome!') 会弹出提示对话框。
在脚本文件中编写 JavaScript 代码 JavaScript 代码也可以放在独立的 .js 脚本文件中。使用任何文本编辑器都可以编辑。
新建 .js 文件。
打开文本编写 JavaScript 代码，例如 alert("你好");。
保存文件，并在 HTML 中引入。
<script type ="text/javascript" src ="test.js" > </script >
注意：定义了 src 属性的 <script> 标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入的代码将被忽略。
JavaScript 代码执行顺序 JavaScript 代码可以写在 HTML 文档的 <head> 标签与 <body> 标签中，写在不同标签中的执行顺序不同。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
<script >
alert ("写在<head>标签中" )
</script >
</head >
<body >
<script >
alert ("写在<body>标签中" )
</script >
</body >
</html >
从执行效果可以看出，在 HTML 文档中先执行在 <head> 标签中的 JavaScript 代码，后执行 <body> 标签中的代码。
基本语法
变量
数据类型
数值型 (number) ：包括整型和浮点型。布尔型 (boolean) ：逻辑值，true 或 false。字符串型 ：由单个或多个字符组成，使用单引号或双引号说明。undefined 类型 ：变量未赋值时的默认类型，值为 undefined。Object 类型 ：对象类型。
算术运算符 算术运算符用来执行常见的数学运算，例如加法、减法、乘法、除法等。
var x = 10 ;
var y = 4 ;
console .log ("x + y =" , x + y);
console .log ("x - y =" , x - y);
console .log ("x * y =" , x * y);
console .log ("x / y =" , x / y);
console .log ("x % y =" , x % y);
var a = "10" ;
var b = 5 ;
var c = 10 ;
var d = "a" ;
赋值运算 var x = 10 ;
x += 20 ;
console .log (x);
var x = 12 , y = 7 ;
x -= y;
console .log (x);
x = 5 ;
x *= 25 ;
console .log (x);
x = 50 ;
x /= 10 ;
console .log (x);
x = 100 ;
x %= 15 ;
console .log (x);
字符串运算符 JavaScript 中的 + 和 += 运算符除了可以进行数学运算外，还可以用来拼接字符串。
+ 运算符表示将运算符左右两侧的字符串拼接到一起。+= 运算符表示将字符串进行拼接，并重写赋值。 var x = "Hello " ;
var y = "World!" ;
var z = x + y;
console .log (z);
x += y;
console .log (x);
自增、自减运算符 自增、自减运算符用来对变量的值进行自增（+1）、自减（-1）操作。
var x;
x = 10 ;
console .log (++x);
console .log (x);
x = 10 ;
console .log (x++);
console .log (x);
x = 10 ;
console .log (--x);
console .log (x);
x = 10 ;
console .log (x--);
console .log (x);
比较运算符 比较运算符会比较左右两侧的数据，最后返回一个布尔值（true 或者 false）。
var x = 25 ;
var y = 35 ;
var z = "25" ;
console .log (x == z);
console .log (x === z);
console .log (x != y);
console .log (x !== z);
console .log (x < y);
console .log (x > y);
console .log (x <= y);
console .log (x >= y);
逻辑运算符 逻辑运算符通常用来组合多个表达式，逻辑运算符的运算结果是一个布尔值（true/false）。
var year = 2021 ;
if ((year % 400 == 0 ) || ((year % 100 != 0 ) && (year % 4 == 0 ))){
console .log (year + " 年是闰年。" );
} else {
console .log (year + " 年是平年。" );
}
条件运算符 JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
var result = (条件表达式)?结果 1 :结果 2
当条件成立返回 ? 后的内容，否则返回 : 后的内容。
var c = 1 ;
var b = 2 ;
var a = c > b ? c : b;
控制语句
选择结构
单一选择结构 (if)
二路选择结构 (if/else)
多路选择结构 (switch)
循环结构
由计数器控制的循环 (for)
在循环的开头测试表达式 (while)
在循环的末尾测试表达式 (do/while)
break continue
JavaScript 中的选择结构和其他语言是相通的。
函数
定义函数 function functionName ([arguments ] ){
javascript statements;
[return expression]
}
function: 表示函数定义的关键字。functionName: 表示函数名。arguments: 传递给函数的参数列表，各个参数之间用逗号隔开，可以为空。statements: 表示实现函数功能的函数体。return expression: 表示函数将返回 expression 的值，同样是可选的语句。 function sayHello (name ){
alert ("Hello " + name);
return 0 ;
}
函数调用
在 <script> 标签中直接调用。
在其他函数中调用。
通过组件调用。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
<script >
function test (text ){
alert (text);
}
test ("函数在<script>标签中调用" );
function a (test ("函数在其他函数中调用" );
}
a ();
</script >
</head >
<body >
<input type ="button" value ="测试" onclick ="test('组件调用函数')" />
</body >
</html >
全局函数
parseInt(arg)：把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字分别转换成整数，如果以字母开头，则返回 "NaN"。parseFloat(arg)：把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回 "NaN"。typeof (arg)：返回 arg 值的数据类型。eval(arg)：可运算某个字符串。alert(String)：可以在浏览器中弹出一个提示框，里面的内容是 String。console.log(String)：在控制面板上打印 String。
事件 JS 事件（event）是当用户与网页进行交互时发生的事情，例如单击某个链接或按钮，在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。
onclick()：鼠标点击时。onblur()：标签失去焦点。onfocus()：标签获得焦点。onmouseover()：鼠标被移到某标签之上。onmouseout()：鼠标从某标签移开。onload()：是在网页加载完毕后触发相应的事件处理程序。onchange()：是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。 <!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
</head >
<body >
<div >
onclick:<input type ="button" value ="onclick" onclick ="test('pink')" />
<br />
onblur:<input type ="text" onblur ="test('red')" />
<br />
onfocus:<input type ="text" onfocus ="test('blue')" />
<br />
onmouseover:<input type ="text" onmouseover = "test('black')" />
<br />
onmouseout:<input type ="text" onmouseout = "test('aqua')" />
<br />
onchange:<input type ="text" onchange = "test('yellow')" />
</div >
<script >
var obj = document .getElementById ("div" );
function test (color ) {
obj.style .backgroundColor = color;
}
</script >
</body >
</html >
内置对象
1. String 字符串
charAt(n)：返回该字符串位于第 n 位的单个字符。indexOf(char)：返回指定 char 首次出现的位置。lastIndexOf(char)：跟 indexOf() 相似，不过是从后边开始找。substring(start,end)：返回原字符串的子字符串，该字符串是原字符串从 start 位置到 end 位置的前一位置的一段。substr(start,length)：返回原字符串的子字符串，该字符串是原字符串从 start 位置开始，长度为 length 的一段。split(分隔符字符)：返回一个数组，该数组是从字符串对象中分离开来的，决定了分离的地方，它本身不会包含在所返回的数组中。 var string = new String ("String 字符串 r2323" );
console .log (string.charAt (2 ));
console .log (string.indexOf ('r' ));
console .log (string.lastIndexOf ('r' ));
console .log (string.substring (2 ,5 ));
console .log (string.substr (2 ,3 ));
console .log (string.split ('r' ));
2. Array 数组 数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。
这样就定义了一个空数组。以后要添加数组元素，就用：
var arr = new Array (, , ...);
var a = new Array ();
a[0 ] = 1 ;
a[1 ] = "aaa" ;
a[5 ] = true ;
var b = new Array (1 ,2 ,3 ,4 ,5 );
var a = [1 ,2 ,3 ,4 ,5 ];
a[5 ] = 3 ;
join()：返回一个字符串，该字符串把数组中的各个元素串起来，用置于元素与元素之间。reverse()：使数组中的元素顺序反过来。如果对数组 [1, 2, 3] 使用这个方法，它将使数组变成：[3, 2, 1]。sort()：使数组中的元素按照一定的顺序排列。如果不指定，则按字母顺序排列。对数字排序需要调用排序函数 ：function sortNumber(a,b){ return a - b; } var arr = [1 , 11 , 12 , 55 , 66 , 8 , 7 , 9 ];
console .log (arr.join ());
var str = "Hello World" ;
var reversedStr = str.split ("" ).reverse ().join ("" );
console .log (reversedStr);
console .log (arr.sort ());
arr.sort (function (a, b ) { return a - b; });
console .log (arr);
arr.sort (function (a, b ) { return b - a; });
console .log (arr);
3. Date
new Date()：返回当日的日期和时间。getFullYear()：返回四位数字年份。getDate()：返回一个月中的某一天 (1 ~ 31)。getMonth()：返回月份 (0 ~ 11)。getDay()：返回一周中的某一天 (0 ~ 6)。getHours()：返回 Date 对象的小时 (0 ~ 23)。getMinutes()：返回 Date 对象的分钟 (0 ~ 59)。getSeconds()：返回 Date 对象的秒数 (0 ~ 59)。 <!DOCTYPE html >
<html >
<head >
<title > </title >
<script >
function addTextToDiv (var myDiv = document .getElementById ('myDiv' );
var currentDate = new Date ();
var year = currentDate.getFullYear ();
var month = currentDate.getMonth () + 1 ;
var day = currentDate.getDate ();
var hour = currentDate.getHours ();
var minutes = currentDate.getMinutes ();
var seconds = currentDate.getSeconds ();
myDiv.innerHTML = year + "年" + month + "月" + day + "日 " + hour + ":" + minutes + ":" + seconds;
}
setInterval ("addTextToDiv()" ,1000 );
</script >
</head >
<body onload ="addTextToDiv()" >
<div > </div >
</body >
</html >
4. Math
Math.abs(x)：绝对值计算；Math.pow(x,y)：数的幂；x 的 y 次幂Math.sqrt(x)：计算平方根；Math.ceil(x)：对一个数进行上舍入Math.floor(x)：对一个数进行下舍入Math.round(x)：把一个数四舍五入为最接近的整数Math.random()：返回 0 ~ 1 之间的随机数Math.max(x,y)：返回 x 和 y 中的最大值Math.min(x,y)：返回 x 和 y 中的最小值
Html DOM DOM 是 Document Object Model 文档对象（网页中的标签）模型的缩写。
通过 HTML DOM，可用 JavaScript 操作 HTML 文档的所有标签。
1. 查找元素 如果我们想对标签进行操作，我们就得找到他们，那我们怎么找到他们呢？有四种方法可以找到他们：
通过 id 找到 HTML 标签 ：document.getElementById("id");通过标签名找到 HTML 标签 ：document.getElementsByTagName("p");通过类名找到 HTML 标签 ：document.getElementsByClassName("p");通过 name 找到 HTML 标签 ：document.getElementsByName("name");
2. 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 标签的内容。改变 HTML 标签的属性：
document .getElementById ("username" ).value ="new value" ;
代码演示：演示代码就让通过 JS 修改按钮的 value 值，让按钮的 value 值从测试变到按钮。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
<script >
function test (document .getElementById ("button" ).value = "按钮" ;
}
</script >
</head >
<body >
<input type ="button" value ="测试" onclick ="test()" />
</body >
</html >
document .getElementById ("image" ).src ="new.jpg" ;
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
<script >
function test (document .getElementById ("img" ).src = "img/3.jpg" ;
}
</script >
</head >
<body >
<input type ="button" value ="测试" onclick ="test()" />
<img src ="img/1.jpg" />
</body >
</html >
修改 HTML 内容的最简单的方法是使用 innerHTML 属性：
document .getElementById ("div" ).innerHTML =new HTML
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
<script >
function test (document .getElementById ("div" ).innerHTML = "加油胜利就在前方" ;
}
</script >
</head >
<body >
<input type ="button" value ="测试" onclick ="test()" />
<div > 你好，登山者</div >
</body >
</html >
这里只是举例说明了这几个，我们还有更多的操作，自己动动手，去发现更多吧。
3. 改变 CSS HTML DOM 允许 JavaScript 改变 HTML 标签的样式。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
<script >
function test (document .getElementById ("div" ).innerHTML = "加油胜利就在前方" ;
}
function color (document .getElementById ("div" ).style .color = "pink" ;
}
</script >
</head >
<body >
<input type ="button" value ="测试" onclick ="test()" />
<div > 你好，登山者</div >
<input type ="button" value ="修改颜色" onclick ="color()" />
</body >
</html >
这里用一个实例：使一个 div 的背景颜色修改并且循环。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
<script >
var color = ['red' ,'green' ,'blue' ];
var i = 0 ;
function test (var obj1 = document .getElementById ("text" );
var obj2 = document .getElementById ("button" );
obj1.style .backgroundColor = color[i];
i++;
if (i==color.length ){
i=0 ;
}
obj2.value = color[i];
}
</script >
</head >
<body >
<div > </div >
<input type ="button" value ="red" onclick ="test()" />
</body >
</html >
计时 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
setTimeout 方法：setTimeout("函数","时间") 未来的某时执行代码。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > setTimeout 示例</title >
<script >
function showMessage (alert ("这是一个 setTimeout 示例！" );
}
setTimeout ("showMessage()" , 3000 );
</script >
</head >
<body >
<h1 > setTimeout 示例</h1 >
<p > 页面加载后将在 3 秒后显示一条消息。</p >
</body >
</html >
clearTimeout() 取消 setTimeout()。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > setTimeout 和 clearTimeout 示例</title >
<script >
var timeoutID;
function showMessage (alert ("这是一个 setTimeout 示例！" );
}
function setupTimeout (setTimeout (showMessage, 3000 );
}
function cancelTimeout (clearTimeout (timeoutID);
alert ("定时器已取消！" );
}
</script >
</head >
<body >
<h1 > setTimeout 和 clearTimeout 示例</h1 >
<p > 页面加载后将在 3 秒后显示一条消息。</p >
<button onclick ="setupTimeout()" > 设置定时器</button >
<button onclick ="cancelTimeout()" > 取消定时器</button >
</body >
</html >
setInterval 方法：setInterval("函数","时间") 每隔指定时间重复调用。
clearInterval() 取消 setInterval()，清除了一个计时器。
<!DOCTYPE html >
<html >
<head >
<meta charset ="utf-8" >
<title > </title >
</head >
<body >
<input type ="text" />
<br />
<br />
<input type ="button" value ="开始" onclick ="startTime()" />
<input type ="button" value ="停止" onclick ="stopTime()" />
<input type ="button" value ="复位" onclick ="fuwei()" />
<script >
var num = 0 ;
var textobj = document .getElementById ("text" );
textobj.value = 0 ;
var index;
function jishi (value = num;
}
function startTime (setInterval ("jishi()" ,1000 );
}
function stopTime (clearInterval (index);
}
function fuwei (0 ;
textobj.value = 0 ;
}
</script >
</body >
</html >
相关免费在线工具 加密/解密文本 使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
Gemini 图片去水印 基于开源反向 Alpha 混合算法去除 Gemini/Nano Banana 图片水印，支持批量处理与下载。 在线工具，Gemini 图片去水印在线工具，online
Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
