JS操作BOM对象

Posted

这才是真

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS操作BOM对象相关的知识，希望对你有一定的参考价值。

1、window对象

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>window对象</title>
   
  <!--
  BOM:(浏览器对象模型 Browser Object Model)
  浏览器页面的 前进 后退 刷新 页面跳转 都是Bom！
  对整个浏览器窗口进行交互的对象模型！
  包含的内容（对象）：
  1.window对象
  01.history 属性
  02.location 属性
  2.document对象
   
   
  window对象
  常用的属性：
  01.history 属性
  02.location 属性
  常用的方法：
  alert() :只有一个对话框和一个确认按钮
  prompt() ：提示用户输入的对话框
  confirm（）：有一个确认按钮和取消按钮的对话框
  close(): 关闭浏览器窗口
  open()：打开一个新的浏览器窗口
  定时函数：
  01.setTimeout():在指定毫秒数之后，执行某个方法！ 只执行一次
  02.setInterval():每间隔指定的毫秒数，都会执行一次！
   
  window.open("弹出的窗口url"，"窗口的名称"，"窗口的特性")
   
  -->
  </head>
  <body>
   
  <script type="text/javascript">
   
  var flag= confirm("确定关闭本窗口吗？");
  if(flag){
  window.close(); //浏览器窗口关闭
  }else{
  //window.open("http://www.baidu.com","百度首页");
  window.open("http://www.baidu.com","百度首页","height=400,width=400");
  }
   
  </script>
  </body>
  </html>

2、history对象

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>history对象</title>
  <!--
  history对象常用的三个方法：
  01.back（） ：后退
  02.forward（）：前进
  03.go() ：跳转至指定的url
  -->
  </head>
  <body>
   
  <a href="02history对象.html">当前页面</a>
  <a href="03history对象2.html">下一个页面</a>
  <a href="javascript:history.forward()">history.forward()下一个页面</a>
  <a href="javascript:history.go(2)">history.go(2)下一个页面</a>
   
   
  <script type="text/javascript">
   
   
   
  </script>
   
   
  </body>
  </html>

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>history对象2</title>
  </head>
  <body>
  history对象2 第二个页面
   
  <a href="javascript:history.back()">history.back()后退一个页面</a>
  <a href="javascript:history.go(-1)">history.go(-1)后退一个页面</a>
   
  </body>
  </html>

3、location

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>location对象</title>
  <!--
  location对象
  常用方法：
  reload（）:刷新页面
  replace():使用新的页面替换当前页面
  常用属性：
  host：主机名+端口号
  hostname:主机名
  href：完整的url
  hash:返回#之后的所有字符串
  search:返回?之后的所有字符串
  -->
   
  </head>
  <body>
   
  <a href="javascript:doubleC();">百度</a>
   
  <script type="text/javascript">
  document.write("host值为："+location.host+"<br/>");
  document.write("hostname值为："+location.hostname+"<br/>");
  document.write("href值为："+location.href+"<br/>");
  document.write("hash值为："+location.hash+"<br/>");
  document.write("search值为："+location.search+"<br/>");
  var flag= confirm("确定跳转页面吗？");
  if(flag){
  location.href="http://www.baidu.com";
  }
  //当用户点击百度 超链接时触发的事件
  function doubleC(){
  location.href="http://www.jd.com";
  }
   
  </script>
   
  </body>
  </html>

4、document对象

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>document对象</title>
  <!--
  document对象
  常用的方法：
  write（）:在页面中书写内容
  getElementById(): 获取页面中指定id的对象！ 一个对象
  getElementsByName("sex"): 获取页面中所有name属性值为sex的对象 ！ 数组
  getElementsByTagName("div"): 获取页面中所有标签为div的对象 ！ 数组
   
  常用的属性：
  referrer:
  当浏览器向web服务器发送请求的时候，一般会带上referrer，
  告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。
  url： 返回当前页面的url
  -->
  </head>
  <body>
   
  <script type="text/javascript">
  document.write("document.referrer的值是："+document.referrer);
   
  </script>
   
  </body>
  </html>

5、documentReferrer

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>referrer属性</title>
  </head>
  <body>
  <a href="05document对象.html">推广地址</a>
  </body>
  </html>

6、 getElement系列

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  body{font-size:14px;
  line-height:30px;
  }
  input{margin:1px;
  width:90px;
  font-size:12px;
  padding:0;
  }
  #node{
  width:100px;
  font-size:24px;
  font-weight:bold;
  float: left;
  }
  </style>
  <script type="text/javascript">
  /*改变层内容*/
  function changeLink(){
  //获取页面中id属性值是node的节点
  var node= document.getElementById("node");
  // node.innerText="<h1 style=‘color:red‘>haha</h1>"; innerText：会把整个内容当成文本来输出！
  node.innerHTML="<h3 style=‘color:red‘>haha</h3>";//innerHTML:会编译内容中的html标签以及样式
  }
  /*获取所有input标签中所有的value值*/
  function all_input(){
  var allInputs= document.getElementsByTagName("input"); // 是一个数组
  var result="";
  for(var i=0;i<allInputs.length;i++){
  result+= allInputs[i].value+"<br/>";
  }
  //把所有的结果 给 id=s的元素
  document.getElementById("s").innerHTML=result;
  }
  /*获取所有name属性值是season的value*/
  function s_input(){
  var allSeasons= document.getElementsByName("season"); // 是一个数组
  var result="";
  for(var i=0;i<allSeasons.length;i++){
  result+= allSeasons[i].value+"<br/>";
  }
  //把所有的结果 给 id=s的元素
  document.getElementById("s").innerHTML=result;
  }
   
  </script>
  </head>
  <body>
  <div id="node">新浪</div>
  <input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br />
  <br /><input name="season" type="text" value="春" />
  <input name="season" type="text" value="夏" />
  <input name="season" type="text" value="秋" />
  <input name="season" type="text" value="冬" />
  <br /><input name="b2" type="button" value="显示input内容" onclick="all_input()" />
  <input name="b3" type="button" value="显示season内容" onclick="s_input()" />
  <p id="s"></p>
  </body>
  </html>

7、Date对象

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>Date对象</title>
  <!--
  Date对象:
  getDate()：获取是一个月中的哪一天？ 1-31
  getDay（）：获取是一周中的哪一天？ 0-6
  getHours（）：获取是一天中的小时 0-23
  getMinutes（）：获取是分钟 0-59
  getSeconds（）：获取是秒数 0-59
  getMonth（）：获取是一年中的第几个月？ 0-11
  getFullYear():获取年份
  getTime():返回1970年1月1日到现在的毫秒数
  -->
  </head>
  <body>
   
   
  <script type="text/javascript">
  var today=new Date(); //当前的系统时间
  document.write(today);
  //获取年月日
  var year= today.getFullYear();
  var month= today.getMonth()+1;
  var date= today.getDate();
  var hours= today.getHours();
  var min= today.getMinutes();
  var s= today.getSeconds();
  document.write("当前系统时间是："+year+"年:"+month+"月:"+date+"日&nbsp;&nbsp;&nbsp;"+hours+":"+min+":"+s)
  </script>
  </body>
  </html>

8、Math对象

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>Math对象</title>
   
  <!--
  Math对象:
  ceil（）:向上取整
  floor()：向下取整
  random（）:随机数
  round（）：四舍五入
  -->
  </head>
  <body>
  <script type="text/javascript">
   
  document.write("25.5ceil===》"+Math.ceil(25.5)+"<br/>");
  document.write("25.5floor===》"+Math.floor(25.5)+"<br/>");
  document.write("25.5round===》"+Math.round(25.5)+"<br/>");
   
  </script>
  </body>
  </html>

9、定时函数 

　　

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>定时函数</title>
  <!--
  01. setTimeout函数 在一个指定的时间点，去指定一个指定的函数
  02.setInterval函数 每隔多少时间就会执行一次指定的函数
  -->
  </head>
  <body>
  <div id="nowTime"></div>
  <button type="button" onclick="setOne();"> setTimeout函数</button>
  <button type="button" onclick="clearOne();"> 清空setTimeout函数</button>
   
   
  <button type="button" onclick="setTwo();"> setInterval函数</button>
  <button type="button" onclick="clearTwo();"> 清空setInterval函数</button>
   
  <script type="text/javascript">
  var num=0; //成员变量
  function one(){
  //获取页面中空元素 并赋值
  document.getElementById("nowTime").innerHTML="数字："+(++num);
  }
   
  //声明 定时函数的变量
  var timeout,intervar;
  function setOne(){ //设置定时函数
  timeout=setTimeout("one()",2000);
  }
   
  function clearOne(){//清空定时函数
  clearTimeout(timeout);
  }
   
   
   
  function setTwo(){ //周期性的执行 one（）函数
  intervar=setInterval("one()",1000);
  }
  function clearTwo(){ //周期性的执行 one（）函数
  clearInterval(intervar);
  }
   
  </script>
  </body>
  </html>

以上是关于JS操作BOM对象的主要内容，如果未能解决你的问题，请参考以下文章

js操作bom和dom

js基础和js操作bom和dom对象

JS笔记 BOM之History（操作页面向前向后翻）

BOM学习

JS浏览器对象（BOM）

JS DOM（文档对象模型）与BOM（浏览器对象模型）