1 BOM 和 DOM 对象

1.1 什么是BOM

JS中的BOM和DOM的介绍与使用_端口号

BOM是Browser Object Model的简写，即浏览器对象模型。

BOM由一系列对象组成，是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

1.2 什么是DOM

DOM是Document Object Model的简写，即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象蓝色框内是归DOM管的，红色框内归BOM管的；也可以说DOM也是归BOM管的

BOM 是为了操作浏览器出现的 API，window 是其根对象。

DOM 是为了操作文档出现的 API，document 是其根对象。


2 BOM 对象-window

JS中的BOM和DOM的介绍与使用_服务器_02

2.1 三种弹框的方式：

//只含有确定的按钮

window.alert("今天星期一， 马上周五了， 我好开心呢");

//含有确定按钮和取消按钮的弹框

var flag= window.confirm("确实很开心");

//如果返回的是true代表点击的是确定 ， 如果返回是false代表点击的取消

//含有输入内容的弹框 前部分代表的是提示的信息， 后面是输入内容的默认值

var val= window.prompt("请输入昵称：","例如：李白");

//取消 返回 null

2.2 定时器的应用

//2S后调用方法 执行一次

var time1=window.setTimeout("test04()",2000);

//每间隔2s就会执行方法 执行了多次

window.setInterval("test04()",2000);

2.3 清除计时器的操作

//清除计时器的操作 其中的名称就是清除计时器的名称

window.clearInterval(time);

window.clearTimeout(time1);

2.4 关闭和打开浏览器

//打开指定的页面

window.open("http://www.baidu.com");

//关闭浏览器窗口。

window.close();

3 Window 中对象学习

3.1 Location：对象

var href= window.location.href;

//获得端口号 8020

var port=window.location.port;

//主机名称

var hostname=window.location.hostname;

//主机加端口号

var host=window.location.host;

//修改当前的URL地址

window.location.href="http://www.taobao.com";

//刷新网页

window.location.reload();

3.2 History 对象：

/返回历史记录的数量

var len= window.history.length;

//后退按钮

window.history.back();

//前进按钮window.history.forward();

//如果是正数标识前进指定的页面如果是负数标识后退指定的页面

window.history.go(-1);

3.3 Screen：对象：

//获得当前屏幕的分辨率

var he = window.screen.height;

var wi = window.screen.width;

3.4 Navigator 对象：

//返回由客户机发送服务器的 user-agent 头部的值。

console.log(window.navigator.userAgent);

代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      /*****Location对象学习*********/

      function  testLocation(){
    //http://127.0.0.1:8020/06JS/02JS%E4%B8%ADBOM%E5%AF%B9%E8%B1%A1%E5%AD%A6%E4%B9%A0.html    
       var  href= window.location.href;
      //http://127.0.0.1 
       var hostname=window.location.hostname;
       //8020
       var  port=window.location.port;

       //http://127.0.0.1:8020
       var  host=window.location.host;


      // alert(href+"----"+hostname+"----"+port+"----"+host);

       //修改当前的URL地址
      // window.location.href="http://www.baidu.com";

      //重新加载页面  
       window.location.reload();    

      }



      function  testHistory(){
        //返回浏览器历史列表中的 URL 数量。
        var len=window.history.length;

        //alert(len);
        //前进操作
//        window.history.forward();
        //后退操作
        //window.history.back();

        //控制前进和后退的网页  如果是正数代表前进  如果是负数代表后退  如果是0重新加载页面
        window.history.go(0);
      }


      function  testScreen(){

        //获得当前屏幕的分辨率

        var  he=window.screen.height;


        var  wi=window.screen.width;

        alert(he+"----"+wi);



      }


      function  testNavigator(){

      //返回由客户机发送服务器的 user-agent 头部的值。 
       var  us= window.navigator.userAgent;


        alert(us);    
      }

    </script>


  </head>
  <body>

  <p>
     <input type="button" name="" id="" value="Location对象" onclick="testLocation()" />

  </p>

  <p>
     <input type="button" name="" id="" value="History对象" onclick="testHistory()" />

  </p>

  <p>
     <input type="button" name="" id="" value="Screen对象" onclick="testScreen()" />

  </p>

  <p>
     <input type="button" name="" id="" value="Navigator对象" onclick="testNavigator()" />

  </p>




  </body>
</html>

效果：

JS中的BOM和DOM的介绍与使用_对象模型_03

JS中的BOM和DOM的介绍与使用_html_04

4 DOM 中的节点类型


4.1 什么是 DOM2.DOM 节点分类 node

元素节点 element node <a href="链接地址">我的链接</a>

属性节点 attribute node href="链接地址"

文本节点 text node 链接地址 我的链接

4.2 DOM 节点关系

父子关系（parent-child）：<html> 元素作为父级，

<head> 和 <body> 元素作为子级

兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系

5 DOM 操作的内容

1.查询元素（进行操作元素、或者元素的属性、文本）

2.操作文本

3.操作属性

4.操作CSS样式（一个特殊的属性style）

5.操作元素