首页 > Windows开发 > 详细

WebAPI之DOM和BOM

时间:2019-04-16 22:44:19      阅读:202      评论:0      收藏:0      [点我收藏+]

API是什么?

Application Programming Interface:应用程序编程接口,是一些预先定义的函数,通俗的理解就是一些方法。

WebAPI是什么?

浏览器提供的一套操作浏览器功能和页面元素的API。

此处的Web API特指浏览器提供的一些方法。可分为两个部分:BOM(浏览器对象模型)、DOM(页面对象模型)

DOM

DOM的概念

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

根据ID获取元素(返回拥有ID 的第一个对象的引用)

技术分享图片

根据标签名获取元素(返回带有标签名的对象集合)

技术分享图片

根据name获取元素(返回带有指定名称的对象集合)

技术分享图片

根据类名获取元素(返回文档中所有指定类名的元素集合)

技术分享图片

根据选择器获取元素(返回文档中匹配指定CSS选择器的第一个元素,如果要返回所有:querySelectorAll( )方法)

 技术分享图片

BOM

BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

BOM顶级对象之window

调用window下的属性和方法时,可以省略window

innerWidth 和 innerHeight 属性

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度

技术分享图片

history对象(用户(在浏览器窗口中)访问过的 URL)

back( )  加载 history 列表中的前一个 URL

forward( )  加载 history 列表中的下一个 URL

go( )  加载 history 列表中的某个具体页面。

back( ) :

 技术分享图片

forward( ) :

技术分享图片

go( ) :

技术分享图片

Navigator 对象包含有关浏览器的信息。

serAgent属性  判断用户浏览器的类型

platform属性  判断浏览器所在的操作系统和平台类型

serAgent属性:

技术分享图片

platform属性:

技术分享图片

location对象(包含当前URL信息)

属性:

host  设置或返回主机名和当前 URL 的端口号

hostname  设置或返回当前 URL 的主机名

href  设置或返回完整的URL

pathname  设置或返回当前URL的路径部分

port   设置或返回当前URL的端口号

protocol   设置或返回当前URL的协议

search   设置或返回从问号 (?) 开始的 URL(查询部分)

技术分享图片

三种对话框

  • alert()
  • confirm()
  • prompt()

  alert是警告框(模态框),只有一个按钮“确定”无返回值

  confirm是确认框(模态框),有确定和取消两个按钮,用户点击确认,返回值为 true。如果点击取消,则返回值为 false

     prompt是提示框(模态框),返回输入的消息,用户点击确认,返回值为输入的值。如果点击取消,则返回值为 null

页面加载事件

 onload:

页面和图片加载完成后立即触发,重载页面也会触发

技术分享图片

 

onunload:

页面下载时触发(或者浏览器窗口已关闭),重载页面也会触发

技术分享图片

 

WebAPI之DOM和BOM

原文:https://www.cnblogs.com/mataoblogs/p/10719508.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!