javascript正则表达式判断文件夹名称是否有误_JavaScript网站开发——第三天

十二，DOM

1，什么是DOM

DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制Web页面、窗口和文档。实现了JS可以通过操作BOM来实现浏览器的各种行为，起到了桥梁和结构的作用。

做网页的都知道，想要做一个动态页面，需要交互之类的，那这个时候，静态页面是无法满足的，千万别跟我说，你可以提前把要查询的显示的内容写在代码里，那么多数据，你要写几年。要实时变化嘛，当然得有后台支持。就比如你在博客里，修改个人信息，添加一个标签页，删除个性签名等等，都需要同步的

（侵删）

DOM基本功能：

① 查询某个元素

② 查询某个元素的祖先、兄弟以及后代元素

③ 获取、修改元素的属性

④ 获取、修改元素的内容

⑤ 创建、插入和删除元素

学习DOM，意味着，我能通过JS代码任意操作浏览器以及浏览器里面的元素，来实现自己想要的功能。

2，获取元素结点的6种方法

下面这个说得很明白了

Javascript获取元素节点的六种方法(Dom) - 猎猫人 - 博客园​www.cnblogs.com

3，节点属性和方法

属性

parentNode: 父节点
firstChild: 第一个子节点
lastChild: 最后一个子节点
nextSibling: 下一个兄弟节点
previousSibling: 上一个兄弟节点
nodeType: 节点类型(1 元素节点 2 属性节点 3 文本节点)
nodeName: 节点名称(元素节点返回元素的名称，如h1, 属性节点返回属性的名称，如id, 文本节点返回#text)
nodeValue: 设置或者读取文本节点的内容
ownerDocument: 返回该节点的文档根节点

方法

appendChild(node): 将节点node添加到另一个节点(node2)的末尾:node2.appendChild(node)
insertBefore(node, referenceNode): 将一个节点node插入到referenceNode之前: referenceNode.parentNode.insertBefore(ndoe, referenceNode)
replaceChild(newNode, oldNode): 用newNode替换oldNode: oldNode.parentNode.replaceNode(newNode, oldNode)
cloneNode(boolean): 克隆一个节点node，若布尔值为true,则不仅复制节点本身，还复制节点下的子节点；若布尔值为false，则仅仅复制节点本身。复制的过程中包括复制节点的属性。 node.cloneNode(true) 或者node.cloneNode(false)
removeChild(node): 移除一个节点。node.parentNode.remvoeChild(node)
hasChildNodes(): 判断一个节点是否有子节点，若有，返回true，否则，返回false

4，节点创建、添加、删除

创建节点后必须要添加，否则创建没有意义

document.createElement("div"); //创建元素节点

document.createTextNode("Hello");//创建文本节点

父元素.appendChild(追加的子元素); //把创建的节点追加到父元素下

父元素.insertBefore(需添加的元素，位置）; //把创建的节点添加到某个元素之前

删除节点

父元素.removeChild(子元素);

5，元素样式

如何获取样式表种的样式？

getComputedStyle(元素，null).样式名称

例如：getComputedStyle(box,null).width

元素.style.样式名称 这种方法只能获取到行内样式

例如：<div id="box" style="width:300px"> </div>，只对这样的元素节点才用效

6，混杂模式和标准模式

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

主要是盒模型的区别，导致各种各样的与标准模式有差异的表现形式。

标准模式：document.documentElement（文档的文档元素）

混杂模式：document.body（文档的body）

主要记住有两种模式就行了，这与浏览器兼容有关

十三，事件

事件就是事情的起因。之所以会执行，是因为有东西触发了它，有一个缘由。

事件流就是事件流描述的是页面中接受事件的顺序，分为事件冒泡和事件捕获

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（从内到外的触发）

事件捕获：从不太具体的dom节点应该更早接收到事件，而具体的节点最后接收到事件（我们借用addEventListener来模拟事件捕获流）（从外到内的触发）

1，鼠标类事件

οnclick====>单击事件

οndblclick====> 双击事件

οncοntextmenu====>右击事件

οnmοuseοver====>鼠标移入（穿过）

οnmοuseοut====>鼠标移出

οnmοusemοve====>鼠标移入（一直会执行的代码）

οnmοusedοwn====>鼠标按下

οnmοuseup====>鼠标释放（松开）

2，键盘类事件

οnkeydοwn====>键盘按下

οnkeyup====>键盘释放（松开）

keyCode====>属性

例子：

document.onkeydown=function(e){
  case 37:
    alert("按下了左");break;
  case 38:
    alert("按下了上");break;
  case 39:
    alert("按下了右");break;
  case 40:
    alert("按下了下");break;
}

3，其它类事件

οnlοad====>DOM 加载完毕后执行的方法

οnfοcus====>得到焦点后执行的方法

οnblur====>失去焦点后执行的方法

οnresize====>浏览器或者框架尺寸变化时触发

οnscrοll====>滚动条发生变化时触发

οnchange====>改变值后时后触发

这是主要运用到的一些事件

4，事件处理程序

1，HTML事件处理程序

语法：把事添加到了节点上

缺点：HTML和js耦合

2，DOM0级事件处理程序

语法：box.oclick=function(){}

缺点：同样的元素，同样的事件，后面的会覆盖前面的

3，DOM2级事件处理程序

语法：box.addEventListener(事件名称,函数,false|true)

参数1：不需要加on ===>click

参数3：false代表了冒泡

true 代表了捕获

缺点：IE浏览器不兼容，有专门的IE事件处理程序

删除事件处理程序差不多，这里就不例举了、

5，事件对象

当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件对象的属性

target(非IE）====>目标（返回对应的DOM节点）

srcElement（IE中）====>目标（返回对应的DOM节点）

clientX====>返回当前鼠标位置距离浏览器左侧的值

clientY====>返回当前鼠标位置距离浏览器顶端的值

事件对象委托

事件对象委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

原理：冒泡的原理

优点：1，性能较好

2，即使后添加的也有效

具体请参考博客：

JS事件委托（代理）学习笔记 - 风岳轩 - 博客园​www.cnblogs.com

如何阻止冒泡？

我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。 2. 事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件； 3. ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true;）

十四，正则表达式

1，什么是正则表达式

正则表达式就是规则表达式

应用场景有，表单验证、解析url参数、筛选等等，php，java，JavaScript等语言都用到

定义方式有字面量形式（ // ）和构造函数形式（ new RegEx() )

方法有：test

功能：看内容是否与正则匹配 返回：布尔值

exec

功能：看内容是否与正则匹配 返回：数组

2，元字符

[] ===》除了括号内的任意字符

[^] ===》除了括号内的任意字符

[0-9] ===》匹配0到9的任意数字

[a-z]===》匹配a到z的任意小写字母

[A-Z]===》匹配A到Z的任意大写字母

d===》匹配数字

D===》匹配非数字

w===》匹配数字、字幕、下划线

W===》匹配非数字、字幕、下划线

s===》匹配空格

S===》匹配非空格

b===》匹配边界

.===》除换行以为的任意字符

3，限定符和重复

^ ===》以字符串的起始（开始）

$ ===》以字符串的结束（结束）

{n}===》匹配重复N次

{n,} ===》匹配重复最少n次，最多不限

{n,m} ===》匹配重复最少n次，最多不限

* ===》匹配重复最少0次，最多不限

+ ===》匹配重复最少1次，最多不限

? ===》匹配重复最少0次，最多1次

4，选择符和修饰符

| ===》或

i ===》不区分大小写

g ===》 全文匹配（全局模式）

m ===》换行匹配

5，分组和字符类

() ===》把内容组合起来

要实用字符类$.1 $.2 $.3 .....$.99 的话

1》必须要运行一下正则（test）

2》返回的是匹配的内容，必须使用内容：返回分组中的内容

6，字符串与正则进行匹配的方法

search ：如何匹配返回下标位置，如果不匹配返回-1 不支持全局

mathch ：如何匹配返回数组，如果不匹配返回null 支持全局

replace： 替换呗 支持全局

终于搞完了，有点累人