7.js的dom和bom

1.BOM的概念

	BOM 是Browser Object Model的缩写，简称浏览器对象模型;
    可以通过BOM的属性和方法去对浏览器进行操作;

2.window对象

	window对象是BOM的核心, window对象表示浏览器窗口的一个对象;
    每个浏览器窗口都有一个window对象与之对应. 
    window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的；

3.window对象包含以下对象

	 document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM) 
     history(重要): 历史对象,包含窗口的浏览历史，可以实现后退
     location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面
     frames: 框架对象，可以获取页面框架内容
     screen: 包含有关客户端显示屏幕的信息
     navigator: 导航对象, 包含所有有关访问者浏览器的信息

history 历史对象

	 window.history.back();//回退
	 window.history.forward();//前进
     window.history.go();//回退 -1  前进1 0 刷新

location 地址信息

	window.loaction.href="地址"；//用于跳转
	window.location.assign(‘http://www.baidu.com’);//跳转到指定的URL, 与href等效
	window.location.reload(true); //强行加载服务器上资源

navigator 导航对象

	window.navigator.userAgent //返回当前浏览器相关信息(重点)
	//获取地理位置(扩展)
    window.navigator.geolocation.getCurrentPosition(function(ps){
      var y=ps.coords.longitude;
      var x=ps.coords.latitude;
	})

HTML渲染的基本过程

1．解析HTML文件，创建DOM树
2．解析CSS,形成CSS对象模型
3．将CSS与DOM合并，构建渲染树（rendering tree）
4．布局和绘制

1.什么是BOM对象？
1. BOM browser object model 浏览器对象模型，用于操作整个浏览器的对象，
2. 浏览器的核心对象就是window，换句话说，BOM就是window对象

2.BOM对象的组成部分
window是顶级对象，一个窗口只有一个window对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5v4WlLp6-1591790051355)(http://i.imgur.com/r8NKJID.png)]

document：是文档对象模型；

history： 浏览器的前进后退，以及访问记录
history.back(); 	//前往浏览器历史条目前一个URL, 类似后退
history.forward();  //前往浏览器历史条目下一个URL, 类似前进
history.go(-1);	//浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)


location：浏览器的地址信息，主机，端口，地址，协议，路径的跳转
location.href="http://baidu.com"//跳转到百度
location.assign(‘http://www.baidu.com’); //跳转到指定的URL, 与href等效
location.reload();//最有效的重新加载,有缓存加载
location.reload(true);//强制加载,从服务器源头重新加载

navigator:浏览器的导航信息，例如浏览器的版本信息，当前的地理位置；

navigator获取浏览器版本信息

navigator.userAgent;//返回的是一段字符串，带有当前操作系统与浏览器版本信息

navigator获取地理位置(了解,扩展知识点)

 window.navigator.geolocation.getCurrentPosition(function (position) {
      var latitude = position.coords.latitude; // 纬度
      var longitude = position.coords.longitude; // 经度
  })

3.获取元素的方式

document.getElementById("id");//通过ID获取DOM对象
document.getElementsByTagName("div");//通过标签名称获取DOM对象
document.getELementsByName("name");// 通过属性 name的值获取DOM对象

docuement.getElementsByClassName("类名称");//通过类名称获取DOM对象
//在IE9下有兼容问题

4.自己的兼容封装ClassName方法，
docuement.getElementsByClassName(“类名称”);
在ie7下有兼容性问题，所以我们自己封装了一个类似的方法。

    function myGetElementsClassName(classname) {
    var arr = [];//找到了带有 box的放到数组中
    var elements = document.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].className.indexOf(classname) != -1) {
            //找到了 类名称中带有  box1 的
            var tempArr = elements[i].className.split(" ");
            for (var j = 0; j < tempArr.length; j++) {
                if (tempArr[j] == classname) {
                    arr.push(elements[i])
                }
            }
         }
      }
     return arr;
 }

5.DOM对象

 DOM 文档对象模型，用于操作文档的内容、结构和样式的核心对象，说白了就是操作
 页面的元素、属性、文本、事件等的核心模型。

6.DOM节点 分为 属性节点、文本节点、元素节点

nodeType==1 //表示 元素节点（重点记住）
nodeType==2 //表示 属性节点（了解）
nodeType==3 //表示 文本节点（了解）

nodeValue //获取文本内容
nodeName  //节点的名称

以上这些如何去得到了，是用于DOM对象里的一个属性，叫 childNodes 代码如下

var oBox=document.getElementById("id");

oBox.childNodes 是一个数组

for(var i=0;i<oBox.childNodes.length;i++){
	if(oBox.childNodes[i].nodeType==1){
	  //元素节点类型
	}
	if(oBox.childNodes[i].nodeType==3){
	  //文本节点类型
	}
}

是不是觉得奇怪，为什么没有 oBox.childNodes[i].nodeType==2,因为属性节点就是一个奇葩

我有点黄

我有点黄

 oBox.attributes["style"].nodeType==2//true 这样就获取到了属性节点

尴尬吧，都已经使用attributes，足矣说明style是oBox的一个属性，再来查看nodeType==2，哈哈… 老罗只想说，“你TM在逗我玩,欺负我不认识单词吗”。

DOM节点的属性
学过CSS的人都认识这些，不在一一讲解。

document.getElementById(‘box’).id;//获取 id 
document.getElementById(‘box’).id ="person";//设置id
document.getElementById(‘box’).style;//获取css样式对象 document.getElementById(‘box’).style.color;//获取 style 对象中 color 的值
document.getElementById(‘box’).style.color=‘red’;//设置 style 对象中 color 的值
document.getElementById(‘box’).className;//获取 class
document.getElementById(‘box’).className=‘box’;//设置 class

7.innerHTML与innerText的区别

innerHTML="123<input type='text'>" //设置值
innerHTML //没有等于符号，表示获取 文本与html代码，返回的是字符串

innerText 作用同上，只不过只能获取文本内容，不会获取html代码结构