JavaScript操作BOM

悠悠 2021-09-14 02:26 323阅读 0赞

**BOM概念**

BOM是浏览器对象模型的简称（Browser Object  Model），BOM尚无正式标准，由于现代浏览器几乎实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。

**Window对象**

所有浏览器都支持Window对象，它表示浏览器窗口。所有的JavaScript全局对象，函数，以及变量均自动成为Window的对象成员，全局变量是Window对象的属性，全局函数时Window对象的方法。甚至可以说HTML DOM的document也是BOM的Window对象之一。

**Window尺寸**

在JavaScript中，有三种方法能够确定浏览器窗口的宽度、高度（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerWith;     // 获取浏览器窗口的内部宽度
    window.innerHeigth;  //获取浏览器窗口的内部高度

对于IE8、7、6、5：

document.body.clientWidth;   //获取浏览器窗口的内部宽度
    
    document.body.clientHeight; //获取浏览器窗口的内部高度

实例：

Window对象的一些其他方法：

①window.open():浏览器打开一个新窗口。

②window.close():浏览器关闭当前窗口。

③window.moveTo():移动当前浏览器窗口。

④window.resizeTo():调整当前浏览器窗口的尺寸。  
  
实例：

**window.screen对象**

①window.screen.availWidth:获取屏幕可用宽度。（window可以省略不写）

②window.screen.availHeight：获取屏幕可同高度。（window可以省略不写）

实例：

**window.location对象**

JavaScript里使用window.location来获取当前页面的URL地址，并把浏览器重定向到新的页面。

①location.hostname：返回web主机的域名

②location.pathname：返回当前页面的路径和文件名

③location.port：返回web主机的端口号

④location.href：返回当前页面的URL地址

实例：

⑤location.assign：打开一个新的路径窗口

实例：
    <script>
          window.οnlοad=function () {
              var btn=document.getElementsByTagName('button');
              btn[0].οnclick=function () {
                  location.assign('http://www.baidu.com'); //打开新的URL路径
              }
          }
    </script>
    </head>
    <body>
    <button>click me</button>
    </body>

⑥location.reload:如果为true，将强制刷新当前窗口

实例：
    <script>
          window.οnlοad=function () {
              var btn=document.getElementsByTagName('button');
              btn[0].οnclick=function () {
                  location.reload(true);  //强制刷新当前窗口
              }
          }
    </script>
    </head>
    <body>
    <button>click me</button>
    </body>

⑦history.back：返回上一页

⑧history.forward：进入下一页

**JavaScript弹窗**

①警告框：window.alert()   wnidow可以省略不写，直接调用alert()方法。

警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction()
    {
    alert("你好，我是一个警告框！");
    }
    </script>
    </head>
    <body>
    
    <input type="button" οnclick="myFunction()" value="显示警告框">
    
    </body>
    </html>

②确认框：window.confirm()

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Confirm</title>
    </head>
    <body>
    <p>点击按钮，显示确认框。</p>
    <button οnclick="myFunction()">点我</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
    	var x;
    	var r=confirm("按下按钮!");
    	if (r==true){
    		x="你按下了\"确定\"按钮!";
    	}
    	else{
    		x="你按下了\"取消\"按钮!";
    	}
    	document.getElementById("demo").innerHTML=x;
    }
    </script>
    </body>
    </html>

③提示框：  window.prompt(" sometext "," defaultvalue ");

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Prompt</title>
    </head>
    <body>
    <p>点击按钮查看输入的对话框。</p>
    <button οnclick="myFunction()">点我</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
    	var x;
    	var person=prompt("请输入你的名字","Harry Potter");
    	if (person!=null && person!=""){
    	    x="你好 " + person + "！今天感觉如何？";
    	    document.getElementById("demo").innerHTML=x;
    	}
    }
    </script>
    </body>
    </html>

标注：在弹窗里面如果要换行，请使用“\\n”来换行