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

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

article 2025/3/24 6:05:13

前言

在前端开发的领域中，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操作的新手逐步成长为高手，为前端开发打下坚实的基础。在实际开发中，灵活运用这些知识，结合不断实践和探索，你将能够驾驭复杂的前端项目，创造出令人惊艳的网页应用。

查看全文

http://www.kler.cn/a/596252.html