WD6.3BOM和DOM（上）

BOM

概念：browser object model——浏览器对象模型——使用对象操作浏览器；

 

对象：window【都可以将window省略】

                              1.location：1.获取/设置地址的地址——￥￥lacation.href

                                                  2.获取/设置地址栏的锚点——￥￥location.hash

                                                   3.获取/设置地址的数据——￥￥location.search

                                语法：http://www.baidu.com/page/index.html?id=5&cat=6&keywords=羊毛衫

                                          把地址栏中的数据，做成一个对象

                                             {

                                                id:5,

                                                 cat:6,

                                                  keywords:'羊毛衫'

                                               }

                                                      4.刷新页面——location.reload()

                                                      5.跳转：location.assign(地址)

                                                                     location.relpace(地址)

                                           2.history：1.回退一个页面——history.back()

                                                             2.前进一个页面——history.forward()

                                                             3.回退/前进任意个页面——history.go(数字)【正数前进；负数后退】

                                            3.navigator：1.appName——NetScape

                                                                  2.appCodeName

                                                                  3.appVersion

                                                                  4.useAgent

                                             4.document——DOM

                                              5.弹出层：1.alert()——window.alret()

                                                                2.confirm()——window.confirm()

                                                                 3.prompt()——window.promt()

                                               6.全局中定义的变量和函数：

                                                        1.全局中的变量相当于是window的一个属性——var a = 10;  window.a

                                                         2.全局中的函数相当于是window的一个方法——function fn(){}  window.fn

                                              7.定时器：1.setTimeout(函数，毫秒数)——延迟执行一次

                                                                2.setInterval(函数，毫秒数)——间隔执行很多次

                                                           返回值：【代表当前页面第几个定时器】

                                                                     用来清除定时器：1.clearTimeout（返回值）

                                                                       【可以混用】      2.clearInterval(返回值)

                                                8.事件：1.window.onload——当前页面所有资源都加载完成才执行

                                                              2.window.onresize——只要浏览器的大小改变了就执行

                                                              3.window.onscroll——只要浏览器的滚动条滚动了就执行

                                                9.宽和高：1.window.innerWidth——宽【包含滚定条的尺寸】

                                                                  2.window.innerHeight——高【包含滚定条的尺寸】

 

DOM

 概念：document object model  文档对象模型——使用对象操作文档的；

 

document:1.获取标签：1.document.getElementByld()【获取到伪数组】

                                       2.document.getElementsByTagName()【获取到伪数组】

                                       3.document.getElementsByName()【获取到伪数组】

                                       4.document.getElementByClassName()【获取到伪数组】【低版本IE中不兼容】

                                       5.document.querySelectorAll()【获取到伪数组】【低版本IE中不兼容】

                                       6.document.querySelector()【低版本IE中不兼容】

    注意：可以去下标；遍历；.length获取长度；不能使用数组方法

                2.操作标签：1.属性：

                             ！方法：【都会在标签中体现出来】

                                            1.标签.getAttrbute(属性名)——获取属性的值

                                            2.标签.setAttrbute(属性名，属性值)——设置属性

                                            3.标签。removeAttribute(属性名)——删除属性

                               ！ .  :【不体现在标签中，除非这个属性对标签有用】——在标签对象的内部

                                             1.标签.属性名——获取

                                             2.标签.属性名=值——设置

                                         2.设置样式：1.标签.style.css的[键] = 值

                                                               2.标签.style[键] = 值

                                                               3.标签['style']['键'] = 值

                                          3.内容：

                                                  1.innerHTML——操作的是带标签的内容获取【针对双标签的 / 可以设置和】

                                                   2.innerText——只操作文本【针对双标签的 / 可以设置和】

                                                   3.value——针对表单元素的

                                           4.类名：1.标签.className——获取

                                                         2.标签.className = 值——设置