学习内容

• 操作节点
  • 获取节点
  • 创建节点
  • 添加节点
  • 删除节点
  • 克隆节点
• BOM
  • 概念
  • window 对象
  • window 常见事件
  • 定时器
  • location 对象
• 本地存储
  • sessionStorage
  • localStorage
  • JSON

一、操作节点

目标：能使用节点关系获取元素、能创建元素、能将元素插入到网页中，能将网页中的某个元素删除。网页中的所有内容都是节点（标签、属性、注释等），在DOM中，节点使用 node 表示，其特点是：因为DOM树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

• 节点基本属性
  • nodeType：节点类型（实际开发中，常用元素节点）
    • 元素节点：element.nodeType == 1
    • 属性节点：element.nodeType == 2
    • 文本节点：element.nodeType == 3
  • nodeName：节点名称，element.nodeName
• 利用节点层级获取元素
  • 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
  • 获取套路：先要获取到某个具体元素，然后通过具体元素获取他的父子兄弟
• 获取父节点
  • 语法：element.parentNode
  • 返回：元素对象
• 获取子节点
  • 获取所有子节点（不常用）
    • 语法：element.childNodes
    • 返回：伪数组 元素的所有子节点，包含（元素节点、文本节点（换行算在内））
  • 获取所有子元素节点（常用）
    • 语法：element.children
    • 返回：伪数组，元素的子元素节点
  • 获取第一个子节点（不常使用）
    • 语法：element.firstChild
    • 返回：返回第一个子节点，可能是（元素节点、文本节点（换行算在内）等），找不到则返回 null
  • 获取第一个子元素节点 （经常使用）
    • 语法：element.firstElementChild
    • 返回：返回第一个子元素节点，找不到则返回 null
  • 获取最后一个子节点：不常使用
    • 语法：element.lastChild
    • 返回：最后一个子节点，可能是（元素节点、文本节点（换行算在内）），找不到则返回 null
  • 获取最后一个子元素节点（经常使用）
    • 语法：element.lastElementChild
    • 返回：返回第一个子元素节点，找不到则返回 null
• 获取兄弟节点
  • 获取前一个元素兄弟节点
    • 语法：element.previousElementSibling
    • 返回：返回前一个兄弟元素节点，找不到则返回 null
  • 获取后一个元素兄弟节点
    • 语法：element.nextElementSibling
    • 返回：返回后一个兄弟元素节点，找不到则返回 null
• 创建元素节点
  • 语法：document.createElement('标签名')
  • 返回：一个元素对象，标签名是传入的标签名
  • 注意：不是创建了就渲染到页面上了，需要插入到页面上
• 添加节点
  • 追加到某个元素内部
    • 语法：element.appendChild(child)
    • 描述：将 child 插入到 element 的子节点列表的末尾
  • 将一个元素插入到某个元素的内部的指定元素的前面
    • 语法：element.insertBefore(child,指定元素);
    • 描述：将 child 插入到 element 的内部的 '指定元素' 的前面
  • 通过 innerHTML 给一个元素内部添加元素
    • 语法：element.innerHTML = '标签'

    	 liNew.innerHTML = '<p>'+textarea.value+'</p><span>删除</span>';
    

• 删除节点
  • 语法：element.removeChild(child)
  • 描述：从 element 中删除 child 元素
• 克隆节点
  • 语法：节点.cloneNode(boolean)
  • 描述：用于克隆一个节点
  • 参数
    • 默认 false：浅克隆，只克隆节点本身不可隆内容
    • true：深克隆，克隆节点和其内容

二、BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。

• BOM 的构成
  • BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
  • BOM 比 DOM 更大，它包含 DOM
• 顶级对象 window
  • 特点：
    • window 对象在浏览器中被称为顶级对象；
    • 顶级对象：页面中所有的东西都是依赖于这个对象存在的；
    • 所有 window 对象的属性和方法，都可以直接省略 window. 而直接使用，如 alert()、prompt() 等
    • 变量与函数：
      • 所有的全局变量和全局函数都是 window 对象的属性和方法
      • 在 js 代码里面，不使用 var 声明的变量，都是隐式全局变量，这个方式不推荐，因为如果不使用 var 声明，是不会变量提升的；
• window 对象的常见事件
  • 页面加载事件（也称入口函数）
    • 描述：当页面所需的静态资源（HTML 文件、CSS文件、js文件、图片...）全部加载完毕，就会立刻执行该事件的时间处理程序
    • 作用：将所有 js 代码全部放到该事件的执行程序中，就可以把 js代码写在 html文档页面元素的上方（浏览器在解析 html文档时，都是从上往下一行一行读取，如果直接把 js 写在页面元素的上方，则先读取 js代码，但是这时候浏览器内部还没有加载页面元素，进而没有将页面转换成 DOM 树，因此 js 就获取不到页面元素，但是 js 又用到了某个元素，就会报错）
    • 事件类型：load
    • 语法：
      • window.onload = function(){};
      • window.addEventListener('load',function(){});
  • 调整窗口大小事件
    • 描述：当窗口大小发生改变时，就触发该事件，并执行事件处理程序
    • 作用：经常利用这个事件完成响应式布局。
    • 事件类型：resize
    • 语法：
      • window.onresize = function(){};
      • window.addEventListener('resize',function(){});
• 计时器（均是单线程）
  • 延迟计时器（炸弹计时器）
    • 创建延迟计时器 setTimeout
      • 描述：经过多少毫秒之后执行某个函数（一次性）
      • 语法：window.setTimeout(函数名/匿名函数,[延迟毫秒])(window可以省略)
      • 通常我们在使用计时器时，会给计时器赋值一个标识符，用以区别多个定时器
    • 参数：
      • 第一个参数：要做的事情，回调函数
      • 第二个参数：延迟的时间（毫秒数），不写的话默认 0
    • 停止延迟计时器 clearTimeout
      • 描述：清除延迟计时器，让延迟定时器的函数不再执行
      • 语法：window.clearTimeout(延迟定时器名称),window 可以省略
      • 参数：延迟定时器名称
  • 周期定时器（闹钟定时器）setInterval
    • 创建周期定时器：
      • 描述：每隔多少秒之后就执行一次某个函数（多次性，但效率低）
      • 语法：window.setInterVal(函数名/匿名函数,[间隔毫秒])，window 可以省略
    • 参数：
      • 第一个参数：要做的事情，也称回调函数
      • 第二个参数：间隔的时间（毫秒数），该函数不写默认为 0
    • 停止周期定时器
      • 描述：清除周期定时器，让周期定时器的函数不再执行
    • 语法：window.clearInterval(周期定时器名称)，window 可以省略
    • 参数：周期定时器名称
• location 对象
  • 定义：location 对象是由 window 对象提供的，通过 location 对象的属性，管理网页的地址栏（URL）
  • URL：统一资源定位符（URL），是互联网上标准资源的地址，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它
  • 属性：

三、本地存储

随着互联网的快速发展，基于页面的应用越来越多普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

• 本地存储特性
  • 数据存储在用户浏览器中
  • 设置、读取方便、甚至页面刷新不丢失数据
  • 容量较大，sessionStorage 约5M、localStorage 约 20M
  • 只能存储字符串，可以将对象 JSON.stringify() 编码后存储
  • 都以键值对（key-value）的格式存储在浏览器中
• window.sessionStorage
  • 生命周期：关闭一个页面
  • 数据共享：在同一个窗口（页面）下数据可以共享
  • 语法：

• window.localStorage
  • 生命周期：生命周期永久有效，除非手动删除否则关闭页面也会存在
  • 数据共享：同一个浏览器中打开两个页面是同源的，就可以共享 localStorage 数据，如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源
  • 语法

• JSON

  JSON（JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript（W3C指定的规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据

  • 用于示例：
    • JSON 格式的对象：
      var obj = '{"group1":["andy","lisa","summer"],"group2":["丽丽","甜甜","馨馨"]}'
    • JSON 格式的数组：
      var arr = '[{"name": "小王","age": 26 , "tall" : "1.60m"},{"name": '小李',"age": 23 , "tall" : "1.69m"}]'
  • 特点：
    • 键必须使用双引号包起来
    • 字符串也必须是双引号
    • 只有数字和字符串两种类型
    • 只是记录数据
  • JSON 方法
    • 将复杂数据类型数据转换成 JSON 格式：JSON.stringify(对象);
      • 参数：js 数据类型
      • 返回：JSON 格式的数据
    • 将 JSON 格式的数据转换为对象：JSON.parse(json格式字符串);
      • 参数：json 格式字符串
      • 返回：js 数据类型
      • 注意：如果参数不是 JSON 格式的数据就会报错