本文共 2176 字，大约阅读时间需要 7 分钟。

正则表达式与DOM操作

正则表达式

概述

正则表达式用于描述文本内容的匹配规则，是一种强大的文本检索工具。在网页开发中，尤其是注册、验证、格式化输入等场合，正则表达式应用广泛。

创建方法

正则表达式有两种主要创建方式：

var reg = new RegExp(/表达式/);

2. 使用字面量：

var reg = /表达式/;

常用修饰符

3. ^ 和 $：

   • ^：匹配字符串开头
   • $：匹配字符串结尾
   • 综合使用时，表示严格匹配整个字符串。

4. i、m和g：

   • i：忽略大小写
   • m：^和$匹配行首和行尾
   • g：全局匹配

5. 量词：

   • ?：匹配零或一
   • *：匹配零或多个
   • +：匹配一或多个
   • quantifier digits：如{4}表示4-4次重复

6. 范围类：

   • [a-z]：匹配小写字母
   • [A-Z]：匹配大写字母
   • [0-9]：匹配数字
   • [a-zA-Z0-9]：匹配字母和数字

7. 预定义字符：

   • \w：匹配单词字符（字母、数字、下划线）
   • \d：匹配所有数字字符
   • \D：匹配所有非数字字符
   • \s：匹配所有空格字符
   • \b：单词边界

实例

// 匹配"abc"var reg = /abc/;//匹配不包含"abc"var reg = /[^abcv]/;//匹配包含"a"或"b"var reg = /a|b/;

DOM操作

父节点获取

8. parentNode：返回父节点元素。
9. parentElement：返回父元素节点，返回null若父节点不存在。

子节点获取

10. childNodes：返回该节点的所有子节点，按递进序列。
11. firstElementChild：返回第一个子元素节点。
12. lastElementChild：返回最后一个子元素节点。
13. firstChild：返回第一个子节点（包括文节点）。
14. lastChild：返回最后一个子节点（包括文节点）。

兄弟节点获取

15. nextElementSibling：返回当前节点的下一个兄弟节点。
16. previousElementSibling：返回当前节点的上一个兄弟节点。

节点操作

17. 创建节点：

var li = document.createElement('li');

2. 添加节点：
• appendChild：将节点添加至父节点的最后。
• insertBefore：将节点插入至父节点的指定位置。
3. 删除节点：

parent.removeChild(node);node.remove();

4. 替换节点：

parent.replaceChild(newNode, oldNode);

5. 克隆节点：

var cloned =reeNode.cloneNode();

事件处理

6. 事件对象的this指针：

   • 普通函数中this指向window。
   • 使用new构造器时this指向构造函数返回的对象。

7. 事件委托（事件冒泡）：

元素.addEventListener('事件类型', 函数名, {capture: true});

包含实例

// 正则表达式var reg = /a|b/i;console.log(reg.test('aba')); // trueconsole.log(reg.test('abz')); // true// DOM操作var ul = document.querySelector('ul');var li = document.querySelector('li');var meng = document.createElement('li');// 创建节点var li_new = document.createElement('li');// 更新节点ul.appendChild(li_new);console.log(ul.firstChild === li_new); // true// 删除节点ul.removeChild(li);// 克隆节点var meng_two = meng.cloneNode();

闭包与作用域链

闭包允许函数持久化局部变量，控制变量的使用范围。

闭包的作用

• 让函数持久化本地变量。
• 提供灵活的变量管理机制。

闭包的实现

function big() {    var c = 10;    return function small() {        console.log(c);    };}var test = big();test();

दस大JS基础

作用域链

作用域链是解决变量查找问题的机制，按顺序查找当前作用域，到全局对象。

变量提升

未声明的变量会被提升至最近的可访问位置。

匿名函数自调用

(function () {    console.log('自调用函数执行');})();

事件处理

div.addEventListener('click', function (e) {    console.log('元素被点击');    e.preventDefault();});

事件代理

ul.addEventListener('click', function (e) {    console.log('列表项被点击');}, false);

通过以上知识，可以更高效地编写和优化你的javascript代码。

转载地址：http://txwiz.baihongyu.com/