js基础学习第一天（关于DOM和BOM）一

最新推荐文章于 2024-05-05 19:55:36 发布
最新推荐文章于 2024-05-05 19:55:36 发布
阅读量6.6k 收藏 13
点赞数 2
文章标签： 浏览器 opera windows 文档 javascript url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x6587305x/article/details/7045285
版权
本文深入探讨了浏览器对象模型(BOM)和文档对象模型(DOM)的功能，包括BOM提供的窗口操作方法和DOM的元素访问能力。详细介绍了window对象及其属性、方法，以及如何通过DOM获取和设置HTML页面元素的属性。
摘要由CSDN通过智能技术生成

关于BOM和DOM

BOM

下面一幅图很好的说明了BOM和DOM的关系



        BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！

        window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。JavaScript中的任何一个全局函数或变量都是window的属性！！！！！！！！！！

window对象关系属性

  • parent：如果当前窗口为frame，指向包含该frame的窗口的frame （frame）
  • self ：指向当前的window对象，与window同意。 （window对象）
  • top ：如果当前窗口为frame，指向包含该frame的top-level的window对象
  • window ：指向当前的window对象，与self同意。
  • opener ：当窗口是用javascript打开时，指向打开它的那人窗口（开启者）

window对象定位属性

IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小（显示HTML页的区域），但它们不是标准属性。Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

window对象的方法

窗体控制


              moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体

              moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域

              resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体

              resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素窗体滚动轴控制

              scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置

              scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)窗体焦点控制

              focus()—— 使窗体或控件获取焦点blur()——与focus函数相反，使窗体或控件失去焦点新建窗体

              open()——打开(弹出)一个新的窗体

	            window.open(url, name, features, replace);

                          open方法参数说明

                                  url -- 要载入窗体的URL

                                  name -- 新建窗体的名称(目标,将在a 标签的target属性中用到，当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开

                                  features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔

                                  replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定

open函数features参数说明,如果不使用第三个参数，将打开一个新的普通窗口

参数名称类型说明
heightNumber设置窗体的高度，不能小于100
leftNumber说明创建窗体的左坐标，不能为负值
locationBoolean窗体是否显示地址栏，默认值为no
resizableBoolean窗体是否允许通过拖动边线调整大小，默认值为no
scrollbarsBoolean窗体中内部超出窗口可视范围时是否允许拖动，默认值为no
toolbarBoolean窗体是否显示工具栏，默认值为no
topNumber说明创建窗体的上坐标，不能为负值
statusBoolean窗体是否显示状态栏，默认值为no
widthNumber创建窗体的宽度，不能小于100
　 特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格

open方法返回值为一个新窗体的window对象的引用


              close()——关闭窗体opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思



对话框
alert(str)—— 弹出消息对话框（对话框中有一个“确定”按钮）
confirm(str)—— 弹出消息对话框（对话框中包含一个“确定”按钮与“取消”按钮）
prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框），由于各个浏览器实现的不同，若没有第二个参数（文本框中的默认值）时也最好提供一个空字符串
状态栏
window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，浏览器底部的区域称为状态栏，用于向用户显示信息
window.status 属性——临时改变浏览器状态栏的显示
时间等待与间隔函数
setTimeout()—— 暂停指定的毫秒数后执行指定的代码
clearTimeout()——取消指定的setTimeout函数将要执行的代码
setInterval()——间隔指定的毫秒数不停地执行指定的代码
clearInterval()——取消指定的setInterval函数将要执行的代码

setTimeout与setInterval方法有两个参数，第一个参数可以为字符串形式的代码，也可以是函数引用，第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

	var tid = setTimeout("alert('1')",1000);
	alert(tid);
	clearTimeout(tid);

History对象,在浏览器历史记录中导航

History 对象的属性:length 返回浏览器历史列表中的 URL 数量

History 对象的方法

  • back() 加载 history 列表中的前一个 URL
  • forward() 加载 history 列表中的下一个 URL
  • go(num) 加载 history 列表中的某个具体页面

Location 对象

Location 对象的属性

  • hash 设置或返回从井号 (#) 开始的 URL（锚）
  • host 设置或返回主机名和当前 URL 的端口号
  • hostname 设置或返回当前 URL 的主机名
  • href 设置或返回完整的 URL
  • pathname 设置或返回当前 URL 的路径部分
  • port 设置或返回当前 URL 的端口号
  • protocol 设置或返回当前 URL 的协议
  • search 设置或返回从问号 (?) 开始的 URL（查询部分）

Location 对象的方法

  • assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
  • reload()重新加载当前文档，如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
  • replace() 用新的文档替换当前文档，replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

Navigator对象

Navigator 对象的属性

  • appCodeName 返回浏览器的代码名
  • appName 返回浏览器的名称
  • appVersion 返回浏览器的平台和版本信息
  • browserLanguage 返回当前浏览器的语言
  • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
  • cpuClass 返回浏览器系统的 CPU 等级
  • onLine 返回指明系统是否处于脱机模式的布尔值
  • platform 返回运行浏览器的操作系统平台
  • systemLanguage 返回 OS 使用的默认语言
  • userAgent 返回由客户机发送服务器的 user-agent 头部的值
  • userLanguage 返回 OS 的自然语言设置

框架与多窗口通信

子窗口与父窗口

只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中，可以通过window.open方法的返回值来访问打开的窗口！

框架

window.frames集合：在框架集或包含iframe标签的页面中，frames集合包含了对有框架中窗口的引用

	alert(frames.length);//框架的数目
	alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用
	//不但可以使用下标，还可以使用frame标签的name属性
	alert(frames["frame1"].document.title);

在框架集中还可以使用ID来获取子窗口的引用

	var frame1 =document.getElementById("frame1");//这样只是获取了标签
	var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用
	//还可以直接获取框架中document的引用
	var frameDoc = frame1.contentDocument;
	alert(frameDoc);//但IE不支持contentDocument属性

子窗口访问父窗口——window对象的parent属性

子窗口访问顶层——window对象的top属性

浏览器检测

市场上的浏览器种类多的不计其数，它们的解释引擎各不相同，期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候，然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了，主要分为两种：1.userAgent字符串检测，2.对象检测；当然，也不能考虑所有的浏览器，我们需要按照客户需求来，如果可以确信浏览网站的用户都使用或大部分使用IE浏览器，那么你大可放心的使用IE专有的那些丰富的扩展，当然，一旦用户开始转向另一个浏览，那么痛苦的日子便开始了。下面是市场上的主流浏览器列表：

  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

注意，浏览器总是不断更新，我们不但要为多种浏览器作兼容处理，还要对同一浏览器多个版本作兼容处理。比如IE浏览器，其6.0版本和7.0版本都很流行，因为微软IE随着操作系统绑定安装（之前也是同步发行，微软平均每两年推出一款个人桌面，同样IE也每两年更新一次；直到现在，由于火狐的流行，IE工作组才加快IE的更新），所以更新的较慢，6.0版和7.0版有很大差别。

市场上还存在一些其它浏览器，但由于它们都是使用的上面所列浏览器的核心，或与上面浏览器使用了相同的解释引擎，所以无需多作考虑。下面是主流的浏览器解释引擎列表：

利用userAgent检测

下面是各大浏览器使用弹窗显示的userAgent字符串

IE浏览器：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

火狐浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Opera浏览器：Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1

Safari浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

Google Chrome浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5

可以使用下面的代码进行浏览器检测

	var Browser = {
		isIE:navigator.userAgent.indexOf("MSIE")!=-1,
		isFF:navigator.userAgent.indexOf("Firefox")!=-1,
		isOpera:navigator.userAgent.indexOf("Opera")!=-1,
		isSafari:navigator.userAgent.indexOf("Safari")!=-1
	};

但这样做并不是万无一失的，一个特例便是Opera可以使用userAgent伪装自己。下面是伪装成IE的userAgent：Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64；在完全伪装的情况下，最后的“Opera 9.64”这个字符串也不会出现，但Opera也有特殊的识别自身的方法，它会自动声明一个opera全局变量！

不但如此，我们的检测还忽略了一点，就是那些使用相同引擎而品牌不同的浏览器，所以，直接检测浏览器是没有必要的，检测浏览器的解释引擎才是有必要的！

	var Browser = {
		isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera,
		isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera 
		&& navigator.userAgent.indexOf("KHTML") ==-1,
		isKHTML:navigator.userAgent.indexOf("KHTML")>-1,
		isOpera:navigator.userAgent.indexOf("Opera")>-1
	};

DOM

document对象有三个强大的方法，可以获取页面的任何元素

1.document.getElementById("p1");//获取ID为p1的那个元素

 2.document.getElementsByTagName("p");//获取文档中所有p标签 返回是一个集合
      getElementsByTagName还可以使用通配符*来获取所有的元素
      var allTags = document.getElementsByTagName("*");
      更强大的是，getElementsByTagName不但可以在document对象上调用，也可以在其它HTML元素上调用
      var p2 = document.getElementById("p2");	var p2ps = p2.getElementsByTagName("em");//将获取p2下面的em元素，而不获取p2之外的em

 3.document.getElementsByName("check");//获取所有name为check的元素
由于name可以重复，getElementsByName方法始终返回一个集合，不管页面中name是否是唯一的。IE 6.0和Opera 7.5在这个方法的使用上还存在一些错误。首先，它们还会返回id等于给定名称的元素。第二，它们仅仅检查<input/>和<img/>元素。

获取和设置元素属性——getAttribute与setAttribute方法



西门大扫雪
关注
js中BOM和DOM之间的详解
tiny_wei的博客
04-05 8719
一、Javascript组成JavaScript的实现包括以下3个部分：1、核心（ECMAScript）：描述了JS的语法和基本对象。2、文档对象模型 （DOM）：处理网页内容的方法和接口。3、浏览器对象模型（BOM）：与浏览器交互的方法和接口。二、BOM（浏览器对象模型）1、window对象说明：BOM的核心对象是window，他表示浏览器的一个实例。他既是通过JavaScript访问浏览器窗口...
JS操作BOM和DOM
qq_39787513的博客
09-03 282
JS操作BOM和DOM一、js中的json序列化二、BOM操作1、location对象2、计时器三、DOM对象1、创建标签2、查找标签3、文本操作4、值操作5、事件6、JS获取时间 上一节补充：弹性盒子 弹性盒子可用来做居中效果(推荐) display:flex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&
js中的BOM和DOM对象
06-20
js中的BOM对象(window等)
BOM和DOM的区别
weixin_30596165的博客
10-25 153
　　 BOM跟DOM的区别和关联 BOM 1. BOM是Browser Object Model的缩写，即浏览器对象模型。 2. BOM没有相关标准。 3.BOM的最根本对象是window。 从1可以看出来：BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的，例如打开新窗口、打开新选项卡（标签页）、关闭页面，把网页设为主页，或加入收藏夹，等等…这些涉及到的对象...
【JS基础】DOM和BOM
cannotbecounted的博客
07-03 729
对JS基础知识DOM和BOM进行简要的介绍。
JavaScript基础&BOM，学习Java第42天
07-31
JavaScript是一种广泛应用于网页和网络应用开发的解释性脚本语言，其主要由ECMAScript、BOM（浏览器对象模型）和DOM（文档对象模型）三部分组成。在HTML、CSS和JS这构建网站的三大技术中，JavaScript负责赋予网页...
JS 面试知识学习历程（第六天） -- DOM操作和BOM操作
huhao0829的博客
02-01 1028
Chapter6 JS-Web-API – DOM操作和BOM操作这是我自己的学习过程总结，如果有什么写的不清楚的地方，欢迎大家交流、批评、提问。可以在这里评论，也可以在github上提问，谢谢大家6.1 DOM操作（Document Object Model）题目 DOM是哪种基本的数据结构？ DOM操作的常用API有哪些 DOM节点的attr和property有何区别 知识点 DOM本质 D
前端基础进阶-JavaScript核心 DOM BOM操作-第三天课堂案例动态生成表格
weixin_48132252的博客
01-06 437
动态生成表格表格结构代码实现知识点回顾三级目录 表格结构 代码实现 知识点回顾 border-collapse: collapse; /* 为表格设置合并边框模型： */ 表格结构 三级目录
web前端JS（DOM）学习第三十一天
StarAh的博客
04-15 896
web前端JS（DOM）学习第三十一天
JS基础入门：第一天学习概览
"JS基础第一天的学习概述，包括学习方法、目标和JS的三种书写方式的介绍，以及JS中的常见三种打印输出方法和变量的基本写法。" 在JavaScript（JS）学习的初期，理解基础语法至关重要，因为它是后续所有进阶知识的...
JS中的DOM与BOM
CodeNotes
08-08 3160
一.Javascript组成 JavaScript的实现包括以下3个部分： ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口 javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaS...
javascript中的DOM和BOM
最新发布
lh11223326的博客
05-05 1540
在JavaScript中，对象是一种复杂的数据类型，允许我们存储一组值（属性）以及方法。对象可以看作是一种数据的集合，其中包含键值对，其中键是字符串或符号，而值可以是任何数据类型，包括其他对象。或者说对象是一些属性的无序集合，其中每一个属性都对应一个名称和值(键/值对)。如数组是一堆值的集合，其中的每一个值都有一个数字的索引(从0到n-1)，对象也类似与数组，不同的是其中的索引是我们自己定义的(名称)，如：city(城市)，scale(规模).....等等。
JS学习总结之三：DOM和BOM
time_goes的博客
10-06 214
一、DOM简介 一个完整的JavaScript实现包含三个部分：ECMAScript、DOM、BOM； 1、那什么是DOM呢？ DOM，全称：Document Object Model（文档对象模型）； JS中通过DOM来对HTML文档进行操作，从而操作Web页面； 文档—表示的就是整个HTML网页文档； 对象—表示将网页中的每一个部分都转换为一个对象； 模型—使用模型来表示对象之间的关系...
js中BOM对象
weixin_59017683的博客
12-20 515
window对象就是顶级对象。window对象的特点为：凡是window对象中的属性或方法，window顶级对象都可以省略不写。操作浏览器（通过js的方式实现浏览器中的某些功能）1.通过js的方式实现页面刷新效果2.通过js的方式实现浏览器中的上一页、下一页功能3.通过js的方式实现页面的跳转。
JavaScript中的DOM和BOM对象
weixin_51473175的博客
12-02 256
DOM和BOM对象，包括获取对象、事件、节点、js执行机制、正则表达式等
前端技术学习第四讲：JavaScript中DOM和BOM
跟着老高学Java
03-27 1744
JavaScript中DOM和BOM 一、DOM和BOM DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。 BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可
JS中的BOM和DOM的介绍与使用
赵广陆
04-26 1150
1.13BOM 和 DOM 对象 什么是BOM BOM是Browser Object Model的简写，即浏览器对象模型。 BOM由一系列对象组成，是访问、控制、修改浏览器的 属性的方法 BOM没有统一的标准(每种客户端都可以自定标准)。 BOM的顶层是window对象 什么是DOM DOM是Document Object Model的简写，即文档对象模 型。 ...
Javascript之BOM与DOM讲解
xiaohubeiplus的博客
07-04 492
1.Javascript组成 JavaScript的实现包括以下3个部分： 1）核心（ECMAScript）：描述了js的语法和基本对象。 2）文档对象模型 （DOM）：处理网页内容的方法和接口 3）浏览器对象模型（BOM）：与浏览器交互的方法和接口   ECMAScript扩展知识： ① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值