DOM1.什么是BOM对象？BOMbrowserobjectmodel浏览器对象模型，用于操作整个浏览器的对象，浏览器的

1.什么是BOM对象？

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

2.BOM对象的组成部分

window是顶级对象，一个窗口只有一个window对象

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

location：浏览器的地址信息，主机，端口，地址，协议，路径的跳转 location.href="baidu.com"//跳转到百度 location.assign(‘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对象//在IE7下有兼容问题

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++){    
    (oBox.childNodes[i].nodeType==1){      
        //元素节点类型    
    }    
    if(oBox.childNodes[i].nodeType==3){      
        //文本节点类型    
    }
}

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

我有点黄

<div id="oBox" style="background:yellow">我有点黄</div>

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

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

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

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

7.innerHTML与innerText的区别

innerHTML="123<input type='text'>" 
//设置值innerHTML 
//没有等于符号，表示获取 文本与html代码，
//返回的是字符串innerText 作用同上，
//只不过只能获取文本内容，不会获取html代码结构

1.DOM(document object model) 文档对象模型

DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。
目的其实就是为了能让js操作html元素而制定的一个规范。
DOM树的根统一为文档根—  document

2.节点获取

我们前面学过：  
document.getElementById("demo");
//id 为标记的  #demo  document.getElementsByTagName("div")
//所有的div  divdocument.getElementsByClassName("one") 
//所有类名为one的.one

获得类名这个语法 ie678是不支持的。我们只能自己去写兼容性的写法

3.节点的访问

DOM的节点并不是孤立的，因此可以通过DOM节点之间的相对关系对它们进行访问

3.1父级parentNode

3.2兄弟节点

nextSibling           
下一个兄弟  ie 678 写法   
nextElementSiblingpreviousSibling         
上一个兄弟  ie678  
previousElementSibling  谷歌 火狐等

nextSibling 下一个兄弟的意思，再ie678里面是正常的，但是在谷歌，火狐浏览器里面，默认的下一个兄弟，是空格或者是换行。所以，再谷歌等浏览器里面，我们使用： nextElementSibling 这个单词有效的避免了下一个兄弟是换行等问题。

DOM