个人复习归纳——JavaScript零碎知识点


基本概念

  • js组成
    • ECMAScript
    • DOM文档对象模型
    • BOM浏览器对象模型
  • ECMAScript与JavaScript关系
    ECMAScript 是 JavaScript 的规范,JavaScript 实现了 ECMAScript

数据类型

  • 7+1种
    • 7种简单数据类型:Undefined、Null、Boolean、Number、BigInt、String、Symbol;
    • 1种复杂数据类型:Object
  • 检测数据类型
    instanceof 用于检测引用类型;typeof 无法精准检测引用类型,适合检测基本数据类型
    • typeof
      一元操作符,所有返回值都是字符串
      typeof null  //"object"
      typeof Object  //"function"
      typeof Array  //"function"
      var arr = new Array();
      typeof arr   //"object"
      
    • instanceof
      二元操作符
      • 检测一个引用类型值Object构造函数时,返回值永远是true,因为所有引用类型值都是Object的实例

      • 检测任何基本类型值,返回结果永远是false,因为基本类型不是对象

        12 instanceof Number   //false
        
  • null和undefined
    • undefined本质是window对象的一个属性
    • nullundefined 转化为数字:
      • null → 0
      • undefinedNaN
    • undefined 值是派生自 null
      console.log(null == undefined);   //true
      console.log(null === undefined);   //false
      
  • 只有6种数据会转化成falseundefined、null、零、负零、NaN、空字符串;其余数据值都转化成true,包括空对象
  • 浮点数
    • 保存浮点数值所需内存空间是整数值的两倍,若小数点后没有数字浮点数值本身表示一个整数(如1.0),则该浮点值会被转换为整数
    • 0.1加0.2结果不等于0.3;因为数据从十进制→二进制→十进制这个过程产生了误差
  • 无穷
    • Number类型整数范围为 -253~253,超出范围会被转化为 -Infinity(负无穷)或 Infinity(正无穷),Infinity无法参与运算
    • 除法\
      • 正数除以0返回Infinity
      • 负数除以0返回-Infinity
      • 0/0返回NaN
      • Infinity/Infinity结果是 NaN
      • Infinity/非0数值结果是 Infinity-Infinity
    • 乘法*
      • Infinity*0结果是NaN
      • Infinity*非0数值结果是Infinity-Infinity
      • Infinity*Infinity结果是Infinity
    • 减法-
      • Infinity - Infinity结果NaN
      • -Infinity - -Infinity结果是NaN
      • Infinity - -Infinity结果是 Infinity
      • -Infinity - Infinity结果是-Infinity
    • 加法+
      • Infinity + Infinity结果是 Infinity
      • -Infinity + -Infinity结果是-Infinity
      • Infinity + -Infinity结果是 NaN
  • NaN
    • 任何涉及NaN的运算都会返回NaN
    • NaN与任何值都不相等,包括NaN本身
      console.log(NaN == NaN);   //false
      
    • isNaN()函数判断传入的值是否不能被转化成数字
  • parseInt()会将空字符串会转换成NaN,如果第一个字符是数字则会继续解析下去直至遇到非数字字符(包括小数点
  • parseFloat()可以解析第一个小数点,但只能解析十进制值,十六进制值被转化为0
  • String字符串是不可变的。字符串一旦创建,它的值就不能改变。要改变某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量
  • Number()转化对象,调用对象的valueOf()方法依据规则转换,若转换结果为NaN则调用对象的toString()方法再依据规则转换;
    toString()转化对象,调用对象的toString()方法依据规则转换,若转换结果为NaN则调用对象的valueOf()方法再依据规则转换
  • 基本数据类型没有属性和方法,只有引用类型有。基本数据类型方法是先转化成对象再调用undefinednull不能)

操作符

  • ++numnum++的区别
    运算时,前置型会使用递加后的num值;后置型会先使用num的原始值,然后num自身再递加
    //1.
    var a = 1;
    var b = a++ + a;  //3
    //a = 2
    
    //2.
    var a = 1;
    var b = a++ + ++a; //4
    //a = 3
    
  • 一元加和一元减放在非数值前,会等同于Number()将非数值转化为数值
  • 一元操作符按位非 ~ 本质是将操作数的负值减 1
  • 同时使用两个逻辑非操作符!!会模拟Boolean()转型函数的行为,将操作数转化为布尔值
  • 逻辑与/或
    • 都是短路操作,如果第一个操作数能决定结果则直接返回第一个操作数,否则对第二个操作数求值并返回
    • 逻辑与&&优先级高于逻辑或||
  • 关系操作符
    <><=>=
    • 如果两个操作数都是字符串,则比较两个字符串对应的字符编码值,比较时必须转换为相同的大小写形式(全部大写或小写)
    • 比较数值与字符串时,会将字符串转换为数值
    • 任何操作数与NaN进行任何比较结果都是false
  • +0-0的运算
    • +0 - +0结果是+0+0 - -0结果是-0-0 - -0结果是+0
    • +0 + +0结果是+0-0 + -0结果是-0+0 + -0结果是+0

变量

松散类型的,即可以用来保存任何类型的数据

  • 定义变量
    • 使用var定义——局部变量
    • 省略var定义——全局变量(不推荐)
  • 保存数据类型
    • 基本类型值
      按值访问,可以操作保存在变量中的实际值,被保存在栈内存
    • 引用类型值
      对象。值保存在堆内存中,不能直接操作对象的内存空间。
      当复制保存着对象的某个变量时,操作的是对象的引用;在为对象添加属性时,操作的是实际的对象
  • 创建变量
    1. 创建命名
    2. 创建作用范围(作用域)
    3. 将创建变量的过程提至函数最顶部
  • 给变量赋值
    • 基本类型值被保存在变量中
    • 引用类型值被保存在内存中,同时创建内存地址即引用,然后将引用保存到创建出来的变量中
  • 修改变量
    • 先将原变量销毁,再重新创建赋值
    • 修改引用类型值的某个属性,则是解析器根据变量中保存的地址,在内存中找到保存的对象,再进行修改
  • 复制变量
    • 若是基本类型值,两个变量完全独立,参与任何操作互不影响
    • 若是引用类型值,复制的只是变量的地址,两个变量实际上将引用同一个对象。虽然两个变量相互独立,但改变其中一个变量就会影响另一个变量
  • 传递参数
    传参即把函数外部的值复制给函数内部的参数
    • 所有函数的参数都是按值传递的
    • 解析器不关心函数参数的数据类型
    • 若传的参数是基本类型值,就与复制类似,函数外部与内部变量相互独立互不影响
    • 引用类型的参数也是按值传递,而不是按引用传递
      function setName(obj) {     
          obj.name = "Nicholas";     
          obj = new Object();  //局部对象,在函数执行完毕后立即被销毁   
          obj.name = "Greg"; 
      } 
      var person = new Object(); 
      setName(person); 
      console.log(person.name);    //"Nicholas" 
      

引用类型

Date类型和RegExp类型略

对象Object

  • 对象都是通过函数创建的
  • 对象的属性为数值的话会被自动转换为字符串
  • 获取对象属性值方法
    //1.用变量访问或属性名中包含特殊字符
    alert(person["name"]);    
    //2.通常用这个
    alert(person.name);
    

数组Array

  • 数组每一项可以保存任何类型的数据

  • 数组的大小可以动态调整,可以通过设置数组的length属性调整

  • sort()排序方法
    调用每个数组项的toString()转型方法,然后比较得到的字符串;默认情况下按升序排列数组项

    • 接收一个比较函数作为参数
      //升序
      function compare(value1, value2){     
          return value1 - value2; 
      } 
      
      //降序
      function compare(value1, value2){     
          return value2 - value1; 
      } 
      
  • join()方法
    把数组所有元素转换成字符串用指定分隔符连接,若不传参则默认是逗号

  • concat()方法
    创建当前数组的一个副本,然后将接收的参数添加到副本的末尾,最后返回新构建的数组;若没有传参则只是复制当前数组并返回副本

  • slice()方法
    从已有数组中返回选定的元素,返回的是一个新的数组

    • 一个参数,返回从参数指定位置开始到当前数组末尾的所有项
    • 两个参数,返回起始位置开始到结束位置之间的项(不包括结束位置的项
    • 不传参,返回数组副本
    • 参数为负数,加上数组长度来取值,相当于倒着取
    • 参数超出范围或第一个参数比第二个参数大,则返回空数组
  • splice()方法
    向/从数组中添加/删除项目,然后返回被删除的项目

    • 删除
      参数为要删除部分的开始位置要删除的项数
    • 插入/替换
      参数有三个,为起始位置要删除的项数(0就是插入,非0就是替换)、要插入的项
      替换时插入的项数不必与删除的项数相等
  • 迭代方法

    • 一共有五种方法,每种都接收两个参数
      • 在数组每一项上运行的函数
      • 运行该函数的作用域对象(可选,影响this值)
    • 第一个参数即运行的函数接收三个参数
      • 数组项的值item
      • 该项在数组中的位置index
      • 数组对象本身arr
    • 五个方法
      • every():如果传入函数对每一项都返回true,则返回true
      • filter():返回对传入函数会返回true的项组成的数组
      • forEach():没有返回值
      • map():返回每次传入函数调用的结果组成的数组
      • some():如果传入函数对任意一项返回true,则返回true
  • 归并方法

    • 一共有两种方法,每种都会迭代数组所有项
      • reduce():从数组第一项开始逐个遍历到最后
      • reduceRight():从数组的最后一项开始向前遍历到第一项
    • 每种方法都接收两个参数
      • 在数组每一项上运行的函数,此函数返回的任何值都会作为第一个参数自动传给下一项
      • 作为归并基础的初始值(可选)
    • 第一个参数即运行的函数接收四个参数
      • 前一个值prev
      • 当前值cur
      • 项的索引index
      • 数组对象本身arr
  • 数组去重的特殊方法

    • 利用对象属性特性
      创建一个空对象和空数组,遍历要去重的数组,判断对象的属性中是否有被选中的项,如果没有就将它加入空数组并设为对象的一个属性名且赋值为true或 1,否则跳过
    • set对象
      var arr = [1,1,2,3,4,4,4];
      var set = new Set(arr);   //自动去重 set对象中不会有重复的项
      arr = Array.from(set);   //将set对象转换成数组
      //或者使用扩展运算符也可以
      arr = [...new Set(arr)];  
      

Function类型

  • 创建函数
    • 声明语句
      最好不要在语句块中使用
      function sum (num1, num2) {     
          return num1 + num2; 
      }
      
    • 表达式语句
      //创建匿名函数
      var sum = function(num1, num2){     
          return num1 + num2; 
      };
      
      //创建命名函数
      var result = (function sum(num1, num2){
          return num1+num2;
      })
      
      • 命名函数有name属性,值即为函数名的字符串;匿名函数name属性为undefined
      • 函数名是一个指向函数对象的指针,用表达式语句创建的命名函数可在函数内部调用函数名,但不能在函数外部调用(声明语句创建的函数内部外部都可以调用)
    • 箭头函数(ES6)
      • 匿名函数name属性值为空字符串
      • 不会创建上下文执行环境
      • 没有arguments对象,没有自己的this
    • 函数生成器(ES6)
      function*,可以保存函数执行状态yield返回的迭代器对象
      • next()方法,每次调用从当前yield开始执行至下一个yield或函数结束
      • 有两个属性:value即返回值;done是判断是否执行至最后一个yield
    • 函数构造器
      new Function();不推荐,因为数据的安全性和函数的性能有很大问题,而且只在全局作用域下创建易命名污染
  • 函数内部属性
    • arguments
      • 类数组对象,包含传入函数中的所有参数
      • 有一个callee属性,指向拥有这个 arguments 对象的函数(严格模式下访问这个属性会报错)
    • this
      引用的是函数执行的环境对象
    • caller
      保存着调用当前函数的函数的引用, 如果是在全局作用域中调用当前函数,它的值为null
  • 函数属性
    • length:函数形参个数
    • prototype:保存引用类型所有实例方法的真正所在
  • 函数方法
    • apply()call()

      非继承,在特定的作用域中调用函数,实际上等于设置函数体内this对象的值

      两个方法作用相同,区别为接收参数方法不同:

      • apply()第一个参数为运行函数的作用域,第二个为函数参数数组或arguments对象
      • call()第一个参数为运行函数的作用域,其它参数是将函数的参数一个一个传入
    • bind()
      this值被绑定为传给该方法的参数

基本包装类型

  • Boolean类型
    建议永远不使用
  • Number类型
    • toFixed()

      按照指定的小数位返回数值的字符串表示,只有一个参数即指定的小数位,超过20位就会报错

    • toExponential()
      返回以指数表示法(也称e表示法)表示的数值的字符串形式,只有一个参数即指定的小数位

    • toPrecision()
      只有一个参数,即表示数值的所有数字的位数

  • String类型
    • 字符方法
      • charAt():返回给定位置的单字符
      • charCodeAt():返回给定位置的单字符的字符编码
    • 字符串操作方法
      • concat():拼接字符串,但是一般用+更加方便
      • slice():与数组的slice()方法类似
      • substr():返回子字符串;第一个参数即开始位置,第二个即子字符串长度,若没有第二个参数则到字符串末尾;若参数是负数,第一个负数参数加上字符串长度,第二个转换为0
      • substring():与slice()类似,区别是若第一个参数大于第二个参数可以自动调换过来,且若参数是负数则转换为0
    • 字符串位置方法
      • indexOf()从前往后找;lastIndexOf()从后往前找
      • 找不到返回 -1
      • 第二个参数可选,即开始查找的位置
    • trim()
      • 创建一个字符串副本,删除前置以及后缀所有空格,然后返回
      • trimLeft只删除前置空格;trimRight只删除后缀空格
    • 大小写转换
      • 所有字母转换成小写
        • toLowerCase()
        • toLocaleLowerCase()
      • 所有字母转换成大写
        • toUpperCase()
        • toLocaleUpperCase()
    • 模式匹配
      • match():本质上与调用 RegExp 的exec()方法相同
      • search():返回字符串中第一个匹配项的索引;如果没有找到匹配项则返回-1
      • replace():替换。第一个参数是一个 RegExp 对象或者一个字符串(这个字符串不会被转换成正则表达式);第二个是一个字符串或者一个函数
      • split():基于指定的分隔符将一个字符串分割并变成数组;参数即指定分隔符,若参数为空字符串则每个字符都会被分割

BOM浏览器对象模型

  • window对象
    • 窗口
      • 获取窗口位置
        //跨浏览器取得窗口左边和上边的位置
        var leftPos = (typeof window.screenLeft == "number") ?                   
            window.screenLeft : window.screenX; 
        var topPos = (typeof window.screenTop == "number") ?                   
            window.screenTop : window.screenY;
        
      • 移动
        • moveTo()接收新位置的x和y坐标值
        • moveBy()接收在水平和垂直方向上移动的像素数
      • 获取窗口大小
        • innerWidthinnerHeight表示该容器中页面视图区的大小(减去边框宽度)
        • outerWidthouterHeight返回浏览器窗口本身的尺寸
        • 在Chrome中,四个属性返回相同的值,即视口大小而非浏览器窗口大小
    • 超时调用setTimeout()
      setTimeout(function() {      
          alert("Hello world!"); 
      }, 1000); 
      
      • 第二个参数表示等待多长时间的毫秒数,但经过该时间后指定的代码不一定会执行。因为JS是一个单线程序的解释器,有一个JS任务队列,任务会按照任务添加到队列的顺序执行。这个参数是告诉JS过了多长时间把当前任务添加到队列中。如果队列是空的,那么添加的代码会立即执行;否则,它就要等前面的代码执行完了以后再执行
      • 若设置的毫秒数小于10,系统会自动调成10
      • 结果返回一个数值ID,超时调用ID,表示超时调用,是计划执行代码的唯一标识符
      • clearTimeout()方法取消尚未执行的超时调用计划,将超时调用ID作为参数传入即可
    • 间歇调用setInterval()
      setInterval (function() {      
          alert("Hello world!");  
      }, 10000); 
      
      • 若设置的毫秒数小于10,系统会自动调成10
      • 结果返回一个间歇调用ID
      • clearInterval()方法取消尚未执行的间歇调用,将间歇调用ID作为参数传入即可
      • 若执行代码时间超过间隔时间,执行完后会立马触发下一次执行(累积效应、连续触发),因此建议使用超时调用来实现间歇调用
    • 系统对话框
      • alert():警告框
      • confirm():确认框
      • prompt():提示框
      • 系统对话框不包含HTML,样式也不由CSS决定
      • 对话框是阻断式的,显示这些对话框时代码会停止执行,而关掉对话框后代码又会恢复执行
  • location对象
    • 提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能
    • 既是window对象的属性,也是document对象的属性
    • 位置操作方法
      • assign():立即打开新URL并在浏览器的历史记录中生成一条记录
      • replace():接受一个参数即要导航到的URL;结果会导致浏览器位置改变,但不会在历史记录中生成新记录
      • reload()
        • 重新加载当前显示的页面
        • 不传递参数时,页面就会以有效的方式重新加载,即页面就会从浏览器缓存中重新加载;若传递参数true,则强制从服务器重新加载
        • 位于reload()调用之后的代码可能会也可能不会执行,这要取决于网络延迟或系统资源等因素。因此最好将 reload() 放在代码的后一行
  • history对象
    • 保存着用户上网的历史记录,从窗口被打开的那一刻算起
    • go()
      在用户的历史记录中任意跳转,可以向后也可以向前;接收一个整数值作为参数即跳转的页数,负数表示向后,正数表示向前
    • back()forward()
      //后退一页 
      history.back(); 
       
      //前进一页 
      history.forward();
      
    • length属性
      保存着历史记录的数量。对于加载到窗口、标签页或框架中的第一个页面而言,history.length 等于0

DOM文档对象模型

DOM将HTML或XML文档描绘成一个由多层节点构成的结构

  • Node类型
    所有节点类型都继承自Node类型,因此所有节点类型都共享着相同的基本属性和方法
    • 属性
      • nodeType:表明节点的类型,由12个数值常量来表示
      • nodeName:元素的标签名
      • nodeValue:节点的值
      • childNodes:保存着一个含该节点所有子节点的NodeList类数组对象,有length属性,是基于DOM结构动态执行查询的结果
        访问someNode.childNodes[0]someNode.childNodes.item(0)
      • parentNode:指向文档树中的父节点
      • previousSibling:上一个同胞结点,没有就是null
      • nextSibling:下一个同胞结点,没有就是null
      • firstChild:父节点的第一个子节点,没有就是null
      • lastChild:父节点的最后一个子节点,没有就是null
      • ownerDocument:指向表示整个文档的文档节点
    • 方法
      • hasChildNodes():是否含有子节点,有返回true,否则返回false
      • appendChild():向childNodes列表末尾添加一个节点,然后返回新增的节点;如果传到appendChild()中的节点已是文档的一部分,则该节点从原来的位置转移到新位置,因为任何DOM节点都不能同时出现在文档中的多个位置上
      • insertBefore():把节点放在childNodes列表中某个特定的位置上,参数为要插入的节点和作为参照的节点,插入的节点被插在参照节点的前一个位置,结果返回插入的节点
      • replaceChile():替换,接受两个参数:要插入的节点和要被替换的节点
      • removeChild():移除节点,结果返回被移除的节点;被移除的节点仍为文档所有,只是在文档中没有了自己的位置
      • cloneNode():复制节点;接受一个参数为布尔值:true深复制,复制节点及其整个子节点树;false浅复制,只复制节点本身
      • nornalize():处理文档树中的文本节点,在调用该方法的节点中删除空文本节点,合并相邻的文本节点为一个文本节点
  • Document类型
    表示文档
    • document 对象是 HTMLDocument(继承自Document 类型)的一个实例,表示整个HTML页面;也是window对象的一个属性,因此可以将其作为全局对象来访问
    • 属性
      • documentElement:指向HTML页面中的<html>元素
      • body:指向<body>元素
      • doctype:指向`<!DOCTYPE>,这个属性用处很有限
      • title:包含着<title>元素中的文本,修改该值不会改变<title>元素
      • URL:包含页面完整的URL,即地址栏中显示的 URL(不可以设置)
      • domain:包含页面的域名,与URL属性相互关联;可以设置,但有限制,不能将这个属性设置为URL中不包含的域,并且如果域名一开始是“松散的”,那么不能将它再设置为“紧绷的”
      • referrer:保存着链接到当前页面的那个页面的URL,在没有来源页面的情况下可能会包含空字符串;不可以设置
    • 方法
      这些查找元素的方法也可以在Element元素上调用
      • getElementById():根据ID名查找元素并返回,没找到则返回null;只返回文档中第一次出现的元素
      • getElementsByTagName():根据标签名查找元素,返回一个HTMLCollection对象作为动态集合
        document.getElementsByTagName("*")指取得文档中所有元素
      • getElementsByClassName():通过class类名查找元素
      • getElementsByName():通过name特性查找元素
    • 文档写入
      • write():将文本写入到输出流中,原样写入
      • writeln():将文本写入到输出流中,在字符串的末尾添加一个换行符(\n
      • open():打开网页输出流
      • close():关闭网页输出流
    • 特殊集合
      这些集合都是HTMLCollection对象
      • document.anchors:文档中所有带name特性的<a>元素
      • document.forms:文档中所有的<form>元素
      • document.images:文档中所有的<img>元素
      • document.links:文档中所有带href特性的<a>元素
    • HTMLCollection对象
      • NodeList类似
      • length属性
      • 可以用方括号和item()访问
      • namedItem()方法,通过元素的name特性取得集合中的项
  • Element类型
    HTMLElement 类型直接继承自 Element 并添加了一些属性,所有 HTML 元素都是由 HTMLElement 或者其更具体的子类型来表示的
    • 标准特性
      • id:元素在文档中的唯一标识符
      • title:有关元素的附加说明信息,一般通过工具提示条显示出来
      • lang:元素内容的语言代码,很少使用
      • dir:语言的方向,值为"ltr"(left-to-right,从左至右)或"rtl"(right-to-left,从右至左) , 很少使用
      • className:类名
    • 自定义特性(HTML5)
      HTML5新增dataset(数据集)(对象)属性,用来存放自定义属性
      自定义格式:data-属性名;获取自定义属性:元素.dataset.属性名
    • 特性方法
      • getAttribute():取得特性,包括自定义特性,取得的是字符串,取不到则返回null
      • setAttribute():设置特性,设置的特性名会被统一转换为小写形式
      • removeAttribute():删除特性,只能删除非标准特性,标准特性一旦被设置就无法删除
    • 特性与属性的关系
      • 所有特性都是属性,但给元素添加的自定义属性不会自动成为元素特性
      • 有两个特性用属性访问和用getAttribute()得到结果不同:
        • style特性,属性访问返回一个对象,getAttribute()访问返回CSS文本
        • onclick特性,属性访问返回一个函数,getAttribute()访问返回相应代码字符串
    • attributes属性
      Element 类型是使用attributes属性的唯一一个 DOM 节点类型,该属性中包含一个NamedNodeMap动态集合,元素的每一个特性都由一个 Attr 节点表示,这些节点都保存在NamedNodeMap对象中
    • 创建元素
      document.createElement()方法,标签名在HTML中不分大小写
  • NodeListHTMLCollectionNamedNodeMap
    • NodeList是节点合集,12种类型节点都可以包括
    • HTMLCollection是Element元素节点合集,只包含元素这一种节点
    • 使用属性返回的节点合集一定是HTMLCollection;使用方法则不同浏览器返回的不同,有可能是NodeList有可能是HTMLCollection
    • NamedNodeMap属性节点合集
  • Text类型
    文本节点
    • 属性
      • length:保存着节点中的字符数目
    • 方法
      • document.createTextNode():创建文本节点
      • normalize():规范化文本节点,删除空白节点,合并相邻文本节点(如果两个文本节点是相邻的同胞节点,则这两个节点中的文本会连起来显示,中间不会有空格
      • splitText():分割文本节点,将一个文本节点分成两个文本节点,接收一个参数表示分割位置。原来的文本节点将包含从开始到指定位置之前的内容,新文本节点将包含剩下的文本。这个方法返回的新文本节点与原节点的parentNode相同
  • Comment类型
    注释类型,与Text类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法
  • Attr类型
    元素的特性在DOM中以Attr类型表示,特性就是存在于元素的attributes属性中的节点
    • 特性不是文档树的一部分
    • 不建议直接访问特性节点
  • Selectors API
    浏览器原生支持CSS查询的标准
    • querySelector()
      接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到则返回null
      • 通过Document类型调用时,会在文档元素的范围内查找匹配的元素
      • 通过Element类型调用时,只会在该元素后代元素的范围内查找匹配的元素
    • querySelectorAll()
      返回一个NodeList的实例,包含所有匹配的元素,如果没有找到匹配的元素则NodeList是空的
    • querySelector()querySelectorAll()两个返回的NodeList都是静态的,且运行速度慢很多
    • matchesSelector():是Element类型方法。接收一个参数CSS选择符,如果调用元素与该选择符匹配则返回 true,否则返回 false
  • Element Traversal API
    为Element元素添加了5个属性:
    • childElementCount:返回子元素(不包括文本节点和注释)的个数
    • firstElementChild:指向第一个子元素;firstChild 的元素版
    • lastElementChild:指向后一个子元素;lastChild 的元素版
    • previousElementSibling:指向前一个同辈元素;previousSibling 的元素版
    • nextElementSibling:指向后一个同辈元素;nextSibling 的元素版
  • HTML5扩展
    • getElementsByClassName()
    • classList属性
      是一个元素所有类名的集合
      • length属性
      • 访问可以用item(),也可以用方括号语法
      • 相关方法
        • add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了
        • contains(value):判断列表中是否存在给定的值,如果存在则返回 true,否则返回false
        • remove(value):从列表中删除给定的字符串
        • toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它
          *这些方法都只能传入一个字符串且不能包含空格
      • 用for循环多次添加不同class浏览器只会渲染一次,因为渲染和js解析器运行是同步的,在同一时间内只有一个在工作
    • children属性:是HTMLCollection的实例,与childNodes属性没有什么区别
    • contains()方法:检测传入的节点是否是调用方法的节点的后代节点。是就返回true;否则返回false
    • innerHTML属性
      • 读取时,返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记
      • 写入时,会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点(如果设置的值仅是文本没有HTML标签,则结果是设置纯文本
      • 限制
        在大多数浏览器中,通过innerHTML插入<script>元素不会执行其中的脚本(但大多数浏览器都支持以直观的方式通过innerHTML插入<style>元素
    • outerHTML属性
      • 读取时,返回调用它的元素及所有子节点的HTML标签
      • 写入时,会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素
    • innerText属性
      操作元素中包含的所有文本内容,包括子文档树中的文本
      • 读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来
      • 写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点
    • outerText属性
      操作包括元素本身以及元素中包含的所有文本内容
      • 读取值时,它会按照由浅入深的顺序,将元素中的所有文本拼接起来
      • 包含相应文本值的文本节点会替换整个元素(包括子节点)
    • 焦点管理
      • document.activeElement属性:引用DOM中当前获得了焦点的元素。默认情况下,文档刚刚加载完成时,属性中保存的是document.body元素的引用;文档加载期间,属性的值为null
      • document.hasFocus()方法:用于确定文档是否获得了焦点。是则返回true;否则返回false
    • HTMLDocument的扩展
      • readyState属性:指示文档是否加载完成。若值为loading则是正在加载文档;若值为complete则是已经加载完文档
      • compatMode属性:检测页面的兼容模式,区分渲染页面的模式是标准的还是混杂的
      • head属性document.head属性, 引用文档的<head>元素
        双重保险:var head = document.head || document.getElementsByTagName("head")[0];
    • 字符集属性
      • charset属性:表示文档中实际使用的字符集, 也可以用来指定新字符集。默认情况下为"UTF-16"
      • defaultCharset属性:表示根据默认浏览器及操作系统的设置,当前文档默认的字符集。如果文档没有使用默认的字符集,那charsetdefaultCharset属性的值可能会不一 样

事件

  • 事件流
    事件流描述的是从页面中接收事件的顺序

    • 事件冒泡:事件开始时,由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)
    • 事件捕获:不太具体的节点在事件到达预定目标最具体的节点之前捕获它,先接收到事件,而预定目标最后接收到事件;虽然规范要求事件从document对象开始传播,但支持的浏览器都是从window对象开始捕获事件
    • DOM事件
      包括三个阶段:
      • 事件捕获阶段:不涉及事件目标
      • 处于目标阶段:事件发生
      • 事件冒泡阶段:对事件做出响应
    • 事件的传播按HTML结构传播,不受CSS影响。因为事件的绑定是浏览器实现的,浏览器的解析是按HTML结构解析的,因此即使例如CSS将内节点与外节点的位置改变也不会影响事件的传播
  • 事件处理程序
    响应某个事件的函数就叫事件处理程序或事件侦听器

    • HTML事件处
      <input type="button" value="Click Me" onclick="showMessage()" />
      <script type="text/javascript">     
          function showMessage(){            
              alert("Hello world!");     
          } 
      </script> 
      
      • 此方式添加的事件会在事件流的冒泡阶段被处理,事件处理程序中的代码在执行时有权访问全局作用域中任何代码
      • 局部变量eventthis
        event:直接访问事件对象;this:事件的目标元素
        <input type="button" value="Click Me" onclick="alert(event.type)">
        <!-- 输出 "click" -->
        
        <input type="button" value="Click Me" onclick="alert(this.value)">
        <!-- 输出 "Click Me" -->
        
      • 缺点
        有时间差,有时页面已经加载完成,触发元素事件时,包含相应代码的js文件未加载完成,事件执行失败;并且HTML与JS代码紧密耦合,不易修改代码
    • DOM0级事件处
      将一个函数赋值给一个事件处理程序属性,这些属性通常全部小写
      var btn = document.getElementById("myBtn"); 
      btn.onclick = function(){     
          alert("Clicked"); 
      }; 
      
      • 该方式添加的事件处理程序会在事件流的冒泡阶段被处理
      • 作用域:该方式事件处理程序会在所属元素的作用域内运行。即程序中this引用当前元素
      • 删除事件直接将事件处理程序属性设置为null
      • 优点:解决了HTML事件处理程序的缺点,具有跨浏览器的优势
      • 缺点:一次只能指定一个事件处理程序,指定多个会覆盖
    • DOM2级事件处理
      • addEventListener()添加事件
        var btn = document.getElementById("myBtn"); 
        btn.addEventListener("click", function(){    
            alert(this.id); 
        }, false); 
        btn.addEventListener("click", function(){     
            alert("Hello world!"); 
        }, false); 
        //先显示id再显示Hello world!
        
        • 作用域:该方式事件处理程序会在其依附的元素的作用域内运行。即程序中this引用当前元素
        • 可以添加多个事件,不会覆盖,且按照添加顺序执行
      • removeEventListener()删除
        addEventListener()添加的事件只能通过此事件删除,删除时传入的函数必须和添加时传入的函数是同一引用,删除事件在一次删除中只能删除冒泡或捕获阶段其中一个阶段
      • 都是三个参数:处理事件名;事件处理程序的函数;一个布尔值或布尔类型对象(表示调用程序是在事件冒泡阶段还是捕获阶段,默认为falsefalse即冒泡阶段,true即捕获阶段)
      • 所有DOM节点都支持这两种方法,这两个方法都同时支持事件冒泡和事件捕获
    • IE事件处理
      • attachEvent()
        • 该方式事件处理程序会在全局作用域中运行,即this引用的是window对象
        • 可以添加多个事件,但事件以与添加顺序相反的顺序触发
        • 该方式添加的事件都会被添加到冒泡阶段
      • detachEvent()
        删除attachEvent()添加的事件,删除时传入的函数必须和添加时传入的函数是同一引用
  • 事件优先级

    • HTML事件会被属性事件覆盖,两种方法实现机制是一样的,只是写法不同,因此会覆盖
    • 目标元素上的事件执行顺序按代码中绑定的顺序执行,不按捕获、冒泡的顺序执行
    • 冒泡阶段事件若有HTML事件则其优先执行再被属性事件覆盖,再执行addEventListener()事件,因为事件的绑定是浏览器实现的,浏览器在执行整个网页的过程中先解析HTML;若没有HTML事件则按代码中绑定的顺序执行
  • 鼠标事件触发顺序

    1. mousedown
    2. mouseup
    3. click
    4. mousedown
    5. mouseup
    6. click
    7. dblclick

    注意

    • 只有在同一个元素上相继触发mousedownmouseup事件,才会触发click事件,如果mousedownmouseup中的一个被取消,就不会触发click事件
    • 只有触发两次click事件,才会触发一次dblclick事件。如果有代码阻止了连续两次触发click事件,那么就不会触发dblclick事件
  • 内存与性能

    • 在JS中添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。每个函数都是对象,会占用内存,内存中对象越多,性能就越差
    • 每当将事件处理程序指定给元素时,运行中的浏览器代码与支持页面交互的 JS 代码之间会建立一个连接。连接越多,页面执行起来就越慢。所以要在不需要时移除事件处理程序,移除方法:
      • 手动移除事件处理程序,设置null
      • 在页面被卸载之前没有清理干净事件处理程序它们就会滞留在内存中,所以要在页面卸载之前,先通过onunload事件处理程序移除所有事件处理程序
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值