0
点赞
收藏
分享

微信扫一扫

JavaScript中的BOM与DOM

橙子好吃吗 2022-03-24 阅读 159
javascript

1,

1, BOM的概念

              BOM 是Browser Object Model的缩写,简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象,用于访问浏览器的功能。BOM由一系列相关的对象构成,并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作.

              JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C, 但是BOM缺乏标准.由于BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。

2, window对象

             window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象与之对应.

             window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的

window对象的属性对象:

         document(核心): 文档对象,让我们可以在js脚本中直接访问页面元素(DOM)

         history(重要): 历史对象,包含窗口的浏览历史,可以实现后退

         location(重要): 包含浏览器当前的地址信息,可以用来刷新本页面或跳转到新页面

         frames: 框架对象,可以获取页面框架内容

         screen: 包含有关客户端显示屏幕的信息

         navigator: 导航对象, 包含所有有关访问者浏览器的信息

window对象的方法:

        alert(text): 弹出提示框(警告框)

        confirm(): 创建一个需要用户确认的对话框

        prompt(text,defaultInput) : 创建一个对话框要求用户输入信息

        open(url,name,[options]) : 打开一个新窗口并返回新 window 对象

        setInterval(): 设置定时器

        clearInterval() : 移除定时器

        setTimeOut() : 设置延时器

        clearTimeOut(): 移除延时器

        close(): 关闭窗口

        print(): 调出打印对话框

 window对象的属性和方法的调用:

     window对象的属性和方法的调用方式,可以使用 window.属性、window.方法()或者一般可以直接使用: 属性、方法()的方式调用。

3, 系统对话框

 alert(“谢谢”);  弹出警告框

confirm(“请确定或者取消”);   提示框 :确定和取消
 if (confirm((“请确定或者取消”)){
      alert(“您按了确定!”);      //按确定返回true
 } else{
      alert(“您按了取消!”)       //按取消返回false
 }

4, window.open()

      window.open(): 打开指定的网址url.  一般可以接受三个参数:

     (1. 要加载的URL   2. 窗口的名称 或者 窗口的目标  3. 一个特性的字符串)


open(“http://www.baidu.com”);	           //新建页面并打开百度
open(“http://www.baidu.com”, “baidu”);       //新建页面并打开百度,窗口命名为baidu
open(“http://www.baidu.com”, “_parent”);    //在本页窗口打开, _blank是新建(默认)
注: 不命名会每次打开新窗口,命名的第一次打开新窗口,之后在这个窗口中加载。

第三个字符串参数: 
width/height:  新窗口的宽度和高度, top/left: 新窗口的Y坐标和X坐标 
open(‘http://www.baidu.com’, ‘baidu’,‘width=400,height=400,top=200,left=200’ );

opener: 父窗口对象
document.onclick = function(){
opener.document.write("调用父窗口对象输出!");

5, location对象

        location是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。

        事实上,location对象是window对象的属性,也是document对象的属性; 所以window.location和document.location等效

location对象的属性

        location.hash = ‘#1’;   //设置#后的字符串,并跳转

        console.log(location.hash);   //获取#后的字符串

        console.log(location.port);  //获取当前端口号

        console.log(location.hostname);   //获取主机名(域名)

        console.log(location.pathname);   //获取当前路径(服务器地址后部分)

        console.log(location.search);   //获取?后面的字符串

        location.href = “http://www.baidu.com”;   //设置跳转的URL,并跳转

location对象的方法

        location.assign(‘http://www.baidu.com’);    //跳转到指定的URL, 与href等效

        location.reload();      //最有效的重新加载,有缓存加载

        location.reload(true);    //强制加载,从服务器源头重新加载

        location.replace(“http://www.baidu.com”);  //用新的URL替代,可以避免产生历史记录

 6, history对象

        history对象是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起.

history对象的属性

       history.length; //history对象中的记录数

history对象的方法

      history.back();     //前往浏览器历史条目前一个URL, 类似后退

      history.forward();  //前往浏览器历史条目下一个URL, 类似前进

      history.go(-1); //浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)

7, navigator对象(了解)

      navigator对象是window对象的属性,它保存了浏览器的信息, 如: 浏览器名称,版本,浏览器所在的电脑操作系统等

navigator对象的属性

        console.log(navigator.appName);  //浏览器名称

        console.log(navigator.appVersion);  //浏览器版本

        console.log(navigator.platform);  //操作系统

        //最新的浏览器已经全面放弃以上这些属性

navigator对象的属性

        console.log(navigator.userAgent);  //用户代理信息, 通过该属性可以获取浏览器及操作系统信息

close() 关闭浏览器

注意: 火狐浏览器不支持, 如要支持火狐浏览器, 则可以先open指定的页面,然后在该页面调用close()

print()调出打印对话框打印对话框关闭浏览器 

 8.DOM的概念

      DOM就是Document  Object Model(文档对象模型)的缩写,DOM 是 W3C(万维网联盟)的标准。

      DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

DOM节点分类

        DOM节点分为三种:  元素节点, 属性节点和文本节点

例如: <div title= "属性节点" >测试Div</div>

<div></div>:  元素节点(最重要)
title="属性节点":  属性节点
测试Div :  文本节点

1, 元素节点对象的获取方式:

         getElementById():  获取特定ID元素的节点对象(返回一个对象)
         getElementsByTagName():  获取指定标签名的节点列表(返回一个数组)
         getElementsByName():  获取相同name属性值的节点列表(返回一个数组)

2, 元素节点的属性

       

        tagName: 元素节点对象所指向的标签名称

        id: 元素节点的id属性值

        innerHTML: 元素节点中的内容

        className: 元素节点的class属性值

        style: css内联样式对象

        title:  元素节点的title属性值

DOM节点的共有属性

        DOM节点可以分为元素节点(1)、属性节点(2)和文本节点(3),而这些节点又有三个共有的属性,分别为:nodeName、nodeType 和 nodeValue。

2, winddd     window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对        象与之对应.

     window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的

BOM的概念

      BOM

2, window对象

     window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象与之对应.

     window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的是Browser Object Model的缩写,简称浏览器对象模, 提供了独立于内容而与浏览器窗口进行交互的对象,用于访问浏览器的功能。BOM由一系列相关的对象构成,并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作.

      JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C, 但是BOM缺乏标准.由于BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准。

举报

相关推荐

0 条评论