BOM和DOM

BOM与DOM的理解

BOM：Browser Object Model 浏览器对象模型，可以理解为是浏览器，顶级对象是window
DOM：document Object Model 文件对象模型。

window是JavaScript中的顶级对象，window对象是一个全局对象，所有的表达式都是在当前环境下执行的，可以把那个窗口的属性当做全局变量来使用，比如可以只写document而不用写window.document。

window对象中的属性和方法

alert                   //在当前窗口出现弹出框
setInterval(function, time(微秒))             //每过多少时间执行一次
clearInterval()        //清除setInterval设置的循环函数
setTimeout()            //过多久执行函数
clearTimeout            //取消由setTimeout设置的预执行函数
scrollTo()              //把内容滚动到指定的坐标。

confirm()               //显示确认框，点击确定返回true点击取消返回faluse；
prompt()                //显示可提示用户输入的对话框。返回输入的值
open()                 //打开一个新的窗口或者打开一个已经存在的窗口
close()                //关闭浏览器窗口

function foo(){
    console.log('执行');
}

var loop = setInterval(foo, 2000);   //延迟两秒
clearInterval(loop);                 //停止；
-------------------------------------------------------
function foo(){
    console.log('两秒后打印');
}

var go = setTimeout(foo, 2000);
clearTimeout(go);

window的子对象

• navigator(导航栏)

navigator.appName           //浏览器全称
navigator.appVersion        //Web浏览器厂商和版本的详细字符串
navigator.userAgent         //用户代理
navigator.platform          //浏览器运行所在的操作系统

• history

history.forward()   //前进一页
history.back()      //后退一页
history.go()        //前进N页

• location

location.href                    //获取当前的url
location.href='URL'              //跳转到。。。网页。
location.reload()                //重新加载

DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
它是一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。简单来讲，DOM是一种API（应用编程接口）。
JavaScript对DOM进行了实现，对应于JavaScript中的document对象，通过该对象对DOM文档进行程序级别的控制。

DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)

查找标签

document.getElementById();           //根据id来查找
document.getElementsByClassName();   //根据类名来查找得到一个数组
document.getElementByTagName();      //根据标签名来查找得到一个数组
document.getElementByName();         //根据name属性来得到一个数组

间接查找

parentNode                          //父节点
childNodes                          //所有子节点
firstchild                          //第一个子节点
lastchild                           //最后一个子节点
nextSibling                         //下一个兄弟节点
precioussibling                     //前一个兄弟节点
********************************************** 下面的为标签
parentElement                       //父节点标签元素
children                            //所有子标签
firstElementChild                   //第一个子标签元素
lastELementChild                    //最后一个子标签元素
nextElementSibling                  //下一个兄弟标签元素
perviousElementSibling              //上一个兄弟标签元素