JavaScript之BOM和DOM入门
JavaScript之BOM和DOM入门
JavaScript的组成包含三大部分,分别为ECMAScript、DOM和BOM。JavaScript组成,如下图所示:
ECMAScript是JavaScript语言的规范,它描述了JavaScript语言的基本语法和数据类型等,见前面的文章,本文主要要介绍DOM和BOM。
浏览器对象模型BOM(Browser Object Model)主要用于管理窗口与窗口之间的通讯。其核心对象是window;window是Javascript顶层对象,表示浏览器的一个实例。它既是JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的Global对象。其他BOM对象均为window对象的子对象,被作为window对象的属性来引用。
BOM 描述了与浏览器进行交互的方法和接口,可以对浏览器窗口进行访问和操作,譬如可以弹出新的窗口,改变状态栏中的文本,对Cookie的支持等。
文档对象模型DOM(Document Object Model),用于表示和操作HTML文档内容的基础API;
DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。
DOM 描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。
☆BOM
浏览器对象模型(Browser Object Model,简称BOM)是对浏览器窗口进行访问和操作的功能接口。例如,弹出新的浏览器窗口、获取浏览器信息等。注意,BOM是作为JavaScript的一部分而不是作为W3C组织的标准,每款浏览器都有自己的实现方式,这会导致BOM代码的兼容性不如ECMAScript和DOM代码的兼容性。
对象层次结构参见下图,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
从上图可以看出:DOM是属于BOM的一部分(Document 对象是 Window 对象的一部分):DOM的最根本的对象document是BOM的最根本window对象的子对象。
window对象是BOM的顶层(核心)对象,它表示浏览器的一个实例,对于每个打开的窗口,系统都会自动为其定义window对象。或者说,Window 对象表示浏览器中打开的窗口。其它对象都是通过它延伸出来的,也可以称为window的子对象。
window对象既是ECMAScript规范中的Global对象,也是BOM中的顶级对象;window对象是相对于web浏览器而言的,依赖于浏览器。
global对象可以说是ECMAScript中对特别的一个对象了,因为不管你从什么角度上看,这个对象都是不存在的。从某种意义上讲,它是一个终极的“兜底儿对象”,换句话说呢,就是不属于任何其他对象的属性和方法,最终都是它的属性和方法。比如isNaN()、parseInt()以及parseFloat()等,实际都是它的方法;还有就是常见的一些特殊值,如:NaN、undefined等都是它的属性,以及一些构造函数Object、Array等也都是它的方法。总之,记住一点:global对象就是“老祖宗”,所有找不到归属的就都是它的。
document对象既是BOM顶级对象的一个属性,也是DOM模型中的顶级对象。文档对象模型(Document Object Model,简称DOM)是针对HTML和XML文档的一个API((ApplicationProgramming Interface,应用程序编程接口)),现在已经成为表现和操作页面标记的真正的跨平台、语言中立的一种标准。
document对象是window对象的一个属性,是显示于窗口内的一个文档。而window对象则是一个顶层对象,它不是另一个对象的属性。document可以理解为文档,就是你的网页,而window是你的窗口,就是你的浏览器包含的。它们俩在没有框架的情况下可以说是等同的,在有框架的情况下就要区别对待了。
location对象既是window对象的属性,同时也是document对象的属性。换句话说,window.location和document.location引用的是同一个对象。
另一种对象层次结构图示如下,注意,图中有些对象是全小写的,有些是以大写字母开头的。以大写字母开头的对象表示,引用该对象不使用下表列出的名字,而直接用对象的“名字”(Id 或 Name),或用它所属的对象数组指定。
☆DOM
文档对象模型(Document Object Model,简称DOM)是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口(API)。网页上组织页面(或文档)的对象被组织在一个树形结构中,通过DOM操作的方式可以让页面跟JavaScript进行通信或交互。DOM树展示,如下图所示:
DOM用于操控HTML和CSS的标签结构(即节点)——用 DOM API可以轻松地删除、添加和替换节点,从而使开发者对文档的内容和结构具有空前的控制力。
这是很简单的情况,实际上现实使用的要复杂的多。
简单地说,BOM描述了与浏览器进行交互的方法和接口, 是为了操作浏览器出现的 API(应用程序接口),DOM 述了处理网页内容的方法和接口,是为了操作文档出现的 API(应用程序接口),DOM是属于BOM的一部分。
下面介绍BOM和DOM的使用,首先指出,这部分内容很繁杂,在本文中仅选择介绍了我认为比较重要的一部分。
window对象的使用
window对象代表当前打开的浏览器窗口,其作为顶级对象。window对象的方法和属性的调用和其它对象一样,区别是window对象不需要创建即可直使用。需要注意的是window对象名称是小写,下面是其属性和方法的调用语法。
window.属性名
window.方法名(参数列表)
并且,因为window是顶级对象,可以省略window不写。
window对象事件
网页加载完毕时激发一个onload事件;
unload事件是在浏览器窗口卸载文档时所激发的事件。
得到焦点是指浏览器窗口为当前的活动窗口,得到焦点时触发窗口对象的focus事件。
使用window对象的open方法可以打开一个新的浏览器窗口,新窗口作为本窗口的子窗口。相应的本窗口作为新窗口的次窗口,并持有对新窗口的一个引用,通过该引用可以适度的操作新窗口。open方法的语法如下:
window.open(url,name,features,replace)
其中,features是描述窗口的特征, replace指明是否允许url替换窗口的内容。详细情况可参见: Window.open() - Web API 接口参考 | MDN
例子、在新窗口打开百度,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关闭窗口</title>
</head>
<body>
<script>
function op()
{window.open("http://www.baidu.com","baidu","heigth=300,width=200");
}
</script>
http://www.baidu.com <br>
<label>
<input type="submit" name="Submit" onClick="op()" value="打开" >
</label>
</script>
</body>
</html>
保存文件名为:打开窗口.html
你可以运行之试试。
如果获得一个window对象的引用时,通过该引用去调用其close方法就可以关掉一个与之相关的窗口。通常情况下,父窗口通过这种方式关闭子窗口。语法如下:
窗口名.close()
关闭窗口例子代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关闭窗口</title>
</head>
<body>
<script>
function closeWindow()
{ if(self.closed){alert("窗口已经关闭")}else{self.close()}
}
</script><label>
<input type="submit" name="Submit" onClick="closeWindow()" value="关闭" >
</label>
</script>
</body>
</html>
保存文件名为:关闭窗口.html
你可以运行之试试。
屏幕对象 (screen)的使用
屏幕对象(screen)提供了获取显示器信息的功能,检测显示器参数。显示的参数一般都包括显示面积的宽、高度和色深等,其中宽、高度是比较有意义的,直接与网布局相关,色深只是影响图形色彩的逼真程度 。
显示器分辨率是指显示器所能显示的宽度和高度,通常以像素(pixel)为单位。在实际应用中,为了使制作的网页能适应不同的浏览器环境,最好使用JavaScript程序对用户的显示器进行检测,动态调整网页的布局 。
检测显示器的参数
<Script>
with (document)
{
write ("您的屏幕显示设定值如下:<p>");
write ("屏幕的实际高度为", screen.availHeight, "<br>");
write ("屏幕的实际宽度为", screen.availWidth, "<br>");
write ("屏幕的色盘深度为", screen.colorDepth, "<br>");
write ("屏幕区域的高度为", screen.height, "<br>");
write ("屏幕区域的宽度为", screen.width);
}
</Script>
检测显示器的分辨率
<script>
document.write("您的屏幕分辨率是"+screen.width+" * "+screen.height); // 分辨率
</script>
DOM的使用
下面开始介绍DOM(Document Object Model,文档对象模型)的使用。
Document对象包含当前文档的信息,例如:标题、背景、颜色、表格等。
常用方法:
(1)通过write()/writeln()方法在浏览器中显示内容。
(2)获得当前文档中的元素、属性和节点信息(例如:通过“document.formName”来获得表示页面中的表单名称为fromName的表单对象)。
(3)getElementById()和getElementByTagName()。这两个方法会忽略文档的结构,可查找整个HTML文档中的任何元素(不论它们在文档中所处的位置,例如通过getElementByTagName()可以把文档中所有的<p>元素找到)。
文档对象(document对象),为操作HTML文档提供接口,拥有大量的属性和方法,它有大量的子级对象,例如图像对象、超级接对象、表单对象等等 。不需要手工创建,在文档初时化时就已经由系统内部创建。直接调用其方法或属性即可。
DOM 定义了多种查找元素的方法: getElementById() 、getElementsByName() 和 getElementsByTagName()。
getElementById() 方法的语法:
document.getElementById(elementID)
getElementById() 方法的语法:
document.getElementById(elementID)
其中,elementID 必须,String类型的元素ID属性值。
返回指定ID的元素对象。
获取元素
document文档指整个页面的根对象(最外层对象),通过document文档获取页面中的具体HTML元素。注意document文档的类型为对象类型,即typeof document返回object值,因此,通常document文档亦称document对象。document文档页面的最外层如图所示。
document文档页面的最外层如下图所示:
document对象常见属性如下:
document.doctype 用于获取或设置文档头信息
document.documentELement 用于获取或设置<html>标签
document.head 用于获取或设置<head>标签
document.body 用于获取或设置<body>标签
document.title <用于获取或设置title>标签。
可以先通过给元素添加id属性,如:
<… id="xxx" …>
然后,通过document对象的getElementById()方法——把id值通过字符串形式放到此方法的小括号中,获取元素。除了获取元素外,也可以对元素的属性进行设置。
在前面,讲解了DOM操作HTML元素的属性,同样对HTML元素的style属性也能够获取和设置。
getElementById()方法可以获取到指定id的HTML元素。那么,如何获取一个HTML元素集合呢?例如,一组<li>标签。可以通过getElementsByTagName()方法来实现,该方法通过指定HTML标签名的方式来获取。
注意,一组标签即可以在整个document文档下获取,也可以在指定的祖先元素下获取。此方式与getElementById()方法不一样,getElementById()方法只能在document文档下获取,因为id属性具有唯一性,不存在包含关系。
获取到元素集合后,如何去操作?在JavaScript语法中不能直接去操作整体集合,必须分别操作集合的每一项元素。可以通过“[]+下标”的方式获取指定集合中的某一项元素,下标从0开始。例如,li[0]表示li集合中的第一个元素,li[1]表示li集合中的第二个元素。
可以通过集合对象下面的length属性获得集合内元素的个数。获取到集合的长度,再配合循环语句,就可以对一组HTML元素集合操作。
下面给出九九表一个例子
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function secondFunction(){var div = document.getElementById("div1");for (var i = 1; i < 10; i++) {for (var j = 1; j <= i; j++) {div.innerHTML += j + "*" + i + "=" + (i*j) ;div.innerHTML += " "}div.innerHTML += "<br>" ;}
}
</script>
</head>
<body>
<input type="button" onclick="secondFunction()" value="显示九九表">
<div id="div1"></div>
</body>
</html>
保存文件名为:九九表.html
你可以运行之试试。
From对象:
Form对象是document下的一个子对象,表示表单对象(From对象)。
DOM的forms 集合
表单就是<form></form>之间部分,一个网页可以有多对<form></form>即可以有多个表单,JavaScript会为每个表单创建一个Form对象,形成一个forms 集合,并将这些Form对象存放在forms[]数组中。
forms 集合返回当前页面所有表单(form)的数组集合。
语法
document.forms[索引值或表单名字符串]
如document.forms[0] 是你网页中的第一个表单,索引(index)从0开始。
document.forms("form")表示document里名字叫form的那个表单。
文档中的<form>标记确定了文档中文档对象的顺序,这种引用对象的方法就是引用表单的一种方法,因此可以使用表单名来引用。
表单的元素有很多,这些表单元素可以让用户输入文字,如文本框、密码框等;或者让用户选择可选项,如下拉列表框、复选框等;也可以让用户提交信息或重置表单,如提交按钮、重置按钮等;甚至还可以为程序员提供开发上的便利,如隐藏框等。这些都时表单对象的子对象。
form对象中可以使用elements[]数组来获得代表这些表单元素的子对象。elements[]数组中存放的是各种类型的form对象的子对象,elements[]数组中的元素是由<form>标签与</form>标签之间表单元素所组成的,因此可以使用以下代码来获得代表HTML文档中的第1个Form对象中的第2个元素的对象。
表单元素访问方法
var str1=form1.elements[0].value; //元素命名访问方法一
var str2=form1.text3.value; //元素命名访问方法二
var str3=document.forms[1].elements[0].value; //元素命名访问方法三
代表多行文本框的对象称为textarea对象、代表文本框的对象称为text对象、代表密码框的对象称为password对象。
HTML创建多行文本框、单行文本框、密码文本框示例见下面表单(form)的例子
【关于HTML元素参考HTML 元素参考 - HTML(超文本标记语言) | MDN 】
表单(form)的例子,代码如下:
<!doctype html>
<html>
<head>
<title>表单示例</title> <!--文档的头各标题-->
<script> //JavaScript程序
function img()
{for(i=0;i<document.forms[1].length-1;i++){document.Myform.showMsg.value +=document.forms[1].elements[i].value+"\n"; //第i-1个<form>标签 }alert(Myform.showMsg.value); //用对话框的形式显示信息
}
</script> <!-- JavaScript结束标签-->
</head> <!--JavaScript头的>结束 -->
<body>
<form name="Myform"> <!--表单--><p>显示个人信息</p> <!--带文本的段落--><p> <!--段落--><textarea name="showMsg" cols="40" rows="8" ></textarea></p> <!--段落结束--></form> <!--表单结束-->
<form name="form1" method="post" action=""> <!--创建一个表单-->个人信息<br> 姓名:<input type="text" name="Name" > <!--姓名文本模框--><p>性别:<input type="text" name="sex"> <!--性别文本模框--> </p><p>学号:<input type="text" name="num"> <!--学号文本模框--> <label><input type="submit" name="Submit" value="提交" onClick="img()"> <!--提交表单调用img函数--> </label></p>
</form>
</body>
</html>
保存文件名为:表单(form)的例子.html
你可以运行之,参见下图:
DOM中的事件
事件(event)是一些特定动作发生时所发出的信号,此信号发生时可以触发(引发)执行相应的事件处理程序,你可以为事件编写相应的事件处理程序——事件触发时 JavaScript 可以执行一些代码。HTML页(Web页)事件可以是浏览器行为,也可以是用户行为。
【事件驱动程序设计(Event-driven programming)是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作(如鼠标的按键,键盘的按键动作)或者是由其他程序的消息来决定的。】
JavaScript中使用了异步事件,也就是说:JavaScript中的事件都是异步执行的。
下面是一些常见的HTML事件的列表:
事件 |
描述 |
onchange |
HTML 元素改变 |
onclick |
用户点击 HTML 元素 |
onmouseover |
用户在一个HTML元素上移动鼠标 |
onmouseout |
用户从一个HTML元素上移开鼠标 |
onkeydown |
用户按下键盘按键 |
onload |
浏览器已完成页面的加载 |
事件处理程序的名字以“on”开头。
例1、给按钮绑定点击事件(onclick)
<!DOCTYPE html>
<html>
<head>
<title>给按钮绑定单击事件</title><meta charset="utf-8">
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>给按钮绑定单击事件(onclick)</h1>
<p id="demo">这是一个段落.</p>
<input type="button" onclick="displayDate()" value="显示Date">
</body>
</html>
保存文件名为:给按钮绑定单击事件.html
运行之,参见下图:
下面简要介绍JS事件触发操作步骤:
原生js之document.createEvent建立自定义事件 - 博客sl - 博客园
createEvent:创建事件
initEvent:初始化事件
dispatchEvent:调度、发出事件
如:
var e = document.createEvent("HtmlEvents");
e.initEvents("事件名",true,true);
元素对象.dispatchEvent(e);
下面给出完整的例子
例2、JS事件触发示例
<!DOCTYPE html>
<html>
<head><title>事件触发</title><meta charset="utf-8">
</head>
<body><select id="sel"><option>中国</option><option>美国</option><option>日本</option><option>韩国</option></select><hr><div id="div" style="width:300px;height:150px;border:solid 1px red;"></div><script type="text/javascript">var sel = document.getElementById("sel");var div = document.getElementById("div");// 设置change事件后处理函数sel.onchange = function(){div.innerHTML = sel.options[sel.selectedIndex].text; //拿到选中的option的文本填充到div里}// 触发change事件的函数function dispatchChange(){var changeEvent = document.createEvent("HtmlEvents");changeEvent.initEvent("change",true,true);sel.dispatchEvent(changeEvent);}dispatchChange();</script>
</body>
</html>
保存文件名为:事件触发示例.html
你可以运行测试之。
附录、
一、JavaScript之BOM和DOM操作详细总结 【JavaScript教科书】JavaScript之BOM和DOM操作详细总结_奈何的人生-CSDN博客
二、Window对象基本操作思维导图
三、DOM基本操作思维导图
JavaScript之BOM和DOM入门相关推荐
- JavaScript中BOM及DOM的学习
JavaScript中BOM及DOM的学习 文章目录 JavaScript中BOM及DOM的学习 1 BOM编程 1.1 BOM编程概述 1.1.1 BOM编程的概念 1.1.2 BOM编程的作用 1 ...
- JavaScript中BOM和DOM(持续更新)
文章目录 1.API和WebAPIs 1.1 Web APIs和JS基础关联性 1.2 API和Web API 1.3 API和WebAPI总结 2.DOM 2.1 DOM简介 2.1.1 什么是DO ...
- Javascript之BOM与DOM讲解
一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口 浏览器对象模 ...
- javascript 学习 —— BOM和DOM编程学习
这是我的第一个博客,用来记录自己的学习历程.之前的学习会在项目下写备注,再次翻看也有些不方便.从今天开始就用博客记录吧. 一.BOM ( browser object model ) 与DOM 1.在 ...
- 前端JavaScript之BOM与DOM
什么是BOM,DOM avaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...
- 再谈BOM和DOM(1):BOM与DOM概述
JavaScript的实现包括以下3个部分: ECMAScript(核心):描述了JS的语法和基本对象. 浏览器对象模型(BOM):与浏览器交互的方法和接口 文档对象模型 (DOM):处理网页内容的方 ...
- JavaScript函数和BOM及DOM编程(详细总结-无尿点)
JavaScript函数和BOM及DOM编程(详细总结-无尿点) javascript 函数 一.javascript函数 1.1 概述 1.2 常见的系统函数 1.2.1 eval 1.2.2 pa ...
- javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄 事件句柄 类型 说明 onabort 事件句柄 图像加载被中断 onblur 事件句柄 元素失去焦点 onfocus 事 ...
- javascript (BOM DOM)
BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
最新文章
- intel xdk 打ios的ipa包
- maven 内置参数
- LNMP下目录访问验证
- JavaWeb(十一)——登录注册小案例
- 微信公众号网页开发:播放视频,在列表中滑动会脱离文档流
- yum 安装 sun java,CentOS yum安装sun Java jre jdk和openjdk
- 实现库函数strlen和strcpy
- 信息学奥赛一本通C++语言——1107:校门外的树
- 卡通形象医疗病毒细菌宣传海报模板,psd分层,方便应用!
- 自动化运维工具——ansible详解(一)
- 克罗谈投资策略05_涨势买入,跌势卖出
- C标准库函数中复杂的函数声明
- win7更改计算机名后桌面壁纸,win7系统电脑壁纸自动改变被恶意篡改的解决方法...
- 晶体二极管 三极管 MOS原理
- We discovered one or more bugs in your app when reviewed on iPhone and iPad running iOS 14.1
- 网易邮箱大师如何注册邮箱 注册邮箱方法步骤介绍
- python音频降噪处理_Python | 简单的扩音,音频去噪,静音剪切
- C语言计算圆周长和面积
- autoCAD 创建对象 使用面域 创建图案填充
- ps计算机软件专用报告,PS笔记_计算机软件及应用_IT计算机_专业资料