程序员

js中的BOM模型

2018-03-13  本文已影响0人  躲在角落敲代码

BOM(browser object model) 浏览器对象模型:

window:

                |- history(History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。

                                        注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。)

                                |- back  Version: 加载 history 列表中的前一个 URL。

                                |- forward: 加载 history 列表中的下一个 URL。

                                |- go:加载 history 列表中的具体的一个 URL。

                |- location

                                location 对象包含有关当前 URL 的信息。

                                Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问

                |- screen

                                screen对象包含有关客户端显示的屏幕信息。

                                 |- height:返回显示屏幕的高度

                                  |- width:返回显示器屏幕的高度

                                  |- availHeight:返回显示屏幕的高度(除windows任务栏之外)。

                                  |- availWidth:返回显示屏幕的宽度(除windows任务栏之外)。

                |- navigator

                            navigator对象包含的属性描述了正在使用的浏览器,可以使用这些属性进行平台专用的配置。

DOM( document object model 文档对象模型)(其包含于BOM中):

                1、获取dom对象的方法

                            在js中,获取dom对象有五种方式

                            1)、直接获取 ,直接使用标签的id对该标签操作 ( 不推荐)

                                        // show.innerHTML = "这个是新的内容";

                             2) 、店家推荐,通过document提供的一个方法document.getElementById()

                                        // var _div = document.getElementById("show");

                                        // _div.innerHTML = "这个是使用getElementById获取的";

                             3)、通过标签名称获取对应的标签

                                        // var _divs = document.getElementsByTagName("div");

                                        // console.info(_divs)

                                        // _divs[0].innerHTML = "这个是使用getElementById获取的";

                               4)、通过class获取对应的标签

                                        // var _divs = document.getElementsByClassName("show");

                                        // console.info(_divs)

                                        // _divs[1].innerHTML = "是不是";

                                5)、 通过name属性获取对应的标签// 使用场景只有form标签

                                       // var _name = document.getElementsByName("username")

                                        // console.info(_name)

                                        //_name[0].value = "帅哥真帅,我好喜欢啊!!!";

                2、操作dom对象的内容

                           1).innerHTML可以插入HTML片段,能够解析HTML文本

                                        _div.innerHTML = "这个是新发表的"

                             2).innerText和textContent不能解析HTML片段,只能插入文本内容 *///

                                        b.textContent="停止抽奖";

                            3).非w3c规定/

                                        _div.innerText = "这个是新发表的";

                              4).w3c规定

                                        _div.textContent = "这个是新发表的";

上一篇下一篇

猜你喜欢

热点阅读