昔洛 的个人博客

Bug不空,誓不成佛

  menu
70 文章
14633 浏览
2 当前访客
ღゝ◡╹)ノ❤️

WebAPI(下)

学习内容

  • 操作节点
    • 获取节点
    • 创建节点
    • 添加节点
    • 删除节点
    • 克隆节点
  • 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,它包含的信息指出文件的位置以及浏览器应该怎么处理它
    • 属性:
属性名例子说明
hash"#contents"返回 URL 中的 hash(#号后跟零或多个字符),如果 URL 中不包含散列,则返回空字符串
host"www.wrox.com:80"返回服务器名称和端口号(如果有)
hostname"www.wrox.com"返回不带端口号的服务器名称
href"http://www.wrox.com"返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
pathname"/WileyCDA/"返回URL中的目录和(或)文件名
port"8080"返回URL中指定的端口号。如果URL中不包含端口号,则这个属性返回空字符串
protocol"http:"返回页面使用的协议。通常是 http:或https:
search"?q=javascript"返回 URL 的查询字符串。这个字符串以问好开头

三、本地存储

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

  • 本地存储特性
    • 数据存储在用户浏览器中
    • 设置、读取方便、甚至页面刷新不丢失数据
    • 容量较大,sessionStorage 约5M、localStorage 约 20M
    • 只能存储字符串,可以将对象 JSON.stringify() 编码后存储
    • 都以键值对(key-value)的格式存储在浏览器中
  • window.sessionStorage
    • 生命周期:关闭一个页面
    • 数据共享:在同一个窗口(页面)下数据可以共享
    • 语法:
操作语法
存储数据sessionStorage.setItem(key,value)
获取数据sessionStorage.getItem(key)
删除数据sessionStorage.removeItem(key)
清空数据(所有内容都清除)sessionStorage.clear()
  • window.localStorage
    • 生命周期:生命周期永久有效,除非手动删除否则关闭页面也会存在
    • 数据共享:同一个浏览器中打开两个页面是同源的,就可以共享 localStorage 数据,如果两个页面的协议,端口(如果有指定)和主机都相同,则两个页面具有相同的源
    • 语法
操作语法
存储数据localStorage.setItem(key,value)
获取数据localStorage.getItem(key)
删除数据localStorage.removeItem(key)
清空数据(ALL)localStorage.clear()
  • 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 格式的数据就会报错
内事不懂问百度,外事不懂问谷歌~