BOM

1.概述
  1. 概念：Browser object model，浏览器对象模型。它将浏览器的各个组成部分封装成对象。通过修改这些对象的属性，调用他们的方法，从而可以控制浏览器的行为。
  2. BOM对象的分类
1.window对象：表示浏览器中打开的窗口,同时window也是网页中的全局对象
2.Navigator对象：包含有关浏览器的信息,通过该对象识别不同的浏览器
3.Screen 对象：包含有关客户端的显示器的相关信息。
4.History 对象:包含用户（在当前浏览器窗口中）访问过的 URL，
只能操作浏览器向前或向后翻页
5.Location 对象:包含有关当前浏览器的地址栏信息。
2.window对象

window对象是浏览器中的全局对象，因此所有在全局作用
域中声明的变量、对象、函数都会变成window对象的属性
和方法

  1. window对象的创建
  2. window对象的常用方法
与弹出系统对话框框的方法：
1. alert方法：显示带有一段消息和确认按钮的警告框
2. conform方法：显示带有一段消息以及确认按钮和取消按钮的对话框
3. prompt方法:显示可提示用户输入的对话框
    需要两个值作为参数：
    1. 显示的提示文字
    2. 文本框中的默认值
    示例：prompt('你的年龄是？','18');
与关闭有关的方法：
1. close：关闭浏览器窗口。谁是调用者，就关闭哪个窗口
2. open:打开一个新的浏览器窗口，返回一个新的window对象
与定时器有关的方法
1. setTimeout:在指定的毫秒数后调用函数或者计算表达式
    参数1：js代码或者方法对象
    参数2：毫秒值
2. clearTimeout:取消由setTimeout设置的timeout
3. setInterval:按照指定的周期（毫秒计）来调用函数或者计算表达式
4. clearInterval:取消由setInterval设置的timeout
  1. window对象的常用属性
获取其他BOM对象，下面的BOM对象都是作为window对象的属性保存的
1. history
2. location
3. Navicator
4. Screen
    例如获取history对象
    var a = window.history;
获取DOM对象
    例如document对象的获取：
    console.log(window.document);	//#document
    元素节点的获取：
    window.document.getElementById("id值");
  1. window对象的特点
1. window对象不需要创建可以直接使用。通过window.方法名()调用方法;
2. 另外，window引用可以省略，直接使用方法名();

案例：轮播图的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图的实现，每隔三秒</title>
</head>
<body>
  <img id = "image" src="../img/OIP-C (0).jpg" width="300" >
  <script>
    /*
      1. 在页面上使用img标签展示图片
      2. 定义一个方法修改图片对象的src属性的值
      3. 定义一个定时器，每隔三秒调用方法一次
     */
    var number = 0;
    function fun() {
      number++;
      if (number > 2) {
        number = 0;
      }
      // 获取img标签对象
      var img = document.getElementById("image");
      // 修改img元素的src属性
      img.src = "../img/OIP-C (" + number + ").jpg";
    }
    // 定义定时器
    setInterval(fun,3000);
  </script>
</body>
</html>
3.Location对象
  1. location对象的获取方式
1. window.location
2. location(window对象可以省略)
  1. 方法
1. reload：重新加载当前文档（页面）
  1. 属性
1. href:设置或者返回当前页面的完整的URL地址
  1. 示例
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    	/*
    	 * Location
    	 * 	- 该对象中封装了浏览器的地址栏的信息
    	 */
    	window.onload = function(){
    		
    		//获取按钮对象
    		var btn = document.getElementById("btn");
    		
    		btn.onclick = function(){
    			
    			//如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
    			console.log(location);
    			
    			/*
    			 * 如果直接将location属性修改为一个完整的路径，或相对路径
    			 * 	则我们页面会自动跳转到该路径，并且会生成相应的历史记录
    			 */
    			location = "http://www.baidu.com";
    			//location = "01.BOM.html";
    			
    			/*
    			 * assign()
    			 * 	- 用来跳转到其他的页面，作用和直接修改location一样
    			 */
    			//location.assign("http://www.baidu.com");
    			
    			/*
    			 * reload()
    			 * 	- 用于重新加载当前页面，作用和刷新按钮一样
    			 * 	- 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
    			 */
    			//location.reload(true);
    			
    			/*
    			 * replace()
    			 * 	- 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
    			 * 		不会生成历史记录，不能使用回退按钮回退
    			 */
    			//location.replace("01.BOM.html");	
    		};
    		
    	};
    	
    </script>
</head>
<body>	
    <button id="btn">点我一下</button>	
</body>
4.history对象
  1. History对象的获取
1.window.history
2. history
  1. 方法
1. back:加载history列表中的前一个URL，和浏览器的回退按钮一样
2. forward:加载history列表中的下一个URL，和浏览器的前进按钮一样
3. go: history列表中的某个具体URL，跳转到指定页面
        1:表示向前跳转一个页面 相当于forward()
        2:表示向前跳转两个页面
        -1:表示向后跳转一个页面
        -2:表示向后跳转两个页面
  1. 属性
length:返回当前窗口历史列表中的URL数量，不是整个浏览器中的
5.Navicator对象

Navicator对象代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器。一般我们使用Navicator对象的userAgent属性来判断浏览器的信息。

DOM

1.概述
  1. 概念：Document object model，文档对象模型。将标记语言文档的各个组成部分封装成对象。可以使用这些对象对标记语言文档进行CRUD的动态操作。
  2. 分类：W3C划分为三个不同的部分。
1. 核心DOM:
    Document：文档对象
    Element：元素对象
    Attribute：属性对象
    Text:文本对象
    Comment：注释对象
2. XML DOM：针对XML文档的标准模型
3. HTML DOM：针对HTML文档的标准模型
2.Document对象
  1. document对象的获取
window.document(在HTML DOM模型中window.可以省略)
  1. 方法
1. document.getElementById("id值")：通过元素的id获取元素对象
2. getElementsByTagName: 根据元素名称获取元素对象们。返回值为一个数组
3. getElementsClassName:根据class属性值获取元素对象们，返回值为一个数组
4. getElementsByName:根据name属性值获取元素对象们


创建其他DOM对象的方法
1.createElement
2. createCommment
3. createTextNode :创建文本节点
4. createAttribute
  1. 属性
3.Element对象
  1. Element对象的获取：通过Document对象的createElement方法
  2. 方法
1. removeAttribute:删除属性
2. setAttribute：设置属性
  1. 属性
4.Node对象

  1. 特点：所有DOM对象都可以认为是一个节点

  2. 方法

  3. 属性

  4. 修改属性值

1. 明确获取的元素对象
2. 查看API文档，查找其中哪些属性可以设置
  1. 修改标签体内容
1. 获取元素对象
2. 通过innerHTML属性修改标签体内容