《前端秘籍：JS语法+DOM操作，从新手到高手》

前言

在前端开发的领域中，JavaScript（简称JS）是核心技能之一，而DOM操作则是JS与网页交互的关键桥梁。无论是初学者还是希望进阶的开发者，掌握JS语法和DOM操作都是必不可少的。本文将带你从基础到深入，逐步揭开JS与DOM操作的神秘面纱，让你从新手成长为高手。

JavaScript基础语法

变量

在JS中，使用var、let和const来声明变量。var是传统的变量声明方式，但存在变量提升和作用域问题；let和const是ES6引入的块级作用域变量声明方式，let声明可变变量，const声明常量。

var a = 10;
let b = 20;
const c = 30;

数据类型

JS中有7种基本数据类型：undefined、null、boolean、number、string、symbol（ES6新增）、bigint（ES2020新增），以及一种复杂数据类型object。

let num = 123; // number
let str = "hello"; // string
let bool = true; // boolean
let obj = { name: "Alice" }; // object

 

运算符

JS中的运算符包括算术运算符（+、-、*、/等）、比较运算符（==、===、>、<等）、逻辑运算符（&&、||、!）等。

let sum = 10 + 20; // 算术运算
if (sum > 25 && sum < 30) { // 比较和逻辑运算console.log("条件成立");
}

 

输入与输出

常用的输入方式是prompt()函数，输出方式有console.log()、alert()等。

let name = prompt("请输入你的名字");
console.log("你好，" + name);
alert("欢迎来到前端世界");

 

分支

JS中的分支语句主要有if...else和switch。

if (score >= 90) {console.log("优秀");
} else if (score >= 60) {console.log("及格");
} else {console.log("不及格");
}switch (day) {case 1:console.log("周一");break;case 2:console.log("周二");break;default:console.log("其他");
}

循环

JS中的循环语句包括for、while、do...while。

for (let i = 0; i < 5; i++) {console.log(i);
}let j = 0;
while (j < 5) {console.log(j);j++;
}let k = 0;
do {console.log(k);k++;
} while (k < 5);

 

函数

函数是JS中的重要组成部分，可以使用function关键字或箭头函数来定义。

function add(a, b) {return a + b;
}let subtract = (a, b) => {return a - b;
};

字符串

字符串是JS中的基础数据类型之一，可以使用双引号"或单引号'定义。

 

let str1 = "hello";
let str2 = 'world';
let str3 = `这是一个模板字符串，可以嵌入变量：${str1}`;

 

数组

数组用于存储多个值，可以通过索引来访问元素。

let arr = [1, 2, 3, 4, 5];
console.log(arr[0]); // 输出1

对象

对象是由键值对组成的无序集合。

let person = {name: "Alice",age: 20,hobbies: ["reading", "music"]
};
console.log(person.name); // 输出Alice

 

Math、JSON和Date

Math

Math对象提供了丰富的数学函数和常量。

console.log(Math.PI); // 输出π
console.log(Math.sqrt(16)); // 输出4

 

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。

let obj = { name: "Alice" };
let jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 输出"{\"name\":\"Alice\"}"

DOM操作

DOM（Document Object Model）是HTML和XML文档的编程接口，通过DOM可以操作网页的结构和内容。

获取元素

getElement系列

• getElementById()：通过元素的id属性获取单个元素。

• getElementsByClassName()：通过元素的class属性获取元素集合。

• getElementsByTagName()：通过元素的标签名获取元素集合。

• let divById = document.getElementById("myDiv");
  let divsByClass = document.getElementsByClassName("myClass");
  let divsByTag = document.getElementsByTagName("div");

  querySelector系列

• querySelector()：返回匹配指定CSS选择器的第一个元素。

• querySelectorAll()：返回匹配指定CSS选择器的所有元素。

• let firstDiv = document.querySelector(".myClass");
  let allDivs = document.querySelectorAll(".myClass");

绑定事件

window事件

• onload：页面加载完成后触发。

• onresize：窗口大小改变时触发。

• onscroll：滚动条滚动时触发。

  window.onload = function() {console.log("页面加载完成");
  };

  鼠标事件

• onclick：鼠标单击时触发。

• ondblclick：鼠标双击时触发。

• oncontextmenu：鼠标右键单击时触发。

• onmousedown、onmouseup、onmouseenter、onmouseleave、onmousemove等。

  element.onclick = function() {console.log("元素被点击");
  };

  键盘事件

• onkeydown：键盘按键按下时触发。

• onkeypress：键盘字符键按下时触发。

• onkeyup：键盘按键松开时触发。

element.onkeydown = function(event) {console.log("按键按下：" + event.key);
};

input和form事件

• onfocus、onblur：元素获得或失去焦点时触发。

• onchange、oninput：元素值改变时触发。

• onsubmit：表单提交时触发。

  inputElement.onfocus = function() {console.log("输入框获得焦点");
  };
  formElement.onsubmit = function() {console.log("表单提交");return false; // 阻止表单提交
  };

设置和获取内容、属性和样式

内容

• innerText：获取或设置元素的文本内容。

• innerHTML：获取或设置元素的HTML内容。

  let text = element.innerText;
  element.innerHTML = "<b>新的内容</b>";

  属性

• class相关操作：classList提供add()、remove()、contains()、toggle()方法。

• setAttribute()、getAttribute()、removeAttribute()、hasAttribute()：操作元素的属性。

• 直接通过this.属性名或this.属性名 = value获取或设置属性。

  element.classList.add("newClass");
  element.setAttribute("title", "这是一个标题");
  let title = element.getAttribute("title");

样式

• 设置样式：this.style.样式属性名 = 样式属性值。

• 获取样式：this.style.样式属性名获取行内样式，getComputedStyle(this).样式属性名获取计算后的样式。

  element.style.color = "red";
  let color = getComputedStyle(element).color;

  相关元素

• parentElement：获取父元素。

• children：获取子元素集合，firstElementChild和lastElementChild分别获取第一个和最后一个子元素。

• previousElementSibling、nextElementSibling：获取前一个和后一个兄弟元素。

  let parent = element.parentElement;
  let firstChild = element.firstElementChild;
  let nextSibling = element.nextElementSibling;

  创建和删除元素

• 创建元素：createElement("标签名")。

• 插入元素：父元素.appendChild(子元素)。

• 删除元素：元素.remove()。

  let newDiv = document.createElement("div");
  newDiv.textContent = "新元素";
  parentElement.appendChild(newDiv);
  newDiv.remove();

  案例

• 一、登录与注册

• <!DOCTYPE html>
  <html lang="en">
  <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页签案例</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f4f4f4;}.container {                                                                               background: white;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 300px;}.tabs {display: flex;justify-content: space-around;margin-bottom: 20px;}.tab {cursor: pointer;padding: 10px;border-bottom: 2px solid transparent;}.tab.active {border-bottom: 2px solid #007BFF;color: #007BFF;}.form-group {margin-bottom: 15px;}.form-group label {display: block;margin-bottom: 5px;}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;}.form-group button {width: 100%;padding: 10px;background-color: #007BFF;color: white;border: none;cursor: pointer;}.form-group button:hover {background-color: #0056b3;}.hidden {display: none;}</style>
  </head>
  <body><div class="container"><div class="tabs"><div class="tab active" data-tab="login">登录</div><div class="tab" data-tab="register">注册</div></div><div id="login-form" class="form"><div class="form-group"><label for="login-username">用户名</label><input type="text" id="login-username" placeholder="请输入用户名"></div><div class="form-group"><label for="login-password">密码</label><input type="password" id="login-password" placeholder="请输入密码"></div><div class="form-group"><button onclick="handleLogin()">登录</button></div></div><div id="register-form" class="form hidden"><div class="form-group"><label for="register-username">用户名</label><input type="text" id="register-username" placeholder="请输入用户名"></div><div class="form-group"><label for="register-password">密码</label><input type="password" id="register-password" placeholder="请输入密码"></div><div class="form-group"><button onclick="handleRegister()">注册</button></div></div></div><script>// 获取 DOM 元素const tabs = document.querySelectorAll('.tab');const loginForm = document.getElementById('login-form');const registerForm = document.getElementById('register-form');// 切换页签tabs.forEach(tab => {tab.addEventListener('click', () => {// 移除所有页签的 active 类tabs.forEach(t => t.classList.remove('active'));// 添加 active 类到当前点击的页签tab.classList.add('active');// 根据页签切换显示的表单const tabName = tab.getAttribute('data-tab');if (tabName === 'login') {loginForm.classList.remove('hidden');registerForm.classList.add('hidden');} else if (tabName === 'register') {registerForm.classList.remove('hidden');loginForm.classList.add('hidden');}});});// 登录处理函数function handleLogin() {const username = document.getElementById('login-username').value;const password = document.getElementById('login-password').value;alert(`登录请求：用户名=${username}, 密码=${password}`);}// 注册处理函数function handleRegister() {const username = document.getElementById('register-username').value;const password = document.getElementById('register-password').value;alert(`注册请求：用户名=${username}, 密码=${password}`);}</script>
  </body>
  </html>

总结

本文系统地介绍了JavaScript的基础语法和DOM操作的核心知识点，从变量、数据类型、运算符等基础内容，到函数、字符串、数组、对象等进阶知识，再到Math、JSON、Date等实用对象，最后深入探讨了DOM操作的各个方面，包括获取元素、绑定事件、设置和获取内容、属性、样式以及元素的创建和删除等。通过学习这些内容，你可以从JS和DOM操作的新手逐步成长为高手，为前端开发打下坚实的基础。在实际开发中，灵活运用这些知识，结合不断实践和探索，你将能够驾驭复杂的前端项目，创造出令人惊艳的网页应用。