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.对象的属性和方法
window 对象有一系列的属性，这些属性本身也是对象
image.png
3.BOM对象的组成部分
window是顶级对象，一个窗口只有一个window对象
image.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[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" //设置值
innerHTML //没有等于符号，表示获取 文本与html代码，返回的是字符串
innerText 作用同上，只不过只能获取文本内容，不会获取html代码结构