DOM

DOM – Document Object Model文档对象模型

DOM定义了表示和修改文档所需要的方法，是一系列方法的统称

DOM对象即为宿主对象，由浏览器厂商定义，用来操作HTML和XML功能的一类对象的集合，也可以称之为DOM是对HTML以及XML的标准编程接口

任何东西都操作不了css

简单来说，XML是HTML的前身

DOM操作不了css样式表，但是可以通过间接的方式改变css，就是操作HTML直接往上面加属性

基本操作

在页面中选择除了按照id选择，其余的选出来基本都是类数组，所以此时此刻，哪怕符合选名规则的元素只有一个，返回出来的任然是一个类数组，所以无论被选中的有几个，都要使用数组的方式精确选中，即在后面加上下标

document代表整个文档，包含HTML
document.getElementById()，表示按照id名来选中元素
在IE8以下的浏览器，ID不区分大小写，而且返回匹配name属性的元素，在返回的时候，可能会改变你的id，所以不建议使用
document.getElementsByTagName()，表示根据标签名来选中元素，会选中的所有带这个标签名的元素，然后返回一个类数组
不存在兼容性问题，所以是最提倡的使用方法
如果里面填‘*’就表示选中所有标签
document.getElementsByClassName()，根据类名来选中元素，存在兼容性问题，在IE8及IE8以下没有这个方法
document.getElementsByName()，要注意的是，name属性是可以提交数据的组件的数据名，所以只有在表单，表单元素，iframe，img这些里面，name才是有意义的，所以要注意兼容性问题
document.querySelector()，是可以通过使用css选择器来选中想要元素
document.querySelectorAll()，和上面差不多，区别是使用这个是选中一组选择器
缺点：在IE6及以下是无法识别的，不是实时的，只有最开始对元素做的行为，在后面对所选中的元素做出一系列操作在6,7两种方法里面不会实现，除非通过自己命名的数组选中才会进行更改

节点的类型

—元素类型------节点类型—

元素节点-------1
属性节点-------2
文本节点-------3
注释节点-------8
document-------9
DocumentFragment----11

节点的属性

nodeName，以字符串的形式返回元素的标签，以大写形式表示，只读
nodeValue，只有Text节点或者Comment节点的文本内容才有这个属性，可以读写
nodeType，节点的类型，只读
attribute，Element节点的属性集合
可以在获得属性节点的类数组之后，对数组的每一个元素进行name或者value的操作，name不可改，value可以改

// 实现在不用children的情况下返回元素子节点

var test = document.getElementsByTagName('div')[0];

function ElementChild(node){
    
    

    var temp = {
    
    
        length : 0,
        push : Array.prototype.push,
        splice : Array.prototype.splice
        },
        child = node.childNodes,
        len = child.length;

    for( var i = 0; i < len ; i ++){
    
    
        if(child[i].nodeType === 1){
    
    
            temp.push(child[i]);
        }
    }
    return temp;

}

console.log(ElementChild(test));

遍历节点树

一个元素在dom里面称之为一个节点，元素也可以称之为dom元素

parentNode—表示父节点，最顶端的parentNode为#document
childNodes—子节点们
firstChild—第一个子节点
lastChild—最后一个子节点
nextSibling—下一个兄弟节点
previousSibling—前一个兄弟节点

==节点的一个方法：hasChildNodes()==就是判断是否存在子节点，返回布尔值

遍历元素节点数

除children以外，IE9及以下都不兼容

.parentElement，返回当前元素的父元素节点（IE不兼容）
.children，返回当前元素的元素子节点
.childElementCount === .children.length，就是求当前子元素节点的个数（IE不兼容）
firstElementChild，返回第一个元素子节点（IE不兼容）
lastElementChild，返回最后一个元素子节点（IE不兼容）
nextElementSibling—下一个兄弟元素节点（IE不兼容）
previousElementSibling—前一个兄弟元素节点（IE不兼容）

节点的一个方法：hasChildren()就是判断是否存在元素子节点，返回布尔值

DOM继承树

在这里插入图片描述

document后面的分支还有XMLDocument

函数的位置

document.getElementById()，定义在Document.prototype上，HTML和XML都可以调用，其他节点不能调用
document.getElementsByName()定义在了HTMLDocument.prototype上，非HTML不可以使用
document.getElementsByTagName()定义在了Document和Element的prototype上
HTMLDocument.prototype定义了一些常用的属性，body，head属性分别指代HTML文档中的body，head标签
Document.prototype上定义了DocumentElement属性，代指文档的根元素，在HTML文档中，代指html标签
document.getElementsByClassName()，querySelector()，querySelectorAll()在Document.prototype,Element.prototype均有定义

增

括号里面都填字符串

document.createElement();增加或创建一个元素节点，但此时创建的元素节点是存放在js的变量里面的，要让这个元素出现在body里面，需要使用document.body.appendChild()，将创建出来的元素节点添加在body里面
document.createTextNode();创建文本节点
document.createComment();创建注释节点
document.createDocumentFragment();创建文档事件节点

插

填变量名

appendChild();所有的元素节点都会有appendChild方法，作用类似于push，但实际上是剪切作用，可以对文本节点进行操作，也可以对元素节点进行操作
insertBefore(a, b);把a插在b前面

删除

parent.removeChild();通过父级剪切子元素节点
child.remove();通过自己直接删除自己

替换

parent.replaceChild(new, origin);表示拿新的元素替换老的元素，然后老的元素是被剪切出来，并不是直接被删除

想修改也可以直接这样修改

element.id可以直接修改id
element.className可以直接修改classname

element节点的属性和方法

属性

innerHTML，对使用这个属性的元素里面的全部内容进行提取和赋值
innerText，直接对使用这个属性的元素里面的文本内容进行提取和赋值
注意这个属性火狐不兼容，在火狐里面可以使用textContent（老版本的IE不管用），作用都一样

方法

element.setAttribute(‘a’,‘b’);给元素设置行间属性，a是属性名，b是属性值
element.getAttribute(‘a’);取出该元素里面属性名为a的属性值

日期对象 Date()

封装函数，打印当前是何年何月何日，几分几秒

是系统自带的对象，由构造函数去建立，例如var date = new Date();

getTime()，计算从1970年1月1日到现在一共过去了多少毫秒------最常用的方法
可以求时间戳

建议直接看w3c里面的，链接在这里:https://www.w3school.com.cn/jsref/jsref_obj_date.asp

js定时器

setInterval(function (){
    
    

},1000)//每隔一千毫秒执行一次函数

循环执行
在数值那里也可以填一个自己定义的变量，不过如果在后期变量发生改变，但是该函数执行频率不会发生改变，因为在setInterval执行的时候，time只会被读取一次，所以就不会发生改变
每一个setInterval()都会返回一个唯一标识，是数字，从1开始排列

其实是不准的

clearInterval();里面传入的数据就是setInterval返回的数值，用于清除setInterval

setTimeout(function (){
    
    

},1000);

表示在1000毫秒之后执行一次函数体

相对应的，clearTimeout();就是清除setTimeout的函数，传入内容也是setTimeout返回的唯一标识

以上这些方法都是全局对象window上的方法，内部函数this指向window

两种计时器的函数部分也可以用字符串形式表示js代码

DOM基本操作，一些边角知识

查看滚动条滚动距离
- window.pageXOffset/pageYOffset（X求x轴，Y求y轴，返回像素值）
  - IE8及以下不支持
- document.body.scrollLeft,document.body.scrollTop,前者求x轴，后者求y轴
- document.documentElement.scrollLeft,document.documentElement.scrollTop和上面一样
  这两个存在兼容性问题，在IE8即以下，只有一个会生效，且不一定哪个会生效，但这两个存在的情况是互斥的

实现效果的函数封装

function getScrollOffset() {
    
    
    
    if ( window.pageXOffset) {
    
    
        return {
    
    
            x : window.pageXOffset,
            y : window.pageYOffset
        }
    }else{
    
    
        return {
    
    
            x : document.documentElement.scrollLeft + document.body.scrollLeft,
            y : document.documentElement.scrollTop + document.body.scrollTop
        }
    }

}

浏览器的怪异模式也可以称为混杂模式，一旦启动就会不再使用最新的css标准，而是会兼容之前版本的浏览器删掉这行代码就会启动怪异模式

查看视口尺寸（就是html占据屏幕的大小）
- window.innerWidth/innerHeight
  - IE8及以下不支持
- document.documentElement.clientWidth,document.documentElement.clientHeight
  - 标准模式下，任意浏览器都兼容
- document.body.clientWidth,document.body.clientHeight
  - 适用于怪异模式下的浏览器

如何判断浏览器处于什么模式？
document.compatMode , 返回"CSS1Compat"，表示是标准模式，返回"BackCompat"表示怪异模式

实现效果的函数封装

function getViewportOffset() {
    
    
    
    if (window.innerWidth) {
    
    
        return {
    
    
            w : window.innerWidth,
            h : window.innerHeight
        }
    }else{
    
    
        if (document.compatMode === "BackCompat") {
    
    
            return {
    
    
                w : document.body.clientWidth,
                h : document.body.clientHeight
            }
        }else{
    
    
            return {
    
    
                w : document.documentElement.clientWidth,
                h : document.documentElement.clientHeight
            }
        }
    }
}

查看元素的几何尺寸
- div.getBoundingClientRect();
- 兼容性很好
- 返回一个对象，对象里面有left，top，right，bottom等属性。left，top代表该元素左上角的x，y坐标，right，bottom代表右下角的x，y坐标，x，y表示盒子左边界和上边界和左边上边的距离
- height和width属性老版本的IE没有实现
- 返回的结果不是实时的
  html代码如下
```
<div style="width: 100px;height: 100px;position: absolute;top: 250px;left: 250px;background-color: rosybrown;">
```

在这里插入图片描述

查看元素尺寸
- div.offsetWidth，div.offsetHeight查看宽高
查看元素的位置
- div.offsetLeft，div.offsetTop
- 对于无定位的父级元素，返回相对文档的坐标，对于有定位父级返回相对于有定位的父级的坐标
- div.offsetParent返回最近的有定位的父级，如果没有，返回body,body.offsetParent返回NULL

都是求视觉上的尺寸（就是border及以内的）

让滚动条滚动
- window上面有三个方法，scroll(),scrollTo(),scrollBy()
  都是传入两个参数，第一个是x轴方向想让滚动条滚动的距离，第二个是纵轴方向上让滚动条滚动的距离，但是前两个是直接到那个想要到的位置不会累加，第三个是会累加的

脚本化CSS

间接控制css，读写css属性

dom.style.prop（只有这种方法可以写入值）
- 对行间样式进行读写，没有兼容性问题，碰到float这种保留字属性应该加css
- 复合属性必须拆解，组合单词变成小驼峰式写法
- 写入的必须是字符串格式
查询计算样式
- window.getComputedStyle(element, null);
- 这个计算样式只读
- 返回值都是绝对值，没有相对单位，例如rem返回px，色值返回rgb等等
- IE8及以下不兼容
- 想要获取伪元素的size可以把第二个参数换成’before’或者’after’
查询计算样式（兼容ie浏览器）
- ele.currentStyle
- IE独有的属性，返回值和window.getComputedStyle(element, null);一样，elem.currentStyle.prop

函数封装

    var div = document.getElementsByTagName('div')[0];
    var width = 'width';
    function getStyle(element, prop) {
    
    
        if(window.getComputedStyle){
    
    
            return window.getComputedStyle(element, null)[prop];
        }else{
    
    
            return element.correntStyle[prop]; 
        }
    }

事件

交互体验的核心功能

绑定事件

给特定元素的特殊事件绑定特定的处理函数

ele.onxxx = function(event) {}
- 兼容性好，但是一个元素的同一件事件上面只能绑定一个函数
- 基本等同于写在HTML行间上
- 句柄的方式
dom.addEventListener(type,function,false)
- IE9及以下不兼容，可以为一个事件绑定多个处理函数
- 第一个参数是事件类型，第二个是处理函数，第三个暂且不管，可深入
- 如果绑定多个处理函数，若处理函数的地址不一样，那就按照书写顺序依次执行函数，如果地址一样，就只执行一次
dom.attachEvent( ‘on’ + 事件类型，处理函数);
- IE独有的，一件事情可以绑定多个函数

    var li = document.getElementsByTagName('li');
    // for (var  i = 0; i < li.length; i++ ){
    
    
    //     li[i].onclick = function () {
    
    
    //         console.log(i);
    //     }
    // }
    // 错误示范，存在闭包
    // 正确答案
    for (var  i = 0; i < li.length; i++ ){
    
    
        (function (i) {
    
    
            li[i].onclick = function () {
    
    
            console.log(i);
            }
        }(i))
    }

事件处理程序的运行环境

ele.onxxx = function(event){}
- 程序this指向dom元素本身
dom.addEventListener(type,function,false)
- 程序this指向dom元素本身
dom.attachEvent( ‘on’ + 事件类型，处理函数);
- 程序this指向window
- 如何解决？使用封装函数来实现具体想用的功能，然后使用call来改变this的指向

实现封装事件处理函数，传入元素，事件类型，以及调用函数

function addEvent(elem, type, handle) {
    
    
        if(elem.addEventListener){
    
    
            elem.addEventListener(type, handle, false);
        }else if(elem.attachEvent){
    
    
            elem.attachEvent('on' + type, function () {
    
    
                handle.call(elem);
            });
        }else{
    
    
            elem['on' + type] = handle;
        }
    }

如何解除事件？

ele.onxxx = function(event){}，直接把函数换成null
dom.addEventListener(type,function,false);
dom.removeEventListener(type,function,false);函数部分必须一致，都是特定的
dom.attachEvent( ‘on’ + 事件类型，处理函数);
dom.detachEvent( ''on + 事件类型，处理函数);

如果绑定匿名函数，无法进行解除

事件处理模型–事件冒泡、捕获

事件冒泡：
- 结构上（非视觉）嵌套关系的元素，会存在事件冒泡的功能，即同一个事件，自子元素冒泡向父元素（自底向上）
- 一般默认是事件捕获，就是dom.addEventListener(type,function,false);第三个参数为false，就会触发事件冒泡
事件捕获：
- 结构上（非视觉）嵌套关系，会存在事件捕获的功能，即同一个事件，自父元素捕获至子元素（事件源元素）。（自顶向下）
- IE没有捕获事件
- 把dom.addEventListener(type,function,flase);第三个参数改为true，就会触发事件捕获
触发顺序是先捕获，再冒泡

一个对象的一个事件，只能遵循一种事件类型

focus，blur，change，submit，reset，select等事件不冒泡

取消事件冒泡和捕获

取消冒泡
- W3C标准event.stopPropagation(),不支持ie9及以下版本
- IE独有的event.cancelBubble = true;
event是绑定事件的函数的事件对象，就是在事件处理函数里面传入一个形参（系统自动会传入一个事件对象）系统会传入许多关于此时事件执行时的情况
- 封装函数
```
  function stopBubble(event) {
      
      
      if(event.stopPropagation){
      
      
          event.stopPropagation();
      }else{
      
      
          event.cancelBubble = true ;
      }
  }
```
取消默认事件
- 默认事件：表单提交，a标签跳转，右键菜单等
- return false;以对象属性的方式注册的事件才生效
  以句柄的事件绑定才可以
- event.preventDefault();W3C标注，IE9以下不兼容
- event.returnValue = false;兼容IE
- 封装阻止默认事件的函数 cancelHandler(event);
```
  function cancelHandler(event) {
      
      
      if(event.preventDefault){
      
      
          event.preventDefault();
      }else{
      
      
          event.returnValue = false;
      }
  }
```

事件对象

window.event用于IE

    var event = e || window.event;

事件源对象：(每一个事件的事件源对象都不一样都不一样)

event.target 火狐只有这个
event.srcElement IE只有这个
Chrome上述两个都有

兼容性写法

function func(e) {
    
    
    var event = e || window.event;
    var target = event.target || event.srcElement;
}

事件委托

利用事件冒泡和事件源对象进行处理
优点：
- 性能不需要循环所有的元素一个个绑定事件
- 灵活当有新的子元素时不需要重新绑定事件

实现demo，可以随意拖拽的小方块

    var div = document.getElementsByTagName('div')[0];
    var disX,
        disY;
    div.onmousedown = function (e) {
    
    
        disX = e.pageX - parseInt(div.style.left);
        disY = e.pageY - parseInt(div.style.top);
        document.onmousemove = function (e) {
    
    
            var event = e || window.event;
            var x = event.pageX,
                y = event.pageY;
            div.style.left = x - disX + 'px';
            div.style.top = y - disY + 'px';
        }
        document.onmouseup = function () {
    
    
            div.onmousemove = null;
        }
    }

需提高：（未完成）
要求：要改成函数的形式，绑定事件，取消冒泡等等
事件2，二十分钟左右

鼠标帧频比事件监听帧频快怎么办？
div.setCapture();会将位置外发生的事情获取在调用功能的div上

div.setCapture();仅在IE里面可以用
div.releaseCapture();与上面相对应，作用是释放事件

事件分类

鼠标事件
- click，点击事件
  click = mousedown + mouseup
  执行顺序是先down，后up，最后click
- mousedown，表示鼠标按下去
- mousemove，鼠标移动的事件
- mouseup，表示按下去的鼠标起来
- contextmenu，右键菜单
- mouseover，鼠标进入区域要发生的事（老版本）
- mouseout，鼠标离开区域的时候要发生的事（老版本）
- onmoseenter，鼠标进入区域要发生的事（新版本）
- mouseleave，鼠标离开区域的时候要发生的事（新版本）
利用button判断是点击鼠标左键还是右键
event返回button属性会告诉你是使用左键点击还是右键还是中间滚动轮
属性值为0是左键，1为中间滚动轮，2为右键

    div.onmousedown = function (e) {
    
    
        if (e.button == 0) {
    
    
            console.log('left');
        }else if(e.button == 1){
    
    
            console.log('center');
        }else if(e.button ==2){
    
    
            console.log('right');
        }
    }

DOM3规定：click事件只能监听左键，只有mousedown和mouseup可以判断鼠标键
如何解决mousedown和click的冲突
当鼠标按下去和抬起来的时间超过300毫秒的时候，判断为非点击

    var firstTime = 0;
    var lastTime = 0;
    var key = false;
    document.onmousedown = function () {
    
    
        firstTime = new Date().getTime();
    }
    document.onmouseup = function () {
    
    
        lastTime = new Date().getTime();
        if(lastTime - firstTime < 300){
    
    
            key = true;
        }
    }
    document.onclick = function () {
    
    
        if(key) {
    
    
            console.log('click');
            key = false;
        }
    }

键盘事件
- keydown
- keyup
- keypress,一直按住会一直触发
- keydown > keypress > keyup（顺序）
- keydown和keypress的区别
  - keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
  - keypress返回ASCII码，可以转换成相应字符
  - keydown监测字符是不准的，如果是对字符串类型的监测，使用keypress更好，还可以区分大小写
  - 事件对象的which属性，返回的是键盘上面的序号
  - String.fromCharCode(e.charCode),String上面的静态方法fromCharCode可以将Unicode编码转化为字符，（Unicode编码包括ASCII码）

文本类操作事件

input，只要文本内容有变化，就会触发这个事件
change，如果聚焦前后内容发生改变，才会触发事件
blur，表示当对象失去焦点的时候触发的事件
focus，表示对象有焦点的时候触发的事件

// 输入框功能完善
      var input = document.getElementsByTagName('input')[0];
  input.onfocus  = function () {
      
      
      if (this.value == '请输入用户名') {
      
      
          this.value = '';
          this.style.color = '#000';
      }
  }
  input.onblur = function () {
      
      
      if (this.value == '') {
      
      
          this.value = '请输入用户名';
          this.style.color = '#999';
      }
  }

窗体操作类（window上面的事件）
- scroll，当滚动条滚动的时候就会触发事件
- load，当页面上所有需要加载的部分全部加载完毕的时候，触发这个事件（效率最低）
- readyState，IE上面和load功能一样的属性，里面是一个字符串，会动态改变里面的值，如果加载完毕，值为complete或者loaded
- onreadystatechange，IE提供的用于监测readystate的方法

randerTree = domTree + cssTree

JSON + 异步加载 + 时间线

JSON ：就是一种传输数据的格式（以对象为样板，本质上就是对象，但用途有区别，对象是本地用的，json是用来传输的）

之前前后端交互数据就是利用xml传输数据，现在使用JSON传输数据，JSON虽然也是个对象，但和之前的对象有的一个最大的区别就是属性名必须要带双引号

JSON.parse();将字符串形式的JSON转变为对象形式，用于转变后端传给前段的数据string -> json
JSON.stringify();会将写的JSON形式的代码转变成字符串的形式，用于给后端传输数据json -> string

dom树，深度优先（dfs），dom树的完成是指解析完毕而不是加载完毕（加载完毕指引入图片之类的，会异步加载，也就是同时进行）

reflow，重排，是效率最低的一种方式，会让randerTree重排，dom节点的删除，添加，dom节点的宽高变化，位置变化，offsetWidth，offsetLeft，要尽量避免重排

repaint，重绘，可以理解为改变颜色，效率浪费较少，可以接受

异步加载js

js加载的缺点：加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一旦网速不好，那么整个网站都将等待js加载而不进行后续渲染等工作

有些工具方法需要按需加载，用到再加载，不用不加载

三种方法
- defer 异步加载，但要等到dom文档全部解析完（dom树解析结束）才会被执行。只有ie可以用，也可以把代码写在内部，ie9以下可以用
- async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script标签里,ie9以上以及其他浏览器可用
- 这两种方法都是属性名和属性值一样的，不过属性值的写入是字符串形式
- 前两种执行时也不阻塞页面
- 创建script，插入到dom中，加载完毕后callback,这种情况他会先加载，在需要调用的时候才会调用，如下所示
```
  <script>
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = "demo.js";
      document.head.appendChild(script);
  </script>
```
实现只有在script部分下载完毕之后才执行的函数封装，避免因为异步加载导致错误
```
  function loadScript(url, callback) {
      
      
      var script = document.createElement('script');
      script.type = 'text/javascript';
      if (script.readyState == 'complete' || script.readyState == 'loaded') {
      
      
          script.onreadystatechange = function () {
      
      
              if (script.readyState == 'loaded') {
      
      
                  callback();
              }
          }
      }else{
      
      
          script.onload = function () {
      
      
              callback();
          }
      }
      script.src = url;//避免因为加载速度过快导致函数不能执行
      document.head.appendChild(script);
  }
```
上述代码在传入的时候，callback在js文件中定义，在此时的执行的时候报错undefined，
- 解决方法一是使用函数引用将想要执行的函数名包裹住，然后在执行过程中js文件加载完毕之后再用，就不会报错
```
 loadScript('demo.js',function () {
      
      
         test();
 });
```
- 解决方法二是使用eval()，将想要调用的函数以字符串形式传入，然后使用eval()，将字符串内容当做js代码来执行
```
loadScript('demo.js','test()');
```
- 解决方法三是在js文件里面实现函数功能的时候，提前将各个函数放在一个对象里面，以字符串的形式传入，让后在封装函数里面调用的时候，直接使用[]调用那个函数
回调函数，callback

加载时间线

创建Document对象，开始解析web页面，解析html元素和他们的文本内容后添加Element对象和Text节点到文档中，这个阶段document.readyState = ‘loading’
遇到link外部css，创建线程加载，并继续解析文档
遇到script外部js，并且没有设置async，defer，浏览器加载并阻塞，等待js加载完成并执行该脚本，然后继续解析文档
遇到script外部js，并且设有async，defer，浏览器创造线程加载，并继续解析文档
对于async属性的脚本，脚本加载完成后立即执行。（异步禁止使用document.write()）
遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档
当文档解析完成后，document.readyState = ‘interactive’
当文档解析完成后，所有设置有defer的脚本会按顺序执行。（注意要async的不同，但同样禁止使用document.write()）
document对象触发DOMContentLoaded事件，这也标志着程序从同步脚本执行阶段，转化为事件驱动阶段
当所有async的脚本加载完成并执行后，img等加载完成后，document.readyState = ‘complete’,window对象触发load事件
从此，以异步响应方式处理用户输入，网络事件等

document.write();如果在onload之后进行这句代码的执行，会将前面的全部文档流都清空，然后用括号内的东西代替
事件名是全小写

    console.log(document.readyState);
    document.onreadystatechange = function () {
    
    
        console.log(document.readyState);
    }

window.onload
$(document).ready(function(){ }),指当dom解析完就执行的部分
上述两者的区别是第二个更快

正则表达式（RegExp）

实现多行：可以在改变html里面的内容的时候，在每个空格或者回车前面加上转移字符\，把空格转义掉，然后就不会报错；也可以通过+连接字符串实现文本换行，方便阅读

在正则表达式里面查找符号，需要加上\转义字符，这样才能表示单纯的那个符号文本

正则表达式的作用：匹配特殊字符或有特殊搭配原则的字符的最佳选择

在字符串之前加上^符号表示是字符串的开头

创建的两种方式

直接写（推荐）
- var reg = /abc/;这样直接创建
new RegExp()
- var reg = new RegExp(‘abcd’,‘i’);//第一个参数是他的规则,第二个参数是属性
- var reg1 = new RegExp(reg);//加new表示创建了两个不一样的正则表达式，虽然看起来一样，但实际上是不一样的；如果不加，reg1和reg完全是一样的，只是不一样的引用

属性

i属性，表示ignorecase，意思是忽略大小写
- var reg = /abc/i;
g属性，全局匹配，一次匹配结束之后，还会继续匹配
m属性，执行多行匹配，
- var reg = /^a/gm;
  var str = ‘abc\na’;此时会找到两个a满足条件
- 当想要判断的字符串使用了\n换行的时候，换行后就会匹配两个
需要注意lastIndex

表达式

var reg = /[0-9][0-9][0-9]/g;
一个方括号代表一位，字符串相应的位置只能是那个里面的内容
^放在表达式里面表示非，就是！
最后一个|表示或，使用|必须要加小括号

元字符

可以在表达式里面写元字符
\w完全等于[0-9A-z]
\W完全等于[^\w]
单词边界就是字符串里面用空格隔开，表示单词，单词的首字母和最后一个字母都是单词边界

量词

贪婪匹配原则（能多不少）
如何变成非贪婪匹配呢？
在任何一个量词后面加上？，表示进行非贪婪匹配（能少不多）
实际上是元字符/表达式先乘量词，然后再匹配字符串，要注意空’'的存在，当识别完字符串的时候，会有量词0和所求元字符相乘，然后产生空
正向预查，正向断言（？=n）
- 就是给想要查找的字符串添加一个附属条件
非正向预查（？！n）
- 就是不要有那个条件的字符串

方法

test()方法,测试字符串是不是满足正则表达式里面的内容，返回true，false
exec()方法，在g属性的调控下，会按照lastIndex返回的光标位置来查找想要的字符串，并且继续往后找，返回的是一个类数组

小括号也是子表达式，会记录括号里面的匹配内容

\1是反向引用，表示反向引用第一个子表达式里面的内容，有\2\3\4之类的

支持正则表达式string对象的方法

match，就是把符合内容的字符串挑出来，返回符合要求的字符串,如果在有子表达式的情况下，在没有g属性的情况下，他还会以类数组的形式返回字符串和子表达式的内容，如果有g属性，那就只返回想要的字符串
search，返回想要的字符串的位置（不会考虑重复，只会返回找到的第一个的位置），如果没有找到，就会返回-1
split，按照想要的字符串分割原字符串，如果有子表达式，还会返回子表达式的内容
replace，第二个参数将替换第一个参数，replace函数不具备访问全局的能力，所以在没有属性g的情况下，都是只替换一个
- 使用$1$2可以反向引用第一个参数里面的子表达式，就和\1\2类似
- 第二个参数也可以是函数，函数的第一个参数是正则表达式匹配的结果，第二个参数是第一个子表达式匹配的内容，第三个参数是第二个子表达式匹配的内容
- 让最后返回的是想要的字符串
- 如果想替换为 $就这样书写$ $，连着书写两个$ $，第一个$ 表示转义字符

// 转换成小驼峰式命名
    var reg = /-(\w)/g;
    var str = 'the-first-name';
    console.log(str.replace(reg,function ($, $1) {
    
    
        return $1.toUpperCase();
    }));

// 将字符串逆置
    var reg = /(\w)\1(\w)\2/g;
    var str = 'aabb';
    console.log(str.replace(reg, '$2$2$1$1'));

// 字符串去重
    var str = 'aaaaaaaabbbbbbbbbccccccccc';
    var reg = /(\w)\1*/g;
    console.log(str.replace(reg, '$1'));
    //原理：把一个和一串一样的替换

// 转换为科学记数法
    var str = '1000000000';
    var reg = /(?=(\B)(\d{3})+$)/g;

    console.log(str.replace(reg, '.'));

    // 原理：将空替换为.，并且在是在非单词边界的前提下

附上w3cschool的链接：https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

DOM + 日期对象 Date() + 事件 + JSON + 异步加载 + 时间线 + 正则表达式（RegExp）-- 大一下九、十周笔记

目录

DOM