数据类型、DOM、BOM

数据类型分类

基本数据类型
- String Number Boolen undefined null (Symbol和BigInt)
复杂数据类型
- 也叫做引用数据类型
- function 函数
- object 对象
- array 数组

object 对象

+ 对象是一个无序的数据集合
+ 数据集合：可以存储多个数据的集合
+ 对象数据储存方式：键值对
+ 注意点
    + 对象中的键名只能是字符串或symbol数据类型
    + 对象中高度键值可以是任意的数据类型
    + 对象的键名不能重复，否则会别覆盖
    + 对象的书写{}就是对象数据，在{}中的键值对就是对象的数据，多个键值对通过逗号分隔
- 对象的创建方式：
    + 字面量方式的创建
    ```js
    var obj = {}        
    ```
    + 内置构造函数创建Object
    ```js
    var obj = new Object()
    ```
- 对象成员的操作方式：
    + 点语法
    + 数组关联法
        + 增
          + 点语法 对象.键名 = 键值
        + 修改
          + 点语法 对象.键名 = 键值
        + 查看
          +  点语法 对象.键名 = 键值
       +  删除
          +  点语法 delete 对象.键名
    + 数组关联法则是将.键名 换成 ['键名']即可
    + 注意：当我们需要使用变量的值作为对象的键名来操作对象成员的时候，只能使用数组关联法   
- 对象的遍历
  + 遍历：通过循环的方式获取数据内容
  + 语法 for(var 变量 in 对象){变量就是对象的每一个键名}
  + 对象成员有多少个就执行多少次
  ```js
    var obj = {
        username = 'www',
        age:18,
        sex:'男',
        6:55
    }
    //当对象里面出现数字为键名的时候排序优先
  ```
  - 字符串隐式转换 ----使用String(对象) 返回'[object object]'
  -

数组

+ ：是一个有序的数据集合
+ 数组中的数据的存储方式：数据直接存放在[]中，多个数据使用逗号分隔，
+ 有序值的是：数组中的数据都是按照顺序排列的(索引下标排序)
+ 数组中的数据，可以是任意数据类型的数据

数组的创建
- 字面量的创建
  - var arr = []
- 系统内置构造函数创建数组
  - 语法1：new Array() 空数组
  - 语法2：new Array(n) 创建一个有长度的数组，但是每一个数据都是空的
  - 语法3：new Array(参数) 多个参数用，分隔
数组的索引特性
- 索引是数组中每一个数据成员的下标,也是这个数据在数组中的排序位置
- 索引是从0 开始的连续自然数
- 数组可以通过索引操作数组对应的成员
  - 语法: 数组[索引]
数组的长度特性
- 数组的长度就是数组中成员的个数
- 可以通过数组的length属性获取
  - 语法: 数组.length
  - 返回值: 数组的长度的数值

遍历数组

   for(var i = 0;i 
        console.log( arr[i] )
    }

二维数组

数组中的数据也是数组，我们把数组称之为二位数组
遍历数组需要两层for

for (var i = 0; i < arr.length; i++) {
  // console.log( arr[i] ) // 是二维数组中的小数组
  // 遍历每一个小数组
   for (var k = 0; k < arr[i].length; k++) {
   console.log( arr[i][k] ); // i是小数组的索引,k是小数组中数据的索引      
      }    
  }

不同数据类型的存储

简单数据存储在栈中
复杂数据类型在堆中存储数据、栈中存储访问地址(赋值给变量)
数组的常用方法1
- push()
  - 语法 push(参数)
  - 作用：将参数作为数组的新元素添加到数组的最后面
  - 返回值：返回添加元素后数组的长度
  - 会改变原数组
- unshift()
  - 语法: 数组.unshift(参数)
  - 作用: 将参数作为数组的新元素添加到数组的最前面
  - 返回值: 返回添加元素后数组的长度
  - 会改变原数组
- pop()
  - 语法: 数组.pop()
  - 作用: 将数组的最后一个元素删除
  - 返回值: 返回删除的这个元素数据
  - 会改变原数组
- shift()
  - 语法: 数组.shift()
  - 作用: 将数组的第一个元素删除
  - 返回值: 返回删除的这个元素数据
  - 会改变原数组
数组的常用方法2
- splice()
  - 语法1：数组.splice(起始索引，个数)
  - 作用：从起始索引开始删除数组中指定个数的元素
  - 返回值：返回删除的元素组成的新数组
  - 会改变原数组
  - 语法2：数组.splice(起始索引，个数，参数3，参数4…)
  - 作用：从起始索引开始删除数组中指定个数的元素，然后将参数3开始后的参数作为数组新元素，从数组中删除的位置开始添加
  - 返回值：返回删除元素后添加新元素的新数组
  - 会改变原数组
- sort()排序
  - 语法1：数组.sort()
  - 作用：给数组排序，但是排序只会按照元素的第一位i进行排序
  - 返回值：排序后的数组
  - 会改变原数组
  - 语法2：数组.sort(参数)
  - 参数必须是一个函数，函数必须要有两个形参，并且函数要return这两个形参的差值
```
数组.sort(function(a,b)){
  return a-b;//升序排序
  return b-a;//降序排序
}
```
  - 作用：给数组排序
  - 返回值：排序后的数组
  - 会改变原数组
- reverse()
  - 语法：数组.reverse()
  - 作用：将数组反转
  - 返回值：反转后的数组
  - 会改变原数组
- concat()
  - 语法：数组.concat(参数…)参数可以有多个
  - 作用：合并数组将参数作为数组的新元素合并成一个新数组
  - 返回值：返回合并后的新数组
  - 不会改变原数组
- join()
  - 语法：数组.join(参数)
  - 作用：将数组中元素按照传入的参数进行，(默认，)拼接的
  - 返回值：拼接后的字符串
  - 不会改变原数组

数组的排序-冒泡排序

讲数组中的元素进行两两比较，大的值排在后面

  for(var j = 0;j//控制比较多少次
    for(var i = 0;i
      //相邻的两个元素进行比较
      if(arr[i]>arr[i+1]){
        var tmp= arr[i];
        arr[i]=arr[i+1];
        arr[i+1]=tmp;
      }
    }
  }
  console.log(arr)

数组的排序-选择排序

假设最小值为第一个，依次与后面的值进行比较，记录最小值的索引号最后与刚开始的第一个值进行对换

//进行多轮的假设比对，然后交换，
  for(var j=0;j
    //假设最小值索引为j
    var minIndex = j; //定义一个变量记录最小值的索引
    //遍历数组，进行比较(遍历应该从索引为1的开始)
    for(var i = j + 1;i < arr.length ; i++){
      if(arr[i] < arr[minIndex]){
        minIndex = i;
      }
    }
    if(minIndex != j){
      var tmp = arr[j];
      arr[j] = arr[minIndex];
      arr[minIndex] = tmp;
    }
  }
  console.log(arr)

严格模式
- 开启严格模式在代码的最前面书写字符串 ‘use strict’
- 在严格模式下的要求
  - 声明变量必须要有关键字 var
  - 函数定义的时候不能定义同名形参
  - 在调用函数的普通方式中，函数中的this不在是window
  - 在函数中不能使用 arguments.callee
  - 不能使用0开头表示八进制

Es5中新增的数组方法

indexOf(参数)
- 语法：数组.indexOf(参数)
- 作用：查找参数在数组中的索引，如果存在的话则返回-1
- 按照从左往右的查找，找到则返回索引

forEach(参数)

语法:数组.forEach(参数)
参数必须是应该函数，函数有三个形参

  数组.forEach(function(item,index,arr){
    //数组元素有多少个，此函数则执行多少次
    //item 表示数组中元素
    //index 表示元素对应的索引
    //arr 表示的是调用forEach方法的数组
  })

作用：遍历数组
执行：数组有多少个一个元素，则执行多少次参数—函数
返回值：没有返回值

    var arr = ['a', 'b', 'c', 'd', 'e'];
    var res = arr.forEach(function (item, index, a1) {
          console.log(item, index, a1)
          return 666; // 没有返回值,写return也没用
     })
      console.log( res )

map (参数)

语法：数组.map(参数)

参数必须是一个函数，函数有三个形参

  数组.map(function(item,index,arr){
    //数组元素有多少个，此函数则执行多少次
    //item 表示数组中元素
    //index 表示元素对应的索引
    //arr 表示的是调用forEach方法的数组
  })

作用:数组映射
执行：将数组中的每一个元素按照条件执行一次，并作为新数组的元素返回
返回值：新数组

filter()

语法：数组.filter(参数)
参数必须是一个函数，函数有三个形参

  数组.filter(function(item,index,arr){
    //数组元素有多少个，此函数则执行多少次
    //item 表示数组中元素
    //index 表示元素对应的索引
    //arr 表示的是调用forEach方法的数组
  })

作用：数组过滤
执行：数组中的元素满足条件的，则作为新数组的元素返回
返回值：新数组

some()

语法：数组.some(参数)
参数必须是一个函数，函数有三个形参

  数组.some(function(item,index,arr){
    //数组元素有多少个，此函数则执行多少次
    //item 表示数组中元素
    //index 表示元素对应的索引
    //arr 表示的是调用forEach方法的数组
  })

作用：数组判断方法
执行：数组中只要有一个元素满足条件，则最终的返回值为true
返回值：布尔值

every()

语法：数组.every(参数)

参数必须是一个函数，函数有三个形参

  数组.every(function(item,index,arr){
    //数组元素有多少个，此函数则执行多少次
    //item 表示数组中元素
    //index 表示元素对应的索引
    //arr 表示的是调用forEach方法的数组
    // every 方法有返回值，但是必须在次函数中return
    // 此函数如果return false的时候，则遍历结束，而且every方法的返回值也为false  如果遍历结束，此函数返回的全都是true，则every方法的返回值为true
  })

作用：数组判断方法
执行：数组中每一个的元素都满足，则最终的返回值为true，否则返回false
返回值：布尔值

reduce()

语法1：数组.reduce(函数)

  数组.reduce(function(prev,item,index,arr){
    //数组元素有多少个，则此函数执行多少次
    // prev 第一次执行的时候，表示的是数组的第一个元素，后续函数执行的时候，prev就是上一次函数执行的返回值
    //item表示数组中第二个元素开始的每一个元素
    //index 表示元素对应的索引
    // arr 表示的是调用reduce方法的数组
    //此函数执行return的结构是给下一次执行此函数的prev的形参 ，此函数最后一次执行return的结果是reduce方法的最终结果
  })

作用：数组累计
执行：数组有多少元素,函数就执行多少次,而且函数最后一次执行的返回值就是此方法返回值
返回值: 取决于传入函数最后一次执行的结果

语法2: 数组.reduce(函数,初始值)

  数组.reduce(function(prev,item,index,arr){
  // 数组元素有多少个,则此函数执行多少次
  // prev 第一次执行的时候,表示的是init的值,后续函数执行的时候,prev就是上一次函数执行的返回值
  // item 表示数组中的每一个元素
  // index 表示元素对应的索引
  // arr 表示的是调用reduce方法的数组
  // reduce方法有返回值,但是必须在此函数中return
  // 此函数执行return的结果是给下一次执行此函数的prev形参
  // 此函数最后一次执行return的结果是reduce方法的最终结果
  },init)

作用: 数组累计
执行: 数组有多少元素,函数就执行多少次,而且函数最后一次执行的返回值就是此方法返回值
返回值: 取决于传入函数最后一次执行的结果

字符串

字符串的分类
- 普通字符串’dqwdq’
- 数字字符串’2121212’
- html字符串’
  ’
- 查询字符串’key=value&ke2=value’
字符串的创建方式
- 字面量创建
  - var str = ‘hello’
- 内置构造函数创建的是字符串对象
  - var str1 = new String(‘hello’)
字符串的length属性可以获取字符串的长度，但不能更改，内容也是只读不写，也可以遍历
比较运算符
- 如果两边都是数值,则直接比较
- 如果有一个边是数值,则会将另一边的值转为数值(隐式转换),然后比较
- 如果两边都是数字字符串,则比较的时候是按位比较(逐位比较大小)
- 如果两边都是字符串,则会转为ascii码然后比较大小
字符串的常用方法（都不会改变员数组）
- charAt()
  - 语法：字符串.charAt(索引)
  - 作用：查找传入的索引在字符串中的字符，如果不存在则返回空字符
  - 返回值：对应的字符，或空字符
- charCodeAt()
  - 语法：字符串.charCodeAt(索引)
  - 作用：查找传入的索引在字符串中字符的阿斯克码，如果不存在则返回NaN
  - 返回值：对应的阿斯克码，或NaN
- substring()
  - 语法：字符串.substring(起始索引，结束索引)
  - 作用：从起始索引开始，截取到结束索引位置（返回的值不包含结束索引
  - 返回值：截取的字符片段
- substr()
  - 语法：字符串.substr(起始索引，结束num)
  - 作用：从起始索引开始，结束num为多少则截取多少个
  - 返回值：截取的字符片段
- slice()
  - 语法：字符串.slice(起始索引，结束索引)
  - 作用：从起始索引开始，截取字符串片段（返回的值不包含结束索引,且索引为负数的时候倒着取值
  - 返回值：截取的字符片段
- split()
  - 语法: 字符串.split(参数)
  - 作用: 按照传入的参数将字符串分隔为多个字符,然后组成数组返回
  - 如果没有传入参数,则将整个字符串当做数组的一个元素,然后返回数组
  - 如果传入空字符串,则将字符串的每个字符当做数组元素,然后返回数组
  - 返回值: 数组
- indexOf()
  - 语法1：字符串.indexOf(参数)
  - 作用：检索参数在字符串中的索引位置(从左往右检索，找到则返回索引)；如果找不到则返回-1；
  - 返回值：索引或者-1
  - 语法2：字符串.indexOf(参数，起始索引)
  - 作用：从起始索引开始检索参数在字符串中的索引位置(从起始索引开始从左往右开始检索，找到则返回索引)找部分则返回-1
  - 返回值：索引或者-1
- lastIndexOf()
  - 语法：字符串.lastIndexOf(参数)
  - 作用：检索参数在字符串中的索引位置（从右往左检索，找到第一个则返回索引）如果找不到则返回-1；
  - 返回值：索引或者-1
- toLowerCase() & toUpperCase() 小写和大写
  - 语法：字符串.toLowerCase()toUpperCase()
  - 将字符串中的所有字符转为小写、大写
- replace()
  - 语法：字符串.replace(要被替换的内容，要替换上的内容)
  - 注意：只能替换一次，后面的相同的内容不会被替换
  - 作用：替换字符串中的内容
  - 返回值：替换后的字符串

数学方法

数学方法 Math.方法
- PI 获取圆周率
- round(数值) 四舍五入取整
- floor(数值) 向下取整
- ceil(数值) 向上取整
- max(多个数值) 获取多个值的最大值
- min(多个数值) 获取多个值的最小值
- abs(数值) 获取绝对值
- sqrt(数值) 获取数组的平方根
- pow(底数，指数) 求底数的次幂
- random() 获取0-1的随机数（可以获取到0，但是不能获取1
```
  function getNum(n, m) {
  // 获取n和m中的最大最小值
  var max = Math.max(n, m);
  var min = Math.min(n, m);
  return Math.floor(Math.random() * (max - min + 1)) + min
  }
```

时间对象

使用Date创建时间对象
- 语法new Date()
  - 1.不传参数
    - 创建的是当前的时间对象
  - 2.传递参数
    - 传递一个数值参数，会被当做时间戳时间使用，传递多个数值字符串参数，是年月日时分秒的参数
    - 参数1：表示年份
    - 参数2：表示月份 0~11表示1到12月
    - 参数3：表示日期 1~28，29，30，31
    - 参数4：表示小时 0~23
    - 参数5：表示分钟 0~59
    - 参数6：表示秒 0~59
    - 注意：月份，日期，小时，分钟，秒如果输入值超过范围，则前面一个时间单位进一传递一个数值字符串参数：月份写了多少就是多少月
    - 年-月-日时：分：秒，年/月/日时：分：秒，年.月.日时：分：秒（三种写法
    - 时间戳是1970-1-1 00：00：00开始计数的
时间对象方法
- get 获取时间信息
- set 设置时间信息
- .getFullYear() 获取时间对象的年份
- .getMonth() 获取时间对象的月份
- .getDate() 获取对象的日期
- .getHours() 获取对象的小时
- .getMinutes() 获取对象的分钟
- .getSeconds() 获取对象的秒
- .getDay() 获取对象的星期几 0表示星期天 1-6
- .getTime() 获取对象的时间戳
- valueOf()获取时间戳
- 将get换成set就是设置了
  - 比如 setFullYear() …
进制转换
- 变量.toString(参数) 参数2-36进制
- parseInt(变量，参数)

BOM

BOM中的顶级对象是window
BOM中的操作都是通过对象方法来实现的，这些对象都是在window对象中
BOM操作可以省略widnow
全局中的关键字this和top都指向window对象
在全局中通过var声明的变量和声明式定义的函数，其实就是添加在window对象的属性
window对象中有一个特殊的属性 name 不要在全局中var定义name变量，会变成字符串的

浏览器事件

load 事件页面加载事件只有页面加载完成才触发的

  window.onload = function(){
    console.log('页面加载完成可见')
  }

scroll 事件浏览器滚动条滚动事件，只要滚动了就触发

window.scroll = function(){
  console.log('滚动了就输出')
}

resize 事件浏览器可视窗口尺寸变化触发的事件

window.resize = function(){
  console.log('窗口变化我就出现了')
}

获取浏览器的可视窗口尺寸（包含滚动条的
- window.innerHeight 获取浏览器可视窗口的高度
- window.innerWidth 获取浏览器可视窗口的宽度
- 搭配 resize 来适应窗口大小

操作浏览器的滚动距离

页面中没有DOCTYPE声明的时候
document.body.scrollTop 获取垂直滚动条滚动的距离
document.body.scrollLeft 获取水平滚动条滚动的距离
页面中有DOCTYPE声明的时候
document.documentElement.scrollTop 获取垂直滚动条滚动的距离
document.documentElement.scrollLeft 获取水平滚动条滚动的距离
可以使用短路写法兼容两种情况

  window.onclick = function () {
  // 当点击页面的时候,浏览器的滚动条定位到 滚动到1200的位置
  // document.documentElement.scrollTop = 1200
  // document.documentElement.scrollLeft = 1200

  document.documentElement.scrollTop = 0
  }
  // 一般在浏览器滚动事件中获取
  // window.onscroll = function () {
  //   console.log(document.documentElement.scrollTop)
  //   console.log(document.documentElement.scrollLeft)
  // }

获取浏览器的信息可通过windiw中的navigation对象
- window.nnavigator 可获得浏览器全局信息
- navigator.userAgent 可获取浏览器的综合信息
- navigator.appName 可获取浏览器的名称
- navigator.appVersion可获取浏览器的版本
- navigator.platform 可获取平台信息
浏览器的地址栏操作
- location.href 可以用于设置获取浏览器的地址栏常用于页面跳转
- location.reload() 可刷新页面，不要写在全局中，要不然一直刷新
操作历史记录 history
- history.forward() 让页面进入浏览器历史中的下一个页面（前提是要有历史记录
- history.back() 让页面回退到上一个页面前提也是要有历史记录
- history.go(可写参数) 如果参数是正数则进入浏览器的下几页面，如果是负数则回退几页面，如果无参数或者是0则是刷新页面
定时器（倒计时和间隔
- 倒计时定时器
  - 语法：setTimeout(函数，时间，可有参数一般不用)
  - 时间单位为毫秒
  - 定时器开始后倒计时，时间到达则执行函数
  - 返回值：定时器的标识（当前这个定时器是页面中的第几个定时器
```
  var timer;
  timer = setTimeout(function (a) {
    console.log( 666 )
    console.log( a )
  },1000 )
  console.log( timer )
```
- 间隔定时器
  - 语法：setInterval(函数，时间)
  - 每隔一段时间就执行一次函数
  - 时间单位：毫秒
  - 返回值：定时器的标识（当前这个定时器是页面中的第几个定时器
```
  var timer1 = setInterval(function () {
     console.log( 888 )
   },1000)
```
- 关闭定时器
  - clearInterval(需要关闭的定时器)
  - clearTimeout(需要关闭的定时器)
- 定时器是异步执行的，需要等待结构加载完成的

DOM

DOM中的顶级对象就是——document
document对象是window中的属性对象
操作DOM就是操作页面中的元素
document.getElementById(标签的值)
- 返回值：页面中对应Id值的标签元素(DOM对象)
- 如果页面中没有对应的id标签则返回值 null
document.getElementSByTagName(标签名)
- 返回值：页面中对应标签元素组成的集合是一个伪数组
- 如果页面没有对应的标签则返回一个空的伪数组
document.getElenmentSByClassName(类名)
- 返回值：页面中对应具有该类名标签元素组成的集合是一个伪数组
- 如果没有则返回一个空的伪数组
document.querySelector(选择器)
- 返回值：页面中对应选择器的第一个标签元素
- 如果没有则返回null
document.querySelectorAll(选择器)
- 返回值：页面中所有匹配的选择器组成的集合伪数组
- 如果没有则返回空的伪数组
特殊的页面元素获取
- document.documentElement 获取html标签
- document.body 获取body标签
- document.head 获取head标签
- document.title = ‘可设置’ 获取设置页面标题
标签的属性：属性名 = 属性值
- 标签数值可分为3类原生、自定义、H5自定义
元素的属性操作
- 原有属性：通过点语法操作
  - 获取属性：元素.属性
  - 设置属性：元素.属性=值
自定义属性的操作
- 获取：元素.getAttribute(‘属性名’)
- 设置修改：元素.SetAttribute(‘属性名’，‘值’)
- 移除：元素.removeAttribute(属性名)
H5自定义属性操作
- 每一个标签都有一个dataset属性
- 获取: 元素.dataset.属性名
- 设置: 元素.dataset.属性名 = 值
- 移除: delete 元素.dataset.属性名
三种元素的样式操作
- 获取行内非行内样式（行内，非行内都可以获取）
- 设置样式（只能设置行内样式）
- 注意：如果是多个单词组成的样式名使用驼峰式命名法，或者使用数值关联法字符串表示[‘background-color’]
- 获取行内样式
  - 语法：元素.style.样式名
- 获取非行内样式
  - 语法1：window.getComputedStyle(元素).样式名
  - 语法2：元素.currentStyle.样式名
- 设置元素样式
  - 语法：元素.style.样式名 = 样式值
操作元素类名
- className 获取到所有的类名字符串
  - 语法：元素.className
- classList
  - 元素.classList返回一个可以操作元素所有类名的为数组的集合
  - 这个集合对象有操作类名的方法
  - add(类名) 添加类名
  - remove(类名) 移除类名
  - toggle(类名) 类名切换如果存在则移除，不存在则添加
DOM节点是页面组成的每一个小小组成部分
- DOM节点包含：元素节点、文本节点、属性节点、注释节点
  - 文本节点：包含文本、空格和换行
  - 属性节点：id= ‘’
  - 文本节点：‘文字内容’
  - 元素节点：‘里面的标签加内容’
  - 注释节点: ‘注释标签加内容’
- 获取节点的方式
  - getElement…一套
  - querySelector() 直接获取元素
  - 父节点.childNodes 获取父节点的所有子节点
  - 父节点.children 获取父节点的所有子元素节点
  - 父节点.firsrChild 获取父节点的第一个子节点
  - 父节点.lastChild 获取父节点的最后一个子节点
  - 父节点.firstElementChild 获取父节点的第一个子元素节点
  - 父节点.lastElementChild 获取父节点的最后一个子元素节点
  - 节点.parentNode 获取父节点
  - 节点.parentElement 获取父元素的节点
  - 节点.attributes 获取节点的所有属性节点
  - 通过api获取
- 节点属性：
  - 属性节点: 是节点的一个类型
  - 节点属性: 描述节点的信息
  - 每一类节点都有公共的内容
  - 节点属性一般有三个来描述
  - 节点名称,节点类型,节点值
  - 节点名称: 节点.nodeName 获取
    - 元素节点: 大写的标签名
    - 属性节点: 属性名
    - 文本节点: #text
    - 注释节点: #comment
  - 节点类型: 节点.nodeType 获取
    - 节点类型通过数值来表示不同的节点
      - 元素节点: 1
      - 属性节点: 2
      - 文本节点: 3
      - 注释节点: 8
  - 节点值: 节点.nodeValue 获取
    - 元素节点: null
    - 属性节点: 属性值
    - 文本节点: 文本内容
    - 注释节点: 注释内容
  - 创建节点
    - document.createTextnode(文本)
  - 创建元素节点
    - document.createElement(标签名)
- 插入节点
  - 父节点.appendChild() 向父节点内最后添加一个子节点
  - 父节点.insertBefore(要插入的子节点，在哪一个子节点之前)
- 节点克隆
  - 节点.cloneNode(参数)
  - 默认的参数是默认false 表示只克隆自己，不克隆子节点
  - 如果传入一个ture 则表示克隆子节点
  - 返回值是克隆的新节点
- 删除节点
  - 节点.remvoChild(子节点) 删除父节点中的子节点
  - 节点.remove()删除节点自己
- 节点替换
  - 父节点.replaceChild(替换上的节点，替换下的节点)
  - 创建元素节点和文本节点
获取元素尺寸
- 两套语法
  - client
    - 元素.clientWidth 获取元素的内容+padding的宽度
    - 元素.clientHeight 获取元素的内容+padding的高度
  - offset
    - 元素.offsetWidth 获取元素的内容+padding+border的宽度
    - 元素.offsetHeight 获取元素的内容+padding+border的高度
获取元素偏移量
- 元素.offsetParent 获取元素的定位父级
- 元素.offsetLeft 获取元素相对于定位父级的左边距离
- 元素.offsetTop 获取元素相对于定位父级的上边距离
- 元素.clientLeft 获取元素上边框的宽度
- 元素.clientTop 获取元素上边框的高度
在BOM中获取浏览器可视窗口的尺寸包含滚动条
- window.innerWidth 获取窗口的宽度
- window.innerHeight 获取窗口的高度
在DOM中获取浏览器可视窗口的尺寸不包含滚动条
- document.documentElement.clienWidth
  点，替换下的节点)
- 创建元素节点和文本节点
获取元素尺寸
- 两套语法
  - client
    - 元素.clientWidth 获取元素的内容+padding的宽度
    - 元素.clientHeight 获取元素的内容+padding的高度
  - offset
    - 元素.offsetWidth 获取元素的内容+padding+border的宽度
    - 元素.offsetHeight 获取元素的内容+padding+border的高度
获取元素偏移量
- 元素.offsetParent 获取元素的定位父级
- 元素.offsetLeft 获取元素相对于定位父级的左边距离
- 元素.offsetTop 获取元素相对于定位父级的上边距离
- 元素.clientLeft 获取元素上边框的宽度
- 元素.clientTop 获取元素上边框的高度
在BOM中获取浏览器可视窗口的尺寸包含滚动条
- window.innerWidth 获取窗口的宽度
- window.innerHeight 获取窗口的高度
在DOM中获取浏览器可视窗口的尺寸不包含滚动条
- document.documentElement.clienWidth
- document.documentElement.clienHeidth

数据类型、DOM、BOM

C/C++/C#相关栏目本月热门文章