【12-10】BOM/DOM

一、BOM

BOM（Browser Object Model）： 浏览器对象模型

     1-1.获取一些浏览器的相关信息（窗口的大小）

     1-2.操作浏览器进行页面跳转

     1-3.获取当前浏览器地址栏的信息

     1-4.操作浏览器的滚动条

     1-5.浏览器的信息（浏览器的版本）

     1-6.让浏览器出现一个弹出框（ alert / confirm / prompt ）

2、BOM 的核心就是 window 对象

window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

window. 可以省去

  2-1 window.alert('弹出框')

 2-2 window.prompt('输入框')

        返回值: 输入的内容

  2-3 window.confirm('输入框')：

        返回值：点击确定返回true， 点击取消，返回false

 2-4 window.open("网址"): 一般会点击按钮，打开网址

 2-5 window.close()

3、定时器

3-1.间隙性定时器

var 定时器的名字 = window.setInterval(函数,毫秒)    ===>开启间隙性定时器

window.clearInterval(定时器的名字)   ===>关闭间隙性定时器

示例：var timer = setInterval(function(){},1000)

示例：window.clearInterval(timer)

3-2.超时定时器 (过一定时间弹出一次)

window.setTimeOut(函数,毫秒)  ===> 开启超时定时器

window.clearTimeOut(函数,毫秒)   ===> 关闭超时定时

4、BOM计时器案例

js

 需引入上方的js

 

 5、history：window的子对象，浏览器历史记录的一个对象

    history.go(1)/history.forward(): 前进一个页面

    history.go(-1)/history.back(): 后退一个页面

    history.go(0): 刷新当前页面

6、localtion：window的子对象

    localtion.reload(): 刷新

    localtion.href = "网址"  跳转页面

---

二、DOM

DOM：文档对象模型：document object model

     DOM提供了一套操作文档（操作页面）的api

1、获取页面元素

1.1 通过id获取元素

document.getElementById("id名")； ===> 获取的是唯一一个

1.2 通过标签名来获取元素

document.getElementsByTagName('标签名p')；

===> 获取所有标签名为p的元素（伪数组形式，不是数组，但是可以遍历）

1.3 通过类名来获取元素

document.getElementsByClassName('类名')；

===> 获取所有类名的元素（伪数组形式。不是数组，但是可以遍历）

1.4 通过类名的值来获取元素

document.getElementsByName('name值')；

===> 获取所有类名的元素（伪数组形式。不是数组，但是可以遍历） 

1.5 通过选择器获取

document.querySelector('选择器')；===> 只获取第一个

document.querySelectorAll('选择器')；===> 只获取所有的

选择器: 标签，id，类，属性

1.6 获取body     document.body

     获取html       document.documentElement

     获取title        document.title

     获取head      document.head

2、修改样式

style法把样式都添加到行内了

         oDiv.style.属性名= "属性值"

         oDiv.style.backgroundColor = "值"

         oDiv.style.fontSize = "值"

         oDiv.style.width = "值"

className法把样式都添加类名

         oDiv.className = "类名"

追加类名

         oDiv.classList.add('类名')

删除类名

         oDiv.classList.remove('类名')

切换类名

         oDiv.classList.toggle('类名')

修改表单控件内容  

     获取内容  ===>  元素.value

     设置内容  ===> 元素.value = ""

修改普通元素内容  

     获取内容   ===>  元素.innerHTML

     设置内容   ===>  元素.innerHTML = "xx"

各种案例：

排他：

获取元素案例：

 

 

给元素加类名：