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

最新推荐文章于 2024-07-25 15:46:04 发布
最新推荐文章于 2024-07-25 15:46:04 发布
阅读量214 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45996045/article/details/114380071
版权

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对象的一个属性
    • null 和 undefined 转化为数字：
      • null → 0
      • undefined → NaN
    • undefined 值是派生自 null 值
      console.log(null == undefined);   //true
console.log(null === undefined);   //false
  • 只有6种数据会转化成false：undefined、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()方法再依据规则转换
  • 基本数据类型没有属性和方法，只有引用类型有。基本数据类型方法是先转化成对象再调用（undefined和null不能）

操作符

  • ++num与num++的区别
    运算时，前置型会使用递加后的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()接收在水平和垂直方向上移动的像素数
      • 获取窗口大小
        • innerWidth、innerHeight表示该容器中页面视图区的大小（减去边框宽度）
        • outerWidth 和 outerHeight返回浏览器窗口本身的尺寸
        • 在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中不分大小写
  • NodeList、HTMLCollection和NamedNodeMap
    • 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属性：表示根据默认浏览器及操作系统的设置，当前文档默认的字符集。如果文档没有使用默认的字符集，那charset和defaultCharset属性的值可能会不一 样

事件

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

    • 事件冒泡：事件开始时，由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）
    • 事件捕获：不太具体的节点在事件到达预定目标最具体的节点之前捕获它，先接收到事件，而预定目标最后接收到事件；虽然规范要求事件从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>
      • 此方式添加的事件会在事件流的冒泡阶段被处理，事件处理程序中的代码在执行时有权访问全局作用域中任何代码
      • 局部变量event和this
        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()添加的事件只能通过此事件删除，删除时传入的函数必须和添加时传入的函数是同一引用，删除事件在一次删除中只能删除冒泡或捕获阶段其中一个阶段
      • 都是三个参数：处理事件名；事件处理程序的函数；一个布尔值或布尔类型对象（表示调用程序是在事件冒泡阶段还是捕获阶段，默认为false，false即冒泡阶段，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

    注意：

    • 只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件，如果mousedown或mouseup中的一个被取消，就不会触发click事件
    • 只有触发两次click事件，才会触发一次dblclick事件。如果有代码阻止了连续两次触发click事件，那么就不会触发dblclick事件

  • 内存与性能

    • 在JS中添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。每个函数都是对象，会占用内存，内存中对象越多，性能就越差
    • 每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的 JS 代码之间会建立一个连接。连接越多，页面执行起来就越慢。所以要在不需要时移除事件处理程序，移除方法：
      • 手动移除事件处理程序，设置null
      • 在页面被卸载之前没有清理干净事件处理程序它们就会滞留在内存中，所以要在页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序
SQCTM810
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript基础知识点归纳(推荐)
10-21
下面小编就为大家带来一篇JavaScript基础知识点归纳(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
web前端——JavaScript基础
03-06
思维导图式笔记， 笔记来源https://blog.csdn.net/qq_38490457/article/details/109257751
Adroid 收集
daimengs的博客
08-17 1万+
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多朋友都有过在 Activity 中通过 getWidth() 之类的方法获取 View 的宽高值，可能在 onCreat...
java学习路线
w18377940962的博客
02-08 6316
Java 学习路线 Java 学习路线一条龙版 by 程序员鱼皮 ???? + ???? = ???????? 建议先观看视频导读：https://www.bilibili.com/video/BV1Qf4y1K7ff/ 大纲 路线特点 最新，完整一条龙的大厂 Java 学习路线，从入门到入土 同时适用于想全面学习 / 快速求职的同学，可以根据符号来定制自己的专属学习路线 给出目标、学习建议、关键知识点、最优资源以及各类资源推荐（视频、书籍、文档、项目、工具等） 鱼皮自己是 Java 开发者，融入个
乔戈里推荐的新版Java学习路线，开源！
WantFlyDaCheng的博客
12-13 7459
Java 学习路线一条龙版 by 程序员鱼皮所以我又抽空做了新版的 Java 学习路线一条龙，补充了很多内容（比如面试题、常用 Java 类库、常用软件等），让整个路线 字数翻倍 。同时区...
Java 学习路线一条龙版
程序员阿红的博客
12-02 8725
Java 学习路线一条龙版 Java 学习路线一条龙版 by 程序员鱼皮 ???? + ???? = ???????? 学习路线来源于：程序员鱼皮，大家可以去b站看看他的视频。 视频导读：https://www.bilibili.com/video/BV1Qf4y1K7ff/ 大纲 路线特点 最新，完整一条龙的大厂 Java 学习路线，从入门到入土 同时适用于想全面学习 / 快速求职的同学，可以根据符号来定制自己的专属学习路线 给出目标、学习建议、关键知识点、最优资源以及各类资源推荐（视频、书籍、文
windows类书的学习心得
热门推荐
thanklife的专栏
07-30 3万+
windows类书的学习心得 这篇文章应该是凑的，不够很长，还是值得读的，转发来。下满是原网址： http://www.blogjava.net/sound/archive/2008/08/21/40499.html 创建人： paul 现在的计算机图书发展的可真快,很久没去书店,昨日去了一下,真是感叹万千,很多陌生的出版社,很多陌生的作者,很多陌生的译者,书名也是越来越夸张,什
WebSocket实战之——JavaScript例子
02-25
一、详细代码案例详细解读一个简单html5WebSocket的Js实例教程,附带完整的javascriptwebsocket实例源码，以及实例代码效果演示页面，并对本实例的核心代码进行了深入解读。从WebSocket通讯三个阶段（打开握手、数据...
JavaScript知识点复习.pdf
11-19
JavaScript是一种广泛用于互联网的...随着Web技术的发展，JavaScript的知识点不断扩展，包括框架（如React、Vue）、模块化（如CommonJS、ES6模块）、异步编程（Promise、async/await）等，都需要开发者持续学习和掌握。
【React 】开发环境搭建详细指南
lph159的博客
07-24 874
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 194
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 913
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 514
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 329
thinkphp8图片上传的验证
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 474
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 365
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
最新发布
RHeng的博客
07-25 624
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 119
【代码】typescript中type和interface有什么区别，如何选择？
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值