JavaScript操作BOM对象

第二章 JavaScript操作BOM对象

BOM

概念：

浏览器对象模型（BrowserObject Model），提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

分层结构

如图所示，其中history和location主要对应前进/后退按钮和浏览器地址栏

作用

弹出新的浏览器窗口
移动、关闭浏览器窗口及调整窗口的大小
浏览器窗口中实现前进、后退功能

window对象

常用属性

• history对象
  有关用户访问过的URL信息

常用方法

history.back()
与在浏览器点击后退按钮相同
history.forward()
与在浏览器中点击按钮向前相同
history.go()

语法

history(n),n表示具体的某个数字，装载入历史表中的第n
个历史页
history.go(1):前进一页，等价于history.forward()
history.go(-1):前进一页，等价于history.back()

• location对象
  当前访问的URL，通过修改location的值可以实现网页跳转

常见属性

host：设置或返回主机名和当前URL的端口号
hostname ：设置或返回当前URL的主机名
href ：设置或返回完整的URL
常用方法
reload()：重新加载当前文档（刷新功能）
replace()：用新的文档替换当前文档
replace(url路径)，设置对应的替换页面路径
语法：window.location=属性值;或者window.location.href=属性值;
均可实现跳转
案例
对应为：host hostname href三个属性

• screen
  只读属性，包含有关客户端显示屏幕的信息
  screen.availWidth 属性返回访问者可用的屏幕的宽度，以像素计，减
  去界面特性，比如窗口任务栏
  screen.availHeight 属性返回访问者可用的屏幕的高度
  screen.height 返回访问者屏幕的高度
  screen.width 返回访问者屏幕的宽度
  常用方法
  prompt( )
  显示可提示用户输入的对话框
  alert( )
  显示带有一个提示信息和一个确定按钮的警示框
  confirm( )
  显示一个带有提示信息、确定和取消按钮的对话框
  在confirm弹出在对话框中,有一个确定和取消按钮，如果点击确定，则
  返回true,反之则false
  应用
  var flag = confirm(“是否确定”)；
  再结合选择结构对flag值进行操作
  close( )
  关闭当前浏览器窗口
  该方法只能由 window.open 方法打开的窗口的window对象来调用.如
  果一个窗口不是由脚本打开的,调用该方法时,JavaScript控制台会出现下
  面的错误: “不能使用脚本关闭一个不是由脚本打开的窗口”
  open( )
  打开一个新的浏览器窗口，加载给定 URL 所指定的文档
  语法：window.open(url路径);
  应用：var myPage = window.open(url路径);利用这种方式可以保留myPage ，对对应窗口进行操作
  setTimeout( )
  语法：setTimeout(“调用的函数名（）”,等待的毫秒数)
  在指定的毫秒数后调用函数或计算表达式
  setInterval( )
  语法：setInterval(“调用的函数名（）”,周期性执行函数的秒数)W
  按照指定的周期（以毫秒计）来调用函数或表达式
  clearTimeout/clearInterval
  清除由setTimeout/setInterval设置的定时器
  语法
  clearTimeout（setTimeout（）返回的ID值）
  clearInterval（setInterval（）返回的ID值）
  语法如下
  案例1
  var time = setTimeout(“look()”,1000);
  window.clearTimeout（time）;
  document对象
  常用属性
  referrer
  返回载入当前页面的URL，如果不是通过超链接访问，则其值为""
  URL
  返回当前页面的URL
  常用方法
  document.getElementById()
  document.getElementByName()
  由于name不唯一，因此一般用在具有相同name属性的单选按钮、复选
  框等
  document.getElementByTagName()
  按标签获取页面元素，一般用于访问一组相同的元素，如一组
  、一组图片等
  案例
  var inputArray = document.getElementByTagName(“input”);
  此时获取到的是当前页面中所有input标签的集合
  write() 写到文档输出
  Date对象
  声明
  var now = new Date();
  声明时，如果new Date()中没有参数，默认now为当前时间
  如果new Date()中有参数,一般参数格式为
  yyyy/MM/dd HH:mm:ss
  yyyy-mm-dd HH:mm:ss
  MM dd,yyyy,hh:mm:ss
  如：var now = new Date(“2018/12/10 13:20:12”);
  常用方法
  getYear() 获取从1900年到当前年份之间的差距
  getFullYear() 获取当前年份
  getMonth() 获取当前的月份（由于本身是由数组进行存储，因此下标从0-
  11，因此获取月份时要加1）
  getDate() 获取当前的日期
  getDay() 获取当前时间是周几（0表示周日，1-6分别对应周一到周六）
  getHours() 获取当前小时数
  getMinutes() 获取当前的分钟数
  getSeconds() 获取当期的秒数
  getMilliseconds() 获取当期的毫秒数
  getTime( ) 返回自某一时刻（1970年1月1日）以来的毫秒数
  上述的方法均为getXXX()方法，类似的还有setXXX()方法，用于设置对应的
  日期参数，如 setMinutes()设置日期的分钟数
  例子： var now = new Date(); now.getYear() 其他方法以此类推
  格式化日期字符串
  toDateString() 把Date对象的日期部分转换为字符串，并返回结果
  toTimeString() 把Date对象的时间部分转换为字符串，并返回结果
  toLocaleString() 把日期转换为本地格式的字符串
  toLocaleDateString() 根据本地时间把Date对象的日期部分转换为字符串，
  并返回结果
  toLocaleTimeString() 根据本地时间把Date对象的时间部分转换为字符串，
  并返回结果
  Math对象
  ceil()：向上取整（取较大数）
  25.5返回26 -25.5返回-25
  floor()：向下取整（取较小数）
  25.5返回25 -25.5返回-26
  round()：四舍五入为最接近的数（取绝对值较大数）
  25.5返回26 -25.5返回-26
  random()：返回0-1之间的随机数
  随机整数公式：parseInt(Math.random（）* (最大值-最小值+1)+最小值)
  innerHTML属性
  几乎所有的元素都有innerHTML属性
  它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML
  扩充
  innerText、value、innerHTML的区别
  innerText: 一般是指标签之间可显示文本
  innerHTML:一般是指标签之间的所有内容
  value:一般为标签的的属性值
  案例
  
  
  其中第一行获取的值为 ：kk
  其中第二行获取的值为 ：kk
  其中第三行获取的值为 ：123