JavaScript 零基础核心入门｜DOM操作 + 运算符 + 流程控制 最全实战笔记
很多新手学 JS 都是碎片化学习，DOM 操作、定时器、数据类型、循环判断、运算符一堆知识点混在一起，越学越乱。
今天我把前端最核心、最常用的原生 JS 基础知识点整合为一篇实战笔记，所有代码均可直接复制运行，覆盖页面操作、动态时间、样式控制、数据运算、条件判断、循环语句、跳出语法，零基础也能一次性吃透 JS 入门核心！
一、DOM 基础操作：操控页面内容与样式
DOM 操作是 JS 核心能力，作用是 通过 JS 修改页面的文本、样式、显示状态，实现页面动态效果。
- 修改页面文本内容 innerHTML
可以动态给页面标签赋值，支持纯文本、标签内容渲染。
// 获取类名为 con 的标签，修改内部文本
document.getElementsByClassName(‘con’)[0].innerHTML = ‘你好’;
// 动态渲染系统当前时间
document.getElementsByClassName(‘con’)[0].innerHTML = new Date();
2. 动态修改元素样式
通过 style 属性可以直接修改元素颜色、显示隐藏等行内样式。
// 修改文字颜色为蓝色
function Change() {
document.getElementsByClassName(‘con’)[0].style.color = “blue”;
}
// 隐藏元素：display:none 彻底隐藏，不占页面位置
function Hidebutton() {
document.getElementsByClassName(‘con’)[0].style.display = “none”
}
// 显示元素：display:block 恢复块状显示
function showbutton() {
document.getElementsByClassName(‘con’)[0].style.display = “block”
}
3. 全局页面事件：点击修改背景色
给整个页面绑定点击事件，任意位置点击即可触发样式修改。
// 页面任意点击，背景色变为珊瑚色
document.addEventListener(“click”, myFunc);
function myFunc() {
document.body.style.backgroundColor = “coral”
}
4. 定时器实战：实时动态时钟
setInterval 循环定时器，每隔指定毫秒执行一次代码，适合时钟、轮播、倒计时场景。
// 每隔1秒更新一次时间
let interst = setInterval(turnovertime, 1000);
function turnovertime() {
// 获取当前系统时间
let date = new Date();
// 渲染时分秒到页面
let letme = document.getElementsByClassName(‘schedule’)[0];
letme.innerHTML = date.getHours() + ‘:’ + date.getMinutes() + ‘:’ + date.getSeconds();
}
5. document.write 页面输出
直接将内容写入当前文档页面，适合新手调试演示。
document.write(‘你好’);
二、JS 五大基础数据类型（入门必记）
JS 所有变量都离不开这几种基础类型，是代码编写的根基：
// 1. 数字类型 Number：整数、小数、运算
let arr = 9;
// 2. 数组类型 Array：存储一组数据
let arr = [1,2,3];
// 3. 对象类型 Object：存储键值对数据，描述事物属性
let arr = {
name:‘小白’,
price:1222
}
// 4. 字符串类型 String：文本内容
let arr = ‘’;
// 5. 布尔类型 Boolean：true / false（后续判断专用）
三、JS 全部算术运算符（日常运算全覆盖）
用于数字加减乘除、幂运算、取余、自增自减，是数据计算的基础。
let arr = 30;
let err = 20;
let srr = arr + err; // 加法
let srr = arr - err; // 减法
let srr = arr * err; // 乘法
let srr = arr ** err; // 幂运算：底数**指数
let srr = arr / 3; // 除法
let srr = arr % 3; // 取余数（判断奇偶、循环取值常用）
// 自增自减
arr++ // 后置自增
arr-- // 后置自减
// 赋值运算（先运算再赋值）
arr += 20;
arr -= 20;
arr *= 3;
arr /= 2;
arr **= 2;
arr %= 3;
四、比较运算符 + 逻辑运算符（判断核心）
所有 if 判断、条件筛选、表单校验 都依赖这两组运算符，返回结果只有 true / false。
- 比较运算符
document.write(arr == 10); // 宽松相等：只判断值，不判断类型
document.write(arr === 10); // 严格相等：值+类型全部相同才为真（开发首选）
document.write(arr != 20); // 值不相等为真
document.write(arr !== 10); // 值不同 或 类型不同 为真
document.write(arr > 20); // 大于
document.write(arr < 20); // 小于
document.write(arr >= 20); // 大于等于
document.write(arr <= 20); // 小于等于 - 逻辑运算符
document.write((arr>20) && (err>30)); // 逻辑与：两边都真才为真
document.write((arr>20) || (err>30)); // 逻辑或：一边为真即为真
document.write(!(err>30)); // 逻辑非：取反，真变假、假变真 - 三元表达式（极简判断）
替代简单 if-else，一行代码完成判断赋值。
// 条件 ? 成立执行 : 不成立执行
document.write(arr>50 ? ‘是’ : ‘否’);
五、流程控制：条件判断 + 循环语句
流程控制是代码的灵魂，决定代码什么时候执行、重复执行、跳过执行。 - if / if-else / else if 条件判断
let arr = 30;
let err = 20;
// 单条件判断
if(arr > err){
console.log(‘是’)
}
// 二选一判断
if(arr>50){
console.log(‘是’)
}else{
console.log(‘否’)
}
// 多条件分支判断
if (arr > 20) {
console.log(‘是’)
} else if (err > 10) {
console.log(‘是’)
}
2. while 循环（先判断后执行）
适用场景：不确定循环次数，满足条件就重复执行，不满足直接不执行。
while(arr<90){
document.write(‘现有数量’+ arr)
arr++
}
3. do-while 循环（先执行后判断）
特点：最少执行一次，适合弹窗校验、倒计时、接口分页等场景。
do{
document.write(‘数量’+ arr +“
” )
arr++
}while(arr<35)
六、循环跳出语句：break + continue
用于精准控制循环，避免无效遍历，提升代码性能。
- break：终止整个循环
找到目标条件后，直接结束所有循环，不再执行。
for(let i = 0; i < 20; i++){
if(i === 19){
break; // 直接跳出整个循环
}
console.log(‘数量’+i)
} - continue：跳过本次循环
只跳过当前这一次遍历，后续循环继续执行，用于过滤无效数据。
for (let i = 0; i < 20; i++) {
if (i === 10) {
continue; // 跳过i=10这一次，继续下一次
}
console.log(‘数量’ + i)
}
七、完整可运行整合案例
将以上所有知识点整合，可直接复制到本地运行，直观看到所有效果：
<script> // 1. 修改文本 // document.getElementsByClassName('con')[0].innerHTML='你好' // document.getElementsByClassName('con')[0].innerHTML=new Date() // 2. 修改颜色 function Change() { document.getElementsByClassName('con')[0].style.color = "blue"; } // 隐藏元素 function Hidebutton() { document.getElementsByClassName('con')[0].style.display = "none" } // 显示元素 function showbutton() { document.getElementsByClassName('con')[0].style.display = "block" } // 3. 页面点击换色 document.addEventListener("click",myFunc); function myFunc(){ document.body.style.backgroundColor="coral" } // 4. 实时时钟 let interst = setInterval(turnovertime, 1000) function turnovertime() { let date = new Date(); let letme = document.getElementsByClassName('schedule')[0] letme.innerHTML = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); } // 5. 基础运算、判断、循环可在控制台调试 </script>