2020-12-25 WebApi

WebAPI

• API：应用程序接口
• Webapi :
  • 浏览器提供的API: 可以进行BOM操作
  • Js内核提供的API: 可以进行DOM操作
• Bom：主要是通过浏览器顶级对象window提供属性，方法来实现
  • 对话框
    • Window.alert()
    • Window.prompt()
    • Window.confirm()
  • 事件
    • Window.onload() 加载完页面的所有内容（图片，引入文件，样式）之后触发的事件
  • 类似事件
    • document.addEventListener(“DOMContentLoaded”,function(){ })
      加载完页面DOM之后触发的事件
    • window.onunload() 退出页面后发生的事件
    • window.onbeforeunload() 退出页面前发生的事件
  • 定时器
    • setTimeout(function(){},1000ms)设置定时器
    • clearTimeout()清除定时器

Location对象 可以获取或者设置浏览器地址栏的URL

URL 统一资源定位符

• 格式：scheme://host:port/path?query#fragment
  • scheme:通信协议 常用的http,ftp,maito等
  • host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
  • port:端口号 整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
  • path:路径 由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
  • query:查询 可选，用于给动态网页传递参数，可有多个参数，用’&‘符号隔开，每个参数的名和值用’='符号隔开。例如：name=zs
  • fragment:信息片断 字符串，锚点
• 方法
  • location = url 跳转到指定的URL
  • location.assgin(url) 跳转到指定的URL
  • location.reload() 刷新当前页面
  • location.replace(“协议://网址”,”路径?查询字符#锚点”)，把两个参数合在起形成新的

URL

• history.back() 后退一步

• history.forward() 前前一步

• history.go(正负整数) 负数是后退，正数是前

• navigator.userAgent 浏览器信息

• navigator.platform 当前浏览器安装的操作系统
  DOM

• 经常操作：

  • 获取元素
    • document.getElementById(“id”);
    • document.getElementsByClassName(“类”);
    • document.getElementsByTagName(“标签名”);
    • document.querySelector(“选择器”);
    • document.querySelectorAll(“选择器”);
    • document.getElementsByName(“name的取值”);

• 动态创建元素

  • 元素对象.innerHTML = “html代码”；
  • Var 元素对象 = document.createElement(“标签名”)；
  • Document.write(“html代码”)；
  • 操作元素
    • 元素对象.appendChild(元素对象) 添加元素
    • 元素对象.removeChild(元素对象) 删除元素
    • 父元素对象.insertBefore(新元素对象,相对元素对象)
    • 父元素对象.replaceChild(替换元素对象,被替换元素对象)
  • 查找元素
    • 元素对象.children 子元素集合
    • 元素对象.childNodes 子节点集合
    • 元素对象.parentElement 父元素
    • 元素对象.parentNode 上个节点
    • 元素对象.nextSibling 下一个兄弟节点
    • 元素对象.nextElementSibling 下一个兄弟元素
    • 元素对象.previousSibling 上一个兄弟节点
    • 元素对象.previousElementSibling 上一个兄弟元素
    • 元素对象.firstChild 第一个子节点
    • 元素对象.firstElementChild第一个子元素
    • 元素对象.lastChild 最后一个子节点
    • 元素对象.lastElementChild最后一个子元素

• 属性操作

• 非表单元素属性：href、title、id、src、className
  • 元素对象.属性名称 = 值
  • 元素对象.innerHTML = “html代码”
  • 元素对象.innerText = “添加文本”

• 表单元素属性：

• value input text Select
• checked 复选框选中属性
• disabled 用来设置文本框是否可编辑

• 设置属性的方式有两种：
  • 1 通过点（.）来设置或读取属性
  • 2 通过setAttribute(“属性名”,”属性值”) 设置完成后可在行内看到
  • 3 通过getAttribute(“属性名”) 读取属性