码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript--BOM

时间:2020-03-28 23:18:34      阅读:70      评论:0      收藏:0      [点我收藏+]

标签:string   col   alt   bsp   div   i++   get   --   后退   

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;

JavaScript--BOM

标签:string   col   alt   bsp   div   i++   get   --   后退   

原文地址:https://www.cnblogs.com/64Byte/p/12589922.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!