python全栈-JavaScript
python全栈-js
文章目录
- js基础
-
- 变量与常量
- JavaScript引入到HTML文件中
- JavaScript注释与常见输出方式
- 数据类型
-
- typeof 显示数据类型
- 算数运算符之加法运算符
- 运算符之算术运算符
- 运算符之赋值运算符
- 运算符之比较运算符
- 运算符之布尔运算符
- 运算符之位运算符
- 运算符优先级
- 类型转换
- 控制语句
-
- if
- if...else
- if..else if...else
- switch
- 三元运算符 (条件) ? 正确 : 错误
- for
- while
- break,continue
- 字符串
-
- 转义
- length 属性
- 字符串转码
- charAt()
- concat()
- slice(start[,end]) 左闭右开
- substring()
- substr(index,len)
- indexOf()/lastIndexOf()
- trim()
- toLowerCase()/toUpperCase()
- search(子串)/replace()
- split(要分隔的字符[,返回数量])
- 数组
-
- 遍历
- 构造函数
- Array.isArray()检测数组
- push()/pop() 栈
- shift()/unshift() 队列
- join()
- concat() 合并
- reverse() 翻转数组
- slice(start,end) 截取数组，左闭右开
- splice(index,len,新元素1，元素2...)
- sort() 字典顺序排序
- indexOf()/lastIndexOf() 查找
- 函数
-
- 函数的重复声明
- 函数名的提升
- 函数的属性和方法
- 函数作用域
- 函数参数
- 函数返回值
- 立即调用的函数(IIFE)
- eval 命令
- 对象
-
- 对象属性
- 对象方法
- Math对象 数学
-
- 静态属性
- 静态方法
- 借Math的方法
- 三角函数方法
- 生成随机颜色
- Date对象 日期
-
- 日期的运算
- 静态方法
- 实例方法/to类
- 实例方法/get类
- 实例方法/set类
- 唯一id
- DOM
-
- Node.nodeType属性
- 属性
- 获取元素
- 创建元素
- Element对象_属性
- Element获取元素位置一
- Element对象_方法
- Attribute属性的操作
- Text 节点
- Text节点属性
- Text节点方法
- DocumentFragment 节点（了解）
- Node 节点属性
- CSS操作
- 事件处理
-
- 鼠标事件
- 事件流
- Event事件对象
- 键盘事件
- 表单事件
- 窗口事件
- 焦点/剪贴板事件
- 网页状态事件
- Touch事件
- 事件代理(事件委托)
- this关键字
- 函数_闭包概念
- 闭包特点
- 闭包应用场景
- 闭包中的this关键字
- DOM实操
-
- 为什么没有闭包的时候，总是越界访问呢
-
- 为什么闭包可以解决这个问题
- Tab切换
- 瀑布流
-
- 页面布局
- 动态设置内容居中
- 动态设置图片位置
- 页面触底
- 上拉加载
- 轮播图
-
- 动态切换
- 放大镜
- 回到顶部
- 浏览器环境BOM
-
- script 元素工作原理
- 回流和重绘
- 定时器
-
- setTimeout()延迟执行
- setInterval()重复间隔执行
- 定时器应用
- 防抖(debounce)
- 节流(throttle)
- window 对象_属性
- window 对象_方法
- Navigator 对象
- Screen 对象
- History 对象
- Cookie 对象
- Cookie 属性
- 封装cookie操作
- apply、call和bind函数
- 面向对象
-
- 学习面向对象
- new 命令
- prototype原型
- 实例方法、静态方法、实例属性、静态属性
- \__proto__ (了解即可)
- constructor （了解）
- 原型 链
- instanceof 检测对象
- Object 对象的相关方法
- 对象的继承
- 多重继承
- 严格模式
- 正则表达式
-
- 字符串方法
- 匹配规则
-
- 字面量字符和元字符
- 转义符
- 字符类
- 预定义模式和重复类
- 量词符和贪婪模式
- 修饰符和组匹配
- 正则应用场景
- jQuery
-
- jQuery简介
- 选择器之基础选择器
- 选择器之属性选择器
- 选择器之jQuery扩展
- DOM操作
- CSS操作
- 事件
- 鼠标事件
- 表单事件
- 键盘事件
- 浏览器事件
- 事件对象
- 遍历
- 层级关系（树遍历）
- 动画
- jQuery实操
-
- 菜单功能
- 淡入淡出轮播图
- 自动折叠面板
- 回到顶部
js中一切皆对象，都是object的子类。
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。
- 为什么学习 JavaScript
- 操控浏览器的能力
- 广泛的使用领域
- 易学性
html是设计结构，css是美化结构，js是让结构动起来。nodejs是写服务器的，语言是js
-
JavaScript与ECMAScript的关系
- ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
-
关于JavaScript版本
在学习这门语言的初期，使用的是ES5版本。新版本后期讲。
js基础
- 语句
JavaScript 程序的单位是行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句
写js语言，可以在html里面的body使用script标签，里面写js语言，就像css在style里面一样。
var num=10; var是关键字，是声明语句的，num是名字/变量，=是赋值。10是值。
语句以分号结尾，一个分号就表示一个语句结束
- 标识符/命名规则
标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名
标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头
中文是合法的标识符，可以用作变量名（不推荐）
- JavaScript保留关键字
以下关键字不需要强行记忆！
arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
js里面有大小写的区别。
变量与常量
变量，常量，变量提升
-
console.log(变量) 可以在浏览器的终端输出变量的值
-
变量提升
JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。
说白了，就是不管你在什么位置创建的变量，在代码执行的时候，所有的声明变量语句都会被放到代码开头。
但是只有声明放在开头var num；但是num没有赋值。赋值还是在原来的位置，所以在声明变量之前可以访问，但是只有空值。
- 常量
使用const定义常量后，常量无法改变(扩展知识,ES6新特性)
JavaScript引入到HTML文件中
嵌入html中，引入本地js，引入网络js
- 嵌入到HTML文件中
<body>
<script>
var age = 20
script>
body>
- 引入本地独立JS文件
script标签一定要放在body的最下面，所有容器的底部
<body>
<script src="js路径"> script>
body>
- 引入网络来源文件
<body>
<script src="http://code.jquery.com/jquery1.2.1.min.js"> script>
body>
为什么要使用网络js呢？因为很多设计用的人多了，就有人去整理js文件。比如轮播图效果，直接在网上搜，，然后把人家提供的网络js文件导入进去。因为人家是写好的js，不会出什么大错误，我们可以直接放在head里面
引入过来的代码按照人家说的方式用就可以Swiper CDN - Swiper中文网
cdn是人家的网络js数据包
使用教程Swiper使用方法 - Swiper中文网
JavaScript注释与常见输出方式
-
JavaScript注释
- 源码中注释是不被引擎所解释的，它的作用是对代码进行解释。
- Javascript 提供两种注释的写法：一种是单行注释，用//起头；另一种是多行注释，放在/*和*/之间。
- 虽然js在html里面，但是注释方式不一样，html只能使用尖括号的那种。js必须在script标签里面，只能使用js自己的注释方式。
-
JavaScript输出方式
- JavaScript有很多种输出方式，都可以让我们更直观的看到程序运行的结果
- // 在浏览器中弹出一个对话框,然后把要输出的内容展示出来,alert都是把要输出的内容首先转换为字符串然后在输出的
- alert(“要输出的内容”); 弹窗
- document.write(“要输出的内容”); 类似html的标签
- // 在控制台输出内容
- console.log(“要输出的内容”);
数据类型
数值，字符串，布尔，null，undefined，对象，symbol
// 数值
var num= 10;
// 字符串
var str1= '你好'
var str2= "hi"
// 布尔
var flat=true;
var flat1=false;
// null
// undefined
var a1;
console.log(num); // 输出的就是undefined。null也是一样的，null是旧版本的输出
// 对象 里面都是键值对
var teacher1={
age:19,
name:'lily'
}
// symbol
上面是所有的数据类型。这些数据类型有不同的分类方式
- 原始类型(基础类型)
数值，字符串，布尔
- 合成类型(复合类型)
对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器
至于undefined和null，一般将它们看成两个特殊值
typeof 显示数据类型
JavaScript 有三种方法，可以确定一个值到底是什么类型。而我们现在需要接触到的就是typeof
跟python的type一样
-
数值返回number
-
字符串返回string
-
布尔值返回boolean
-
对象返回object
-
unll和undefined的区别
- null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关
- 当基本数据类型没有想要给他的值的时候，就用undefined赋值。
- 当对象没有数据的时候给他null赋值。
-
使用方式：typeof 变量
-
输出：console.log(typeof num);
算数运算符之加法运算符
数值相加，非数值相加，与字符串相加
任何类型和字符串相加，都是字符串类型
- 加法运算符（+）是最常见的运算符，用来求两个数值的和
- 非数值相加 主要是布尔类型相加，布尔与数值相加。布尔值是真就是数值1，假是数值0
- 与字符串相加
- 比较特殊的是，如果是两个字符串相加，这时加法运算符会变成连接运算符，返回一个新的字符串，将两个原字符串连接在一起。
运算符之算术运算符
- 加减乘除运算符
- 余数运算符 就是取余
- 自增和自减运算符 ++ –
运算符之赋值运算符
有：=，+=，-=，*=，/=，%=
=是赋值，不是等于
运算符之比较运算符
有：<，>，<=，>=，==，!=，!==，===
小于，大于，小于等于，大于等于，等于，不等于，严格不等于，严格等于
严格等于是有类型的限制。不能是类型不同。两个等于只需要值相等，三个等于是有类型和值同时相等。
运算符之布尔运算符
把表达式变成布尔值，真假值。
取反！，且&&，或||
- 布尔值是假，对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。
- undefined，null，false，0，NaN，空字符串（‘’）
空格也是字符，空格不算假
运算符之位运算符
位运算符直接处理每一个比特位（bit），是非常底层的运算，好处是速度极快，缺点是很不直观，许多场合不能使用它们，否则会使代码难以理解和查错
- 快速计算位移方案
左移运算符<< 就是*2的n次方（n代表位移次数）
右移运算符>> 就是/2的n次方 (n代表位移次数，不同点，出现小数时要取整）
运算符优先级
查文档就行了
如果多个运算符混写在一起，常常会导致令人困惑的代码,所以一般我们可以通过多条语句完成，记住所有运算符的优先级，是非常难的，也是没有必要的
- 解决方案
添加小括号()
分离开来，写成多条语句
类型转换
自动转换，强制转换
- 自动转换，遇到以下两种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。
- 就是刚刚的字符串加法运算的情况
- 第一种情况：不同类型的数据互相运算
- 第二种情况：对非布尔值类型的数据求布尔值
- 强制转化
- 强制转换主要指使用Number、String和Boolean三个函数，手动将各种类型的值，分布转换成数字、字符串或者布尔值。
- 使用Number函数，可以将任意类型的值转化成数值
- String函数可以将任意类型的值转化成字符串，
- Boolean函数可以将任意类型的值转为布尔值
控制语句
if
- if语句语法规范
if (布尔值){ 语句; } if (布尔值) 不加大括号，只能跟一条语句 语句;
和c语言一样
if…else
if (m === 3) { // 满足条件时，执行的语句 } else if(m===2){ // 不满足条件时，执行的语句 }else{ }
if…else if…else
switch
switch (fruit) {
case "banana":
// ...
break;
case "apple":
// ...
break;
default:
// ...
}
和c语言一模一样
三元运算符 (条件) ? 正确 : 错误
for
for (初始化表达式; 条件; 迭代因子) {
语句
}
for (var i=0;i<10;i++){
console.log(i);
}
//c++
for (int i=0;i<10;i++){
printf(i);
}
//python
for i in range(10)
print(i)
while
while (条件) {
语句;
}
break,continue
字符串
字符串就是零个或多个排在一起的字符，放在单引号或双引号之中
单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号
如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此
字符串默认只能写在一行内，分成多行将会报错。如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠
如果真的有多行文本的需求，可以使用字符串拼接的方式实现。使用加号连接。
转义
反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符
\0 ：null（\u0000）
\b ：后退键（\u0008）
\f ：换页符（\u000C）
\n ：换行符（\u000A）
\r ：回车键（\u000D）
\t ：制表符（\u0009）
\v ：垂直制表符（\u000B）
’ ：单引号（\u0027）
" ：双引号（\u0022）
\ ：反斜杠（\u005C）
length 属性
length属性返回字符串的长度，该属性也是无法改变的
str1.length
字符串转码
- Base64转码
所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的，不是为了加密，而是为了不出现特殊字符，简化程序的处理.JavaScript 原生提供两个 Base64 相关的方法
btoa()：任意值转为 Base64 编码
atob()：Base64 编码转为原来的值
var string = 'Hello World!'; btoa(string) // "SGVsbG8gV29ybGQh" atob('SGVsbG8gV29ybGQh') // "Hello World!"
中文是不可以进行处理的.如果非要处理中文，需要在增加两个方法encodeURIComponent(), decodeURIComponent()
function b64Encode(str) {
return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
return decodeURIComponent(atob(str));
}
b64Encode('你好') //"JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"
charAt()
charAt 方法返回指定位置的字符，参数是从 0 开始编号的
人话：把字符串看成一个字符串数组，按照下标取数组的元素。
var s = new String('itbaizhan');
s.charAt(1) // "t" 取下标为1的元素
s.charAt(s.length - 1) // "n" 取最后一个元素
如果参数为负数，或大于等于字符串的长度， charAt 返回空字符串
concat()
concat 方法用于连接两个字符串，返回一个新字符串，不改变原字符串,s1.concat(s2)
该方法可以接受多个参数,console.log(‘’.concat(one, two, three) )
如果参数不是字符串， concat 方法会将其先转为字符串，然后再连接
和使用加号拼接字符串的效果是一样的
slice(start[,end]) 左闭右开
slice 方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）
就是从字符串里面取子串
'itbaizhan'.slice(0, 4) // "it"
如果省略第二个参数，则表示子字符串一直到原字符串结束
如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度
'itbaizhan'.slice(-7) // "baizhan"
substring()
和slice一样，但是slice不支持，第二个参数比第一个参数靠前。
substring在发现第二个参数比第一个参数靠前的时候，会自动交换两个参数的位置，属于是slice的修复版
如果参数是负数， substring 方法会自动将负数转为0
由于这些规则违反直觉，因此不建议使用 substring 方法，应该优先使用 slice
substr(index,len)
和slice，substring的作用是一样的
但是参数的意义不一样了，第一个参数是子串截取的下标，第二个参数是子串要截取的长度
如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串
第二个参数为0，就是空字符串拉
indexOf()/lastIndexOf()
-
就是找子串的起始位置。可以有第二个参数，第二个参数是从字符串第几位元素开始寻找子串。
-
indexof是正着找子串，lastindexof是反着找子串。
indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回 -1 ，就表示不匹配
indexOf 方法还可以接受第二个参数，表示从该位置开始向后匹配
lastIndexOf 方法的用法跟 indexOf 方法一致，主要的区别是 lastIndexOf 从尾部开始匹配， indexOf 则是从头部开始匹配
trim()
trim 方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串
- 使用方式：字符串.trim()
该方法去除的不仅是空格，还包括制表符（ \t 、 \v ）、换行符（ \n ）和回车符（ \r ）
- ES6扩展方法， trimEnd() 和 trimStart() 方法
- trimEnd() 只去尾部空格
- trimStart() 只去头部空格
toLowerCase()/toUpperCase()
toLowerCase 方法用于将一个字符串全部转为小写， toUpperCase 则是全部转为大写。它们都返回一个新字符串，不改变原字符串
- 将字符串首字母变为大写
itbaizhan'.charAt(0).toUpperCase() +'itbaizhan'.substr(1);
search(子串)/replace()
search 方法确定原字符串是否匹配某个子字符串,返回值为匹配的第一个位置。如果没有找到匹配，则返回 -1 。
search和indexof作用类型。都是找子串的。目前他们的效果作用都是一样的，在学了正则表达式之后就不一样了。
replace 方法用于替换匹配的子字符串'sxtbaizhan'.replace('sxt', 'it')
replace多处用在删除子串。就是根据我们提供的子串1，和一个空字符串的子串2，就能完成字符串删除子串的操作
- 如果replace的第二个参数是空，就是删除子串1。
- 如果replace的第一个参数是空，就是在字符串的最前面添加子串2. 只能在字符串的开头添加
split(要分隔的字符[,返回数量])
split 方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组
如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
如果省略参数，则返回数组的唯一成员就是原字符串
split 方法还可以接受第二个参数，限定返回数组的最大成员数。
- 如果只写一个参数，就是对原字符串进行分隔的位置
- 如果写了第二个参数，就会返回分隔后的子串。填写数字几，就返回几个子串。如果你填写的数字多余分隔的子串数量，也不报错。就是有几个返回几个。
返回的是子串数组。
数组
数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
var arr = ['it',10,true,{}];
数组也可以先定义后赋值。
任何类型的数据，都可以放入数组
数组可以嵌套数组arr[1][2]
数组的本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object
- length 属性
- 数组的length属性，返回数组的成员数量
length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值.数据丢失
var arr = ['sxt', 'baizhan', 'it']; arr.length = 2; // ['sxt', 'baizhan']
- 清空数组的一个有效方法，就是将length属性设为0
如果访问数组的时候，指定下标，下标超过数组的最大长度，就会返回undefined
遍历
- 使用for循环或while循环
for(var i = 0; i < a.length; i++) { console.log(a[i]); }
- for…in遍历数组
for (var i in arr) { console.log(arr[i]); }
构造函数
- 数组的空位
当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位.空位的打印结果是undefined
var a = ['sxt', , 'it']; a.length // 3
如果参数是一个正整数，返回数组的成员都是空位。虽然读取的时候返回 undefined ，但实际上该位置没有任何值。虽然可以取到 length 属性，但是取不到键名
- 构造函数new Array
new就是构造方法
Array 是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组
var arr = new Array(2); arr.length // 2
如果没有使用 new ，运行结果也是一样的。var arr = Array(2);
不建议使用它生成新数组，直接使用数组字面量是最简约的做法.字面量：var arr=[];
Array.isArray()检测数组
这个方法就是Array.isArray()，参数写检测的变量c
Array.isArray 方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof 运算符的不足.
字符串不是数组
使用typeof对一个数组进行检测，只会得到一个object的对象类型
- 静态方法：Array.isArray(arr1)
- 实例方法：[].pop()
push()/pop() 栈
push 方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组
pop 方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组
对空数组使用 pop 方法，不会报错，而是返回 undefined
push 和 pop 结合使用，就构成了“后进先出”
shift()/unshift() 队列
- shift 方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组
shift 方法可以遍历并清空一个数组
while (item = list.shift()) { console.log(item); }
- unshift 方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组
unshift 方法可以接受多个参数，这些参数都会添加到目标数组头部
join()
join 方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔
如果数组成员是 undefined 或 null 或空位，会被转成空字符串
数组的 join 配合字符串的 split 可以实现数组与字符串的互换
concat() 合并
concat 方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变
除了数组作为参数， concat 也接受其他类型的值作为参数，添加到目标数组尾部。
- 应用场景
- 上拉加载，合并数据
[1, 2, 3].concat(4, 5, 6,[7,8,9])本来是只接收数组对象的，但是数值也可以转换成数组类型使用，如果是数组，就会直接合并到原数组
reverse() 翻转数组
reverse 方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组
因为字符串没法直接翻转，可以使用split把字符串切割成单字符数组，再使用reverse翻转，再使用join拼接
str1.split(“”).reverse().join()
slice(start,end) 截取数组，左闭右开
和字符串的截取方式一样
slice 方法用于提取目标数组的一部分，返回一个新数组，原数组不变
它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一
直返回到原数组的最后一个成员
如果 slice 方法的参数是负数，则表示倒数计算的位置
如果第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组
如果无参，就把数组全都打印出来
splice(index,len,新元素1，元素2…)
splice 方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组
splice 的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素
起始位置如果是负数，就表示从倒数位置开始删除
如果只是单纯地插入元素， splice 方法的第二个参数可以设为 0
如果只提供第一个参数，等同于将原数组在指定位置拆分成两个数组
sort() 字典顺序排序
sort 方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变
sort 方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面
indexOf()/lastIndexOf() 查找
indexOf 方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回 -1
indexOf 方法还可以接受第二个参数，表示搜索的开始位置
lastIndexOf 方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回 -1
这两个方法不能用来搜索 NaN 的位置，即它们无法确定数组成员是否包含 NaN
这是因为这两个方法内部，使用严格相等运算符（ === ）进行比较，而 NaN 是唯一一个不等于自身的值
函数
- 函数的声明
JavaScript 有三种声明函数的方法
- function 命令： function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。
function print(s) { console.log(s);}
- 函数表达式 除了用function命令声明函数，还可以采用变量赋值的写法
var print = function(s) { console.log(s);};
- Function 构造函数 第三种声明函数的方式是Function构造函数。 几乎无人使用
- var add = new Function( ‘x’, ‘y’, ‘return x + y’); 这种声明函数的方式非常不直观，几乎无人使用
函数的重复声明
如果同一个函数被多次声明，后面的声明就会覆盖前面的声明
函数名的提升
JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。
但是，如果采用赋值语句定义函数，JavaScript 就会报错.赋值语句没有变量提升
// 会报错，因为赋值定义的函数，不能提升
test():
var test(a,b){
console.log(a,b);
}
不能在条件语句中声明函数
根据 ES5 的规范，不得在非函数的代码块中声明函数，最常见的情况就是if语句
函数的属性和方法
- name 属性
- 返回函数的名字
- 如果是通过变量赋值定义的函数，那么name属性返回变量名
- length 属性
- 返回函数参数个数
- toString()
- 返回函数的源码
函数作用域
Javascript 有两种作用域：一种是全局作用域，变量在整个程序中一直存在；另一种是函数作用域，变量只在函数内部存在
函数外部声明的变量就是全局变量
在函数内部定义的变量，外部无法读取，称为“局部变量”
函数内部定义的变量，会在该作用域内覆盖同名全局变量
-
局部变量只能在函数内部声明，在其他区块中声明，一律都是全局变量
-
函数内部的变量提升
- 与全局作用域一样，函数作用域内部也会产生“变量提升”现象。var命令声明的变量，不管在什么位置，变量声明都会被提升到函数体的头部
只要不在函数体内声明的变量，都是全局变量，比如for，if语句里面的都是全局变量
函数参数
- 参数的省略，函数参数不是必需的，Javascript 允许省略参数
- 函数参数如果是原始类型的值（数值、字符串、布尔值），传递方式是传值传递。
- 在函数体内修改参数值，不会影响到函数外部
- 同名参数，如果有同名的参数，则取最后出现的那个值。就是我们设计函数参数的时候，给两个参数取的别名是一样的，就以后面的参数为准。function add(x,x)
如果全局变量是以参数传入函数，或者是重新使用var声明的变量。在函数内部修改变量，在函数体外部不受影响。
如果全局变量是在函数体内部直接使用，就会被修改。
- arguments 对象
由于 JavaScript 允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是arguments对象的由来
var list = function (one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
list(1, 2, 3)
- arguments 与数组的关系
- 需要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（比如slice和forEach），不能在arguments对象上直接使用。如果要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组
函数返回值
JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果反馈给外界
在函数体内，使用 return 语句可以设置函数的返回值。
如果return语句后不跟任何值就相当于返回一个undefined
如果函数中不写return，则也会返回undefined
在函数中return后的语句都不会执行
立即调用的函数(IIFE)
在 Javascript 中，圆括号()是一种运算符，跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。那如何让函数自己执行呢
(function(){
/* code */ }());
// 或者
(function(){
/* code */ })();
- 自执行函数传递参数
var a = 10;
var b = 20;
(function (x,y){
console.log(x+y);})(a,b);
eval 命令
将字符串当作语句执行，一般用作代码加密。
eval('var a = 1;');
对象
JavaScript 语言中，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合
- 声明一个对象
var user = {
name: 'itbaizhan',
age: '13'
};
- 如果键名不符合标识名的条件（比如第一个字符为数字，或者含有空格或运算符），则必须加上引号，否则会报错，比如，‘1p’, ‘h w’, ‘p+q’,
对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用
如果属性的值还是一个对象，就形成了链式引用user.container.frontEnd
对象属性
- 读取属性
读取对象的属性，有两种方法，一种是使用点运算符，还有一种是使用方括号运算符
user.hello
user[‘hello’]
如果使用方括号运算符，键名必须放在引号里面，否则会被当作变量处理
- 属性的赋值
点运算符和方括号运算符，不仅可以用来读取值，还可以用来赋值
-
JavaScript 允许属性的“后绑定”，也就是说，你可以在任意时刻新增属性，没必要在定义对象的时候，就定义好属性
-
查看一个对象本身的所有属性，可以使用 Object.keys(对象名) 方法
-
delete 命令用于删除对象的属性，删除成功后返回 true。。。。delete user.name
删除一个不存在的属性， delete 不报错，而且返回 true
只有一种情况， delete 命令会返回 false ，那就是该属性存在，且不得删除(使用率极低)
- for…in 循环 用来遍历一个对象的全部属性
for (var i in user) {
console.log(user[i]);
}
对象方法
Object 对象的方法分成两类： Object 本身的方法与 Object 的实例方法
跟python的类一样。有类方法，和类的实例方法两种。
-
Object 对象本身的方法，就是直接定义在 Object 对象的方法
-
Object 的实例方法，就是定义在 Object 原型对象 Object.prototype 上的方法。它可以被 Object 实例直接使用
Object.prototype.print = function (name) {
console.log(name);
};
var user = {
name:'itbaizhan'
}
user.print(user.name);
就行数组的方法一样，Array.isArray(num1)和num1.pop() 这两种形式。第一种是对象方法，第二种是实例方法。
Math对象 数学
静态属性
Math是 JavaScript 的原生对象，提供各种数学功能。
该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用
- 提供以下一些数学常数
Math.E：常数e。
Math.LN2：2 的自然对数。
Math.LN10：10 的自然对数。
Math.LOG2E：以 2 为底的e的对数。
Math.LOG10E：以 10 为底的e的对数。
Math.PI：常数 PI。
Math.SQRT1_2：0.5 的平方根。
Math.SQRT2：2 的平方根。Math.E // 2.718281828459045
Math.LN2 // 0.6931471805599453
Math.LN10 // 2.302585092994046
Math.LOG2E // 1.4426950408889634
Math.LOG10E // 0.4342944819032518
Math.PI // 3.141592653589793
Math.SQRT1_2 // 0.7071067811865476
Math.SQRT2 // 1.4142135623730951
这些属性都是只读的，不能修改
静态方法
- Math.abs() 取绝对值
- Math.max() 取最大值 接收一组数据
- Math.min() 取最小值 接收一组数据
- 如果参数为空, Math.min 返回 Infinity , Math.max 返回 -Infinity 。
- Math.floor() 向下取整 返回小于参数值的最大整数，math.floor(12.9) =12
- Math.ceil() 向上取整
- Math.round() 四舍五入
- Math.round(-1.5) // -1
- Math.round(0.5) // 1
- Math.pow(a,b) 求次方，求a的b次方
- Math.sqrt() 求根，开方，
- 返回参数值的平方根。如果参数是一个负值，则返回NaN
- Math.log 以 e 为底的自然对数值
- Math.exp(n) e 的n次方
- Math.random() 返回0到1之间的一个伪随机数，可能等于0，但是一定小于1
借Math的方法
因为Math的方法在某些场合下比较适用，我们想要直接适用Math的一些方法，比如求最大值的max
但是，Math.max不接受一个数组作为参数。所以需要使用其他方法使用这个方法。
Math.max.apply(null,arr); apply方法，可以借用math里面的方法，第一个参数为null，第二个参数是数组。然后就可以求出数组的最大值了。
三角函数方法
Math.sin()：返回参数的正弦（参数为弧度值）
Math.cos()：返回参数的余弦（参数为弧度值）
Math.tan()：返回参数的正切（参数为弧度值）
Math.asin()：返回参数的反正弦（返回值为弧度值）
Math.acos()：返回参数的反余弦（返回值为弧度值）
Math.atan()：返回参数的反正切（返回值为弧度值）
生成随机颜色
利用random生成随机数，然后我们自定义一个字符串，也就是十六进制的所有位0123456789abcdef。
利用随机数乘以16，然后取整，再从字符串提取字符。最后把字符拼接。得到随机颜色。
要向下取整，防止超过最大值。
Date对象 日期
- Date 对象可以作为普通函数直接调用，返回一个代表当前时间的字符串
Date()
'Tue Oct 26 2022 10:31:34 GMT+0800 (中国标准时间)'
即使带有参数， Date 作为普通函数使用时，返回的还是当前时间
Date(2000, 1, 1)
// 'Tue Oct 26 2022 10:31:34 GMT+0800 (中国标准时间)'
- Date 还可以当作构造函数使用。对它使用 new 命令，会返回一个 Date对象的实例。如果不加参数，实例代表的就是当前时间
var today = new Date();
作为构造函数时， Date 对象可以接受多种格式的参数，返回一个该参数对应的时间实例
// 参数为时间零点开始计算的毫秒数
new Date(1635215676627)
// Tue Oct 26 2021 10:34:36 GMT+0800 (中国标准时间)
// 参数为日期字符串
new Date('January 6, 2020');
// Mon Jan 06 2020 00:00:00 GMT+0800 (中国标准时间)
// 参数为多个整数，
// 代表年、月、日、小时、分钟、秒、毫秒
new Date(2020, 0, 1, 0, 0, 0, 0)
// Wed Jan 01 2020 00:00:00 GMT+0800 (中国标准时间)
- 各种类型的参数
new Date('2022-2-15')
new Date('2022/2/15')
new Date('02/15/2022')
new Date('2022-FEB-15')
new Date('FEB, 15, 2022')
new Date('FEB 15, 2022')
new Date('Feberuary, 15, 2022')
new Date('Feberuary 15, 2022')
new Date('15 Feb 2022')
new Date('15, Feberuary, 2022')
日期的运算
传两个日期，做差，得到毫秒
var d1 = new Date(2000, 2, 1);
var d2 = new Date(2000, 3, 1);
d2 - d1 // 2678400000 毫秒
静态方法
-
Date.now 方法返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数，相当于 Unix 时间戳乘以1000
- 就是时间戳
- 时间戳是前端用来和服务器交互的
-
Date.parse 方法用来解析日期字符串，返回该时间距离时间零点（1970年1月1日 00:00:00）的毫秒数
- 如果解析失败，返回 NaN
Date.parse(‘Aug 9, 2022’)
Date.parse(‘January 26, 2022 13:51:50’)
Date.parse(‘Mon, 25 Dec 2022 13:30:00 GMT’)
Date.parse(‘Mon, 25 Dec 2022 13:30:00 +0430’)
Date.parse(‘2022-10-10’)
Date.parse(‘2022-10-10T14:48:00’)
实例方法/to类
Date 的实例对象，有几十个自己的方法，分为三类
-
to 类：从 Date 对象返回一个字符串，表示指定的时间。
get 类：获取 Date 对象的日期和时间。
set 类：设置 Date 对象的日期和时间。 -
toUTCString 方法返回对应的 UTC 时间，也就是比北京时间晚8个小时
-
toDateString 方法返回日期字符串（不含小时、分和秒）
-
toTimeString 方法返回时间字符串（不含年月日）
-
toLocaleDateString 方法返回一个字符串，代表日期的当地写法（不含小时、分和秒）
-
toLocaleTimeString 方法返回一个字符串，代表时间的当地写法（不含年月日）
实例方法/get类
Date 对象提供了一系列 get* 方法，用来获取实例对象某个方面的值
getTime()：返回实例距离1970年1月1日00:00:00的毫秒数
getDate()：返回实例对象对应每个月的几号（从1开始）
getDay()：返回星期几，星期日为0，星期一为1，以此类推
getYear()：返回距离1900的年数
getFullYear()：返回四位的年份
getMonth()：返回月份（0表示1月，11表示12月）
getHours()：返回小时（0-23）
getMilliseconds()：返回毫秒（0-999）
getMinutes()：返回分钟（0-59）
getSeconds()：返回秒（0-59）
实例方法/set类
Date 对象提供了一系列 set* 方法，用来设置实例对象的各个方面
setDate(date) ：设置实例对象对应的每个月的几号（1-31）
setYear(year) : 设置距离1900年的年
setFullYear(year [, month, date]) ：设置四位年份
setHours(hour [, min, sec, ms]) ：设置小时（0-23）
setMilliseconds() ：设置毫秒（0-999）
setMinutes(min [, sec, ms]) ：设置分钟（0-59）
setMonth(month [, date]) ：设置月份（0-11）
setSeconds(sec [, ms]) ：设置秒（0-59）
setTime(milliseconds) ：设置毫秒时间戳
唯一id
因为时间戳是不可重复的，所以，一般使用随机数拼接时间戳。创建唯一的id。只要时间戳不一样，id就永远不一样。所以id越长越安全。
三十六进制：0123456789abcdefghijklmnopqrstuvwxyz
使用tostring(36) 可以把时间戳变成三十六进制的字符串。这样就是随机数+时间戳的三十六进制的超级防伪了。
DOM
是js与页面交互的桥梁
js通过DOM操作浏览器
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）
浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言
-
节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子- 就像爬虫分析网页的元素一样
-
节点的类型有七种
Document：整个文档树的顶层节点，就是html文件
DocumentType：doctype标签，html的声明
Element：网页的各种HTML标签，所有的元素
Attribute：网页元素的属性（比如class=“right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
- 节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树
-
除了根节点，其他节点都有三种层级关系
-
父节点关系（parentNode）：直接的那个上级节点
-
子节点关系（childNodes）：直接的下级节点
-
同级节点关系（sibling）：拥有同一个父节点的节点
-
Node.nodeType属性
不同节点的nodeType属性值和对应的常量如下
文档节点（document）：9，对应常量Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE
属性
- document.doctype
指向 DOCTYPE 节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成 !DOCTYPE html 。如果网页没有声明 DTD，该属性返回null
var doctype = document.doctype; // ""
-
document.documentElement 文档的根节点（root）html
-
document.body，document.head
-
document.forms 属性返回所有 form 表单节点
-
document.images 属性返回页面所有 img 图片节点
-
document.scripts 属性返回所有 script 节点
-
一般是判断页面有没有js文件
-
var scripts = document.scripts; if (scripts.length !== 0 ) { console.log('当前网页有脚本'); }
-
-
document.domain 属性返回当前文档的域名
获取元素
- document.getElementsByTagName() 通过元素类型获取
document.getElementsByTagName 方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection 实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集
通过这种方法可以获取页面中的元素，也可以使用innerHTML修改元素里面的内容
document.getElementsByTagName(‘p’);
- document.getElementsByClassName() 通过类名获取，常用
包括了所有 class 名字符合指定条件的元素，元素的变化实时反映在返回结果中
由于 class 是保留字，所以 JavaScript 一律使用 className 表示 CSS 的class
参数可以是多个 class ，它们之间使用空格分隔
-
document.getElementsByName() 通过name属性定位
-
document.getElementById() 通过id获取
-
document.querySelector() 通过css的选择器，就是.box等等，这个是只返回一个
-
document.querySelectorAll() 和上面的用法一样，这里是返回符合的所有元素
创建元素
-
document.createElement 生成元素节点
-
document.createTextNode 生成文本
-
document.createAttribute 生成属性
- className.value=‘box’ 赋值
-
添加元素，父元素.appendChild(子元素)
Element对象_属性
Element对象对应网页的 HTML 元素。每一个 HTML 元素，在DOM 树上都会转化成一个Element节点对象（以下简称元素节点）
- Element.id 属性返回指定元素的 id 属性，该属性可读写
- Element.className 属性用来读写当前元素节点的 class 属性。它的值是一个字符串，每个 class 之间用空格分割
- Element.classList
- add() ：增加一个 class。
- remove() ：移除一个 class。
- contains() ：检查当前元素是否包含某个 class。
- toggle() ：将某个 class 移入或移出当前元素。没有就添加，有就移除
div.classList.add('foo', 'bar');
- Element.innerHTML 该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括 HTML 和 body 元素
- Element.innerText innerText 和 innerHTML 类似,不同的是 innerText 无法识别元素，会直接渲染成字符串
Element获取元素位置一
clientHeight 获取元素高度包括 padding 部分，但是不包括 border 、 margin
clientWidth 获取元素宽度包括 padding 部分，但是不包括 border 、 margin
clientLeft 元素节点左边框（left border）的宽度
clientTop 元素节点上边框（top border）的高度
scrollHeight 元素总高度，它包括 padding ，但是不包括 border 、 margin 包括溢出的不可见内容
scrollWidth 元素总宽度，它包括 padding ，但是不包括 border 、 margin 包括溢出的不可见内容
scrollLeft 元素的水平滚动条向右滚动的像素数量
scrollTop 元素的垂直滚动条向下滚动的像素数量
offsetHeight 元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
offsetWidth 元素的 CSS 水平宽度（单位像素），包括元素本身的高度、padding 和 border
offsetLeft 到定位父级左边界的间距
offsetTop 到定位父级上边界的间距
Element对象_方法
- Element.focus 方法用于将当前页面的焦点，转移到指定元素上
document.getElementById('my-span').focus();
类似百度网页，一打开百度，默认就点击了搜索框。
- Element.blur 方法用于将焦点从当前元素移除 移除焦点
- Element.remove 方法用于将当前元素节点从它的父节点移除
- Element.getBoundingClientRect 方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息
- getBoundingClientRect 方法返回的 rect 对象，具有以下属性（全部为只读）
- x ：元素左上角相对于视口的横坐标
- y ：元素左上角相对于视口的纵坐标
- height ：元素高度
- width ：元素宽度
- left ：元素左上角相对于视口的横坐标，与 x 属性相等
- right ：元素右边界相对于视口的横坐标（等于 x + width ）
- top ：元素顶部相对于视口的纵坐标，与 y 属性相等
- bottom ：元素底部相对于视口的纵坐标（等于 y + height ）
- getBoundingClientRect 方法返回的 rect 对象，具有以下属性（全部为只读）
Attribute属性的操作
HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）
-
元素节点提供四个方法，用来操作属性
- getAttribute()
- setAttribute()
- hasAttribute()
- removeAttribute()
-
Element.getAttribute 方法返回当前元素节点的指定属性。如果指定属性不存在，则返回 null
div.getAttribute('align')
是返回属性的值。
-
Element.setAttribute 方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性
d.setAttribute('align', 'center');myImage.setAttribute('src','images/girl.png');
-
Element.hasAttribute 方法返回一个布尔值，表示当前元素节点是否包含指定属性
d.hasAttribute('align')
-
Element.removeAttribute 方法用于从当前元素节点移除属性
d.removeAttribute('class');
-
dataset 属性
- 比如data-itbaizhan
- var n = document.getElementById(‘box’);
- n.dataset.itbaizhan 定位了data-itbaizhan.对，就是可以省略前面的data前缀，当然，在设置属性的时候，要手动添加这个前缀
Text 节点
文本节点（ Text ）代表元素节点（ Element ）和属性节点（ Attribute ）的文本内容。
使用率很低
Text节点属性
- data 属性用来设置或读取文本节点的内容
// 读取文本内容 document.querySelector('p').firstChild.data // 设置文本内容 document.querySelector('p').firstChild.data ='Hello World';文本写在标签里面，这个文本是标签的子元素。文本和元素本身不是平级的。
- length 属性返回当前文本节点的文本长度
Text节点方法
就是对text节点进行增删查改
- appendData() 在 Text 节点尾部追加字符串
- deleteData(index,len) 删除 Text 节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度
- insertData() 在 Text 节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串
- replaceData() 用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串
- substringData() 用于获取子字符串，第一个参数为子字符串在 Text 节点中的开始位置，第二个参数为子字符串长度
- remove 方法用于移除当前 Text 节点
DocumentFragment 节点（了解）
本质是一个临时文件，存放我们想要创建的标签。然后一次性插入页面
DocumentFragment 节点本身不能被插入当前文档，插入文档中的是他里面的子元素
多次操作DOM，可以使用 DocumentFragment 变成一次操作，节省了内存的消耗
Node 节点属性
所有 DOM 节点都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础
节点的类型有七种
Document：整个文档树的顶层节点
DocumentType：doctype标签 (用不到)
Element：网页的各种HTML标签
Attribute：网页元素的属性（比如class=“right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段-
nodeName 属性返回节点的名称
-
不同节点的 nodeName 属性值如下
- 文档节点（document）： #document
- 元素节点（element）：大写的标签名
- 属性节点（attr）：属性的名称
- 文本节点（text）： #text
- 文档片断节点（DocumentFragment）： #document-fragment
- 文档类型节点（DocumentType）：文档的类型
- 注释节点（Comment）： #comment
-
nodeValue 属性返回一个字符串，表示当前节点本身的文本值，该属性可读写
-
textContent 属性返回当前节点和它的所有后代节点的文本内容
-
nextSibling 属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回 null
-
previousSibling 属性返回当前节点前面的，距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回 null
-
parentNode 属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：元素节点（element）、文档节点（document）和文档片段节点（documentfragment）
-
firstChild/lastChild
- firstChild 属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回 null
- lastChild 属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回 null 。用法与 firstChild 属性相同
-
childNodes 属性返回一个类似数组的对象（ NodeList 集合），成员包括当前节点的所有子节点
- 可以使用数组的方法去读取，但是不能使用数组的方式去修改
- 使用该属性，可以遍历某个节点的所有子节点
-
appendChild 方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点
- 动态增加内容
-
hasChildNodes 方法返回一个布尔值，表示当前节点是否有子节点
-
cloneNode 方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点
-
insertBefore 方法用于将某个节点插入父节点内部的指定位置
- insertBefore 方法接受两个参数，第一个参数是所要插入的节点newNode ，第二个参数是父节点 parentNode 内部的一个子节点referenceNode 。 newNode 将插在 referenceNode 这个子节点的前面。返回值是插入的新节点 newNode 。
-
removeChild 方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点
-
replaceChild 方法用于将一个新的节点，替换当前节点的某一个子节点
- replaceChild 方法接受两个参数，第一个参数 newChild 是用来替换的新节点，第二个参数 oldChild 是将要替换走的子节点。返回值是替换走的那个节点 oldChild
CSS操作
- HTML 元素的 style 属性
操作 CSS 样式最简单的方法，就是使用网页元素节点的 setAttribute 方法直接操作网页元素的 style 属性
div.setAttribute( 'style', 'background-color:red;' + 'border:1px solid black;' );- 元素节点的 style 属性
var divStyle = document.querySelector('div').style; divStyle.backgroundColor = 'red'; divStyle.border = '1px solid black'; divStyle.width = '100px'; divStyle.height = '100px'; divStyle.fontSize = '10em';- cssText 属性
var divStyle = document.querySelector('div').style; divStyle.cssText = 'background-color: red;border: 1px solid black;height: 100px;width: 100px;';事件处理
就是控件与槽函数之间的桥梁，事件
-
事件处理程序分为：
1 HTML事件处理
2 DOM0级事件处理
3 DOM2级事件处理
4 IE事件处理 （弃用） -
HTML事件
- 优点：简单
- 缺点：html和js写在一个文件里面，不利于后期维护
- 移除事件，只能删掉槽函数或者覆盖槽函数（弃用）
DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Js事件详解--事件处理title> head> <body> <div id="div"> <button id="btn1" onclick="demo()">按钮button> div> <script> function demo(){ alert("hello html事件处理"); } script> body> html>就是在元素里面增加onclick属性，后面写要执行的事件。
- DOM0级事件处理
- 优点：html和js分离
- 缺点：同名槽函数会覆盖，以最后一个为准。如果没有同名函数就没问题了
- 使用οnclick=null移除事件
<body> <div id="div"> <button id="btn1">按钮button> div> <script> var btn1=document.getElementById("btn1"); btn1.onclick=function(){ alert("HelloDOM0级事件处理程序1");}//被覆盖掉 btn1.onclick=function(){ alert("HelloDOM0级事件处理程序2");} script> body>和html事件一样，就是不用特意添加onclick属性了。
- DOM2级事件处理
- 优点：html与js分离，事件不覆盖
- 缺点：复杂
- 移除事件removeEventListener(“click”,demo2);，第一个参数是事件，第二个是槽函数
<body> <div id="div"> <button id="btn1">按钮button> div> <script> var btn1=document.getElementById("btn1"); btn1.addEventListener("click",demo1); btn1.addEventListener("click",demo2); btn1.addEventListener("click",demo3); function demo1(){ alert("DOM2级事件处理程序1") } function demo2(){ alert("DOM2级事件处理程序2") } function demo3(){ alert("DOM2级事件处理程序3")