【重学JS】巩固基础-day10-BOM浏览器对象模型

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

☆☆☆ 温故而知新! 今天学习巩固的js内容(BOM浏览器对象模型) !加油! ☆☆☆

可做为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新,

用本身的理解, 简单又全面归纳基础知识点, 大部份内容为白话文内容, 基础中的基础 方便加深理解!

巩固学习 JavaScript 基础知识, 加深理解记忆, 打牢地基才能筑高楼! 加油

如需更详细了解学习- 推荐查看 MDN-JavaScript 文档, (红宝书/白皮书/蓝皮书/..)进行学习进阶!

开始今天的学习吧! 认真对待!!

一、梳理昨天学习知识点

• 数组 Array

  • 数组的操做方法 ：
  • 数组去重
  • 数组排序: 1. 冒泡     2. 选择
  • 数组新增功能 : forEach   indexOf   map   filter reduce

• string ：

  操做方法 ：

  • charAt
  • charCodeAt
  • String.fromCharCode
  • indexOf  lastIndexOf
  • substr(start,length)  sunstring(start,end)
  • replace
  • 字符串.split
  • 数组.join
  • trim()
  • toLowerCase  toUpperCase

• Math

  • random()
  • Math.ceil()
  • Math.floor() Math.round()

function rand(min, max) {
  return Math.round(Math.random() * (max - min) + min)
}
复制代码

• Date

  • var d1 =  new Date();

  • var d2 = new Date("2018-09-08");

  • 时间差 : ( d1.getTime()-d2.getTime() ) / 1000

  • 时间设置 ：

    d1.setDate( d.getDate() + 3 );

二、BOM   浏览器对象模型    Browser   Object   Model

window 对象

2.1 window 对象的方法 ： 

window 对象的全部属性和方法 调用时 均可以省略 window.

全部的全局变量都是 window 对象的属性

全部的全局函数都是 window 对象的方法

2.2 三个弹出对话框：

• confirm()   弹出一个确认框   点击肯定   返回 true   点击取消返回 false
• alert()     弹出一个警告框
• prompt()    弹出一个输入框

2.3 两个定时器 ：

setInterval( 要执行的任务，间隔时间 )       连续执行    clearInterval()

• 用法一 ：

  setInterval(function(){},间隔时间)

• 用法二 ：

  setInterval( 函数名 , 间隔时间 )     function 函数名(){   }

• 用法三 :

  setInterval( "函数名()" , 间隔时间  )

  setTimeout( 要执行的任务 ，间隔时间 );            延时性定时器   只执行一次 自动中止

  clearTimeout()   用法同 setInterval()

• 定时器特色：

  定时器后面的代码先执行   定时器内部的代码后执行  （这种现象叫作   异步）

var num = 10
setTimeout(function () {
  alert(num)
  undefined
  var num = 20
  alert(num)
  20
}, 1000)
alert(num)
10
复制代码

2.4 一个弹出窗口 ：

open("url","_blank","窗口外观")方法     返回的是弹出的窗口对象

外观 ： "width=200; height=200;left=30;top=90"

open() 方法弹出的窗口，子窗口和主窗口之间能够互相操做（扩展）

close()   关闭窗口

window.opener 属性   获取父窗口对象

三、文档对象 document       window.document

要作事 先找人 （找对象）

查找页面元素 ：

document.getElementById()   查找的元素具备惟一性

querySelector( css 选择器 )     兼容问题

• getElementsByTagName("标签名")   标签名

  查找的元素是一个集合（伪数组）   使用时必须加 下标   下标从 0 开始， 找到一个元素 也要加下标[0]

• getElementsByClassName() 类名   兼容问题   “hh”

• getElementsByName()       经过 name 值      "qx"

• querySelectorAll(css 选择器)               兼容问题   ".hh""#hh""h1"

• document.body   查找 body

• document.title   查找 title

• document.head   查找 head

• document.documentElement   查找文档根节点   至关于 html  （没有 document.html）

四、js 如何操做页面元素

4.1 操做样式：

使用方法:

obj.style.样式 = 值
复制代码

obj.style.cssText = 'width:200px;height:200px;background-color:red'

obj.className = '类名'
复制代码

4.2 操做属性：

obj.属性  = 值

4.3 操做内容:

标签 ：

• innerHTML     能够解析 html 标签
• innerText
• outerHTML   操做对象自己（破坏了页面结构）     表单 ： value

五、location 对象   地址对象

5.1 页面跳转 ：

location = "url"

location.href = "url"    设置页面跳转     获取页面地址栏信息 ：  location.href

location.assign("url")

location.replace("url")   替换了当前页面内容（没法实现后退）

5.2 页面刷新:

location.reload()

六、history 历史记录对象（了解）

前进 ： history.go(1) 或 history.forward()

后退 ： history.go(-1) 或 history.back()

刷新 :  history.go(0)

---

更多阅读:

前文更新回顾

【重学 JS】天天学习巩固基础:

【day1】js 初始

【day2】各类运算符、

【day3】数据类型、

【day4】循环结构 & 条件语句、

【day5】函数(重点)、

【day6】做用域 & 事件、

【day7】对象 & 数组方法总结、

【day8】字符串方法 & 部分排序、

【day9】Math 对象 & 封装函数、

预告: 加油, 追梦人

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!