JavaScript--BOM

Posted 2021-03-03 64Byte

BOM: 浏览器对象模型: 把浏览器的一个窗口作为对象

BOM模型包含的对象:

window(整个BOM的核心)  history(历史记录)  location(地址栏)  document(html文档)

window

1) 弹框的

1.   alert()    输出,  只有一个确定按钮
2.   prompt()  输入  返回string
3.   confirm()  输出, 再次确定框, 包含两个按钮”确定”,””取消”   (返回 boolean    点击”确定”返回true  点击取消: 返回false)

2) 打开一个新窗口, 以及关闭窗口

1.  window.open(URL,name,features,replace)  打开一个窗口, 返回的这个打开的窗口的window  (后面参数浏览器很多屏蔽基本不用)
2.  window.close() 关闭一个窗口, 谁调用我, 我就关闭谁

3) 定时器相关的, 完成一些动画效果

1. setInterval(“js代码/函数名”,时间)  每隔多久执行一次
2. setTimeout(“js代码/函数名”,时间) 等多久之后才执行,延时, 只执行一次

返回一个定时器对象　

1. clearInterval(定时器对象)
2. clearTimeout(定时器对象)

秒表计时案例

<div>
            <p><input type="text" value="0"  id="num" /></p>
            <p><input type="button" value="开始" onclick="start()" />
            <input type="button" value="暂停" onclick="end()" /></p>
        </div>
        <script>
            var timer; //只记录最后一次点击的,产生的定时器对象
            // 点击5下, 创建5个定时器
            function start(){
                //获取文本框的value的值
               var i = document.getElementById("num").value;
                timer = setInterval(function(){
                                document.getElementById("num").value = i++;
                            },10);
            }

            function end(){
                clearInterval(timer);//关闭定时器
            }

        </script>

View Code

Location

对象的属性
获取#之后的内容 hash #后面的　location.hash

host 获取 ip:端口　　location.host

hostname: 主机名: url是ip形式,获取的ip, 写的域名, 获取域名　　location.hostname

href: 获取url　location.href

pathname 获取的资源路径 从端口之后,到?/# 之前　　location.pathname

port 获取端口　　location.port

protocol 获取协议　　location.protocol

search 获取查询部分 ?(包括)之后的部分　　location.search

location.reload();//刷新本页面

改变地址栏的网址     location.href="https://www.baidu.com";

History

1. back()       加载 history 列表中的前一个 URL。  等于go(-1)
2. forward()   加载 history 列表中的下一个 URL。  等于go(1)

go()    加载 history 列表中的某个具体页面。

　　history.go(-2) : 单击两次后退按钮执行的操作一样

Document

来获取html页面中指定的标签(元素,节点)

1. getElementById(“id的值”); 根据id获取元素, 返回的是这个元素对象
2. getElementsByName(“name的值”);根据name值获取, 返回对象集合, 表单标签  NodeList
3. getElementsByTagName(“标签名”)根据标签名获取, 返回对象集合  NodeList
4. getElementsByClassName(“class名”)根据类名获取, 返回对象集合  HTMLCollection

元素的属性:

    innerHTML属性,获取/设置开始标签到结束标签之间的内容(值)

 

获取getElementsByClassName的值

　　getElementsByClassName(“class名”).item(0).value;