JavaScript 正则表达式与DOM操作深入解析

wenan__

315人浏览 · 2025-09-29 10:25:24

wenan__ · 2025-09-29 10:25:24 发布

JavaScript 正则表达式与DOM操作深入解析

正则表达式全面掌握

基本概念与应用场景

正则表达式是用于匹配字符串中字符组合的模式，在JavaScript中，正则表达式也是对象。它主要用于：

表单验证：验证用户名只能输入英文字母、数字或下划线，昵称可以输入中文
内容过滤：替换页面内容中的敏感词
数据提取：从字符串中获取特定部分

正则表达式语法详解

// 定义正则表达式
const reg = /表达式/;

// test()方法 - 检测是否匹配
const str = "hello world";
console.log(reg.test(str)); // 返回布尔值

// exec()方法 - 搜索匹配结果
console.log(reg.exec(str)); // 返回数组或null

元字符与普通字符

普通字符：只能匹配相同的字符，如字母和数字
元字符：具有特殊含义的字符，大大提高匹配灵活性

// 普通字符匹配
const reg1 = /abc/; // 只能匹配"abc"

// 元字符匹配 - 匹配26个小写字母
const reg2 = /[a-z]/;

// 常用元字符示例
const patterns = {
    数字: /\d/,           // 匹配数字
    非数字: /\D/,         // 匹配非数字
    单词字符: /\w/,       // 匹配字母、数字、下划线
    非单词字符: /\W/,     // 匹配非单词字符
    空白字符: /\s/,       // 匹配空白字符
    非空白字符: /\S/      // 匹配非空白字符
};

定时器精确控制

定时器的开启与关闭

// 开启定时器 - 每隔指定时间执行函数
setInterval(函数, 间隔时间); // 间隔时间单位：毫秒

// 示例1：匿名函数
setInterval(function() {
    console.log('定时执行任务');
}, 1000);

// 示例2：命名函数
function timerFunction() {
    console.log('定时任务执行');
}
setInterval(timerFunction, 1000);

// 关闭定时器
let timerId = setInterval(function() {
    console.log('定时任务');
}, 1000);

// 在适当条件下关闭定时器
setTimeout(function() {
    clearInterval(timerId);
    console.log('定时器已关闭');
}, 5000);

定时器进阶应用

// 定时器返回的是数字ID
console.log(timerId); // 输出定时器ID

// 多重定时器控制
let timers = [];
for (let i = 0; i < 3; i++) {
    let timer = setInterval(function() {
        console.log(`定时器${i}运行中`);
    }, 1000);
    timers.push(timer);
}

// 批量关闭定时器
function clearAllTimers() {
    timers.forEach(timer => clearInterval(timer));
    timers = [];
}

事件对象深度解析

事件对象的基本使用

// 鼠标移动事件示例
document.onmousemove = function(event) {
    // 获取鼠标坐标 - 相对于浏览器窗口
    console.log('水平坐标:', event.clientX);
    console.log('垂直坐标:', event.clientY);
    
    // 相对于整个页面的坐标
    console.log('页面X坐标:', event.pageX);
    console.log('页面Y坐标:', event.pageY);
};

// 鼠标按下和松开事件
document.onmousedown = function(event) {
    console.log('鼠标按下:', event.button); // 哪个鼠标按钮被按下
};

document.onmouseup = function(event) {
    console.log('鼠标松开');
};

事件冒泡与传播机制

// 事件冒泡示例
document.getElementById('child').onclick = function(event) {
    console.log('子元素被点击');
    // 取消事件冒泡
    event.cancelBubble = true; // 标准方法
    event.stopPropagation();   // 推荐方法
};

// 事件捕获阶段触发
document.getElementById('parent').addEventListener('click', function() {
    console.log('捕获阶段触发');
}, true); // 第三个参数设为true表示捕获阶段触发

// setCapture()方法 - 鼠标事件捕获
function setElementCapture(element) {
    element.setCapture && element.setCapture();
    element.onmousedown = function(event) {
        // 这个元素将捕获所有鼠标按下事件
    };
}

鼠标滚轮事件处理

// 标准浏览器滚轮事件
document.onmousewheel = function(event) {
    console.log('滚轮滚动:', event.wheelDelta);
};

// 火狐浏览器兼容处理
document.addEventListener('DOMMouseScroll', function(event) {
    console.log('火狐滚轮事件:', event.detail);
}, false);

// 跨浏览器滚轮事件处理
function handleMouseWheel(event) {
    event = event || window.event;
    let delta = event.detail ? -event.detail : event.wheelDelta;
    console.log('滚轮变化量:', delta);
}

DOM操作高级技巧

元素内容操作

// innerHTML - 获取和设置HTML内容
const element = document.getElementById('myElement');
console.log('内部HTML:', element.innerHTML);
element.innerHTML = '<span>新内容</span>';

// innerText - 获取和设置文本内容
console.log('内部文本:', element.innerText);
element.innerText = '纯文本内容';

// textContent - 类似innerText，但会获取隐藏元素内容
console.log('文本内容:', element.textContent);

节点关系与遍历

// 获取子节点
const parent = document.getElementById('parent');
console.log('所有子节点:', parent.childNodes); // 包含文本节点
console.log('子元素节点:', parent.children);   // 仅元素节点

// 获取第一个和最后一个子元素
console.log('第一个子元素:', parent.firstElementChild);
console.log('最后一个子元素:', parent.lastElementChild);

// 获取兄弟元素
const current = document.getElementById('current');
console.log('前一个兄弟元素:', current.previousElementSibling);
console.log('下一个兄弟元素:', current.nextElementSibling);

// 获取父节点
console.log('父节点:', current.parentNode);
console.log('父元素:', current.parentElement);

表单元素操作

// 文本框值操作
const textInput = document.getElementById('textInput');
console.log('文本框值:', textInput.value);
textInput.value = '新值';

// 多选框状态操作
const checkbox = document.getElementById('myCheckbox');
console.log('选中状态:', checkbox.checked);
checkbox.checked = true;

// 下拉选择框
const select = document.getElementById('mySelect');
console.log('选中值:', select.value);
console.log('选中索引:', select.selectedIndex);

响应函数中的this指向

// 响应函数中的this指向绑定事件的元素
document.getElementById('myButton').onclick = function() {
    console.log('this指向:', this); // 指向按钮元素
    console.log('元素ID:', this.id);
};

// 使用addEventListener时this同样指向绑定元素
document.getElementById('myButton').addEventListener('click', function(event) {
    console.log('this指向:', this);
    console.log('事件目标:', event.target);
});