BOM和DOM入门（修订）

学习&实践爱好者

已于 2023-11-26 08:09:25 修改

阅读量1.2k

点赞数

分类专栏： JavaScrip技术文章标签： javascript 前端

于 2020-11-12 07:47:26 首次发布

本文链接：https://blog.youkuaiyun.com/cnds123/article/details/109635554

版权

JavaScrip技术专栏收录该内容

150 篇文章

订阅专栏

BOM和DOM入门（修订）

在Web开发中，JavaScript通常与ECMAScript、DOM和BOM一起使用。ECMAScript是JavaScript语言的核心规范，而DOM和BOM是宿主环境（如Web浏览器）提供的API，它们允许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程序对用户的显示器进行检测，动态调整网页的布局。

检测显示器的参数

with (document)

{

write ("您的屏幕显示设定值如下：<p>");

write ("屏幕的实际高度为", screen.availHeight, "<br>");

write ("屏幕的实际宽度为", screen.availWidth, "<br>");

write ("屏幕的色盘深度为", screen.colorDepth, "<br>");

write ("屏幕区域的高度为", screen.height, "<br>");

write ("屏幕区域的宽度为", screen.width);

}

</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”开头。

例１、给按钮绑定点击事件（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);

下面给出完整的例子

例２、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操作详细总结_奈何的人生-优快云博客

二、Window对象基本操作思维导图