文章目录

BOM操作

BOM操作

浏览器对象模型（Browser Object Model， BOM）被广泛应用于Web开发之中，主要用于客户浏览器的管理。BOM概念比较古老，但是一直没有被标准化，不过主流浏览器均支持BOM，都遵循最基本的规则和用法，W3C也将BOM主要内容纳入了HTML5规范之中。

【学习重点】

使用window对象和框架集。
使用navigator、location、screen对象。
使用history对象。

window对象

window是客户端浏览器对象模型的基类，window对象是客户端js的全局对象。一个window对象实际上就是一个独立的窗口，对于框架页来说，浏览器窗口中每个框架都包含一个window对象。

全局作用域

在客户端浏览器中，window对象是访问BOM的接口，如果引用document对象的document属性，引用自身的window和self属性等。同时window也为客户端js提供全局作用域。

【实例】由于window是全局对象，因此所有的全局变量都被解析为该对象的属性。

var a = "window.a";

function f() {
    
    
    console.log(a);

}
console.log(window.a); //window.a
f(); //window.a

注意：使用delete运算符可以删除属性，但是不能删除变量。

访问客户端对象

使用window对象可以访问客户端其他对象，这种关系构成浏览器对象模型，window对象代表根节点，浏览器对象每个对象说明如下：

window：客户端:顶层对象。每个<body>和<frameset>标签出现时，window对象就会被自动创建。
navigator：包含有关浏览器的信息。
screen：包含客户端屏幕的信息。
history：包含浏览器窗口访问过的URL信息。
location：包含当前文档的URL信息。
document：包含整个HTML文档，可以被用来访问文档内容及其所有页面元素。

使用系统对话框

window对象定义了3个人机交互的方法，主要方便对js代码进行测试。

alert()：确定提示框。由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数，则会弹出一个空的对话框。
conform()：选择提示框。由浏览器向用户弹出提示信息，弹出的对话框中包含两个按钮，分别表示“确定”和“取消”。如果单击“确定”按钮，则该方法将返回true就；单击“取消”按钮，则返回false。confirm()方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个空的对话框。
prompt()：输入提示框。可以接受用户输入的信息，并返回输入的信息。prompt()方法也包含一个可选的提示信息参数，如果没有指定参数，则弹出一个没有提示信息的输入文本对话框。
【实例】下面实例演示了如何综合调用这三个方法来设计一个人机交互的对话。

var user = prompt("请输入你的用户名");
if (!!user) {
    
    
    var ok = confirm("你输入的用户名为： \n" + user + "\n 请确认。");
    if (ok) {
    
    
        alert("欢迎你 \n" + user);
    } else {
    
    
        user = prompt("请重新输入你的用户名：");
        alert("欢迎你 \n" + user);
    }
} else {
    
    
    user = prompt("请输入你的用户名：");
}

这三个方法仅接受文本提示信息，忽略HTML字符串，只能使用空格、换行符、各种符号来格式化提示对话框中的显示文本。

注意：显示系统对话框的时候，js代码会停止执行，只有当关闭对话框之后，js代码才会恢复执行。因此，不建议实战中使用者3个方法，仅作为开发人员的内测用具即可。

打开和关闭窗口

使用window对象的open()方法可以打开一个新窗口。

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

参数说明：

URL：可选字符串，声明在新窗口中显示网页文档的URL。如果省略，或者为空，则新窗口就不会显示任何文档。
name：可选字符串，声明窗口名称。可以做标记<a>和<form>的target目标值。如果该参数制定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用，在这种情况下，features参数将被忽略。
features：可选字符串，声明了新窗口要显示的标准浏览器的特征，如表，如果省略该参数，新窗口将具有所有标准特性。

特征	说明
fullscreen=yes\|no\|1\|0	是否使用全屏模式显示浏览器。默认是no。处于全屏模式的窗口同时处于剧院模式。
height=pixels	窗口文档显示区域的高度。单位为像素。
left=pixels	窗口的x坐标。单位为像素。
location=yes\|no\|1\|0	是否显示地址字段。默认是yes。
menubar=yes\|no\|1\|0	是否显示菜单栏。默认是yes。
resizeable=yes\|no\|1\|0	窗口是否课调节尺寸。默认是yes。
scrollbars=yes\|no\|1\|0	是否显示滚动条。默认是yes。
status=yes\|no\|1\|0	是否添加状态栏。默认是yes。
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏。默认是yes。
top=pixels	窗口y坐标。
width=pixels	窗口文档显示区的高度。单位为像素。

replace：可选布尔值。规定了装载到窗口的URL是在窗口的浏览器历史中创建一条新条目，还是替换浏览历史中的当前条目。

window.open()方法返回值为新创建的window对象，使用它可以引用新创建的窗口。

新创建的window对象拥有一个opener属性，引用打开它的原始窗口对象。opener只在弹出窗口的最外层window对象（top）中定义，而且指向调用window.open()方法的窗口和框架。

【实例1】下面实例演示了打开窗口与原窗口之间的关系。

win = window.open(); //打开新的空白窗口
win.document.write("<h1>这是新打开的窗口</h1>"); //在新窗口中输入提示信息
win.focus(); //让原窗口获取焦点
win.opener.document.write("<h1>这是原来的窗口</h1>"); //在原窗口中输出提示信息
console.log(win.opener == window); //检测window.opener属性

使用window的close()方法可以关闭一个窗口。例如，关闭一个新创建的win窗口可以使用下面方法实现。

win.close();

如果在打开窗口内部关闭自身窗口，则应该使用下面的方法。

window.close();

是window.closed属性可以检测当前窗口是否关闭，如果关闭则返回true，否则返回false。

【实例2】下面的实例演示如何自动弹出一个窗口，然后设置5秒钟后自动关闭该窗口，同时允许用户单击页面超链接，更换弹出窗口内显示的网页URL。

var url = "http://news.baidu.com";
var features = "height = 500, width = 800, top = 100, legt = 100, toolbar = no,menubar = no, scroolbars = no, resizable = no, location = no, status = no";
document.write('<a href = "http://www.baidu.com/" target="newW">');
var me = window.open(url, "newW", features);
setTimeout(function() {
    
    
    if (me.closed) {
    
    
        console.log("创建的窗口已经关闭");
    } else {
    
    
        me.close();
    }
}, 5000);

使用定时器

window对象包含4个定时器专用方法，如表：

方法	说明
setInterval()	按照指定的周期调用函数或计算表达式
setTimeout()	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由setInterval()方法生成的定时器
clearTimeout()	取消由setTimeout()方法生成的定时器

setTimeout()方法：

setTimeout()方法能够在指定的时间段后执行特定代码。用法如下：

var o = setTimeout(code, delay);

参数code表示延迟执行的字符串代码，将在Windows环境中执行，如果包含多个语句，应该用分号进行分隔。
delay表示延迟时间，以毫秒为单位。
该方法返回值是一个Timer ID，这个ID编码指向延迟执行的代码控制句柄。如果把这个句柄传递给clearTImer()方法，则会取消代码延迟执行。
【实例1】下面实例演示了当鼠标点击段落文本时，会延迟半秒钟弹出一个提示对话框，显示当前元素的名称。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test02</title>
    <script>
        window.onload = function() {
    
    
            var p = document.getElementsByTagName("p")[0];
            p.onclick = function(i) {
    
    
                setTimeout(function() {
    
    
                    console.log(p.tagName);
                }, 500);
            }
        }
    </script>
</head>

<body>
    <p>段落文本</p>
</body>

</html>

setTimeout()方法的第一个参数虽然是字符串，但是也可以是一个函数。一般建议把函数作为参数传递给setTimeout()方法，等待延迟调用。

【实例2】下面实例演示了如何为集合中每个元素都绑定一个事件延迟处理函数。

var o = ducument.getElementsByTagName("body")[0].childNodes;
for (var i = 0; i < o.length; i++) {
    
    
    o[i].onmouseover = function(i) {
    
    
        return function() {
    
    
            f(o[i]);
        }
    }(i);
}

function f(o) {
    
    
    var out = setTimeout(function() {
    
    
        console.log(o.tagName);
    }, 500);
}

这样当鼠标指针已过每个页面元素时，都会在延迟半秒后弹出一个提示对话框，提示元素名称。

【实例3】可以利用clearTimeout()方法在特定条件下清除延迟处理代码。

var o = document.getElementsByTagName("body")[0].childNodes;
for (var i = o; i < o.length; i++) {
    
    
    o[i].onmouseover = function(i) {
    
    
        return function() {
    
    
            f(o[i]);
        }
    }(i);
    o[i].onmouseout = function(i) {
    
    
        return function() {
    
    
            clearTimeout(o[i].out);
        }
    }(i);
}

function f(o) {
    
    
    o.out = setTimeout(function() {
    
    
        console.log(o.tagName);
    }, 500);
}

如果希望反复执行setTimeout()方法中包含的代码，可以在setTimeout()方法中包含对自身的调用，这样就可以把自身注册为可反复执行的方法。

【实例4】下面实例会在页面内的文本框中安秒针速度显示递增的数字，当循环执行10次后，会调用clearTimeout()方法清除对代码的执行，并弹出提示信息。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test02</title>
    <script>
        window.onload = function() {
    
    
            var t = document.getElementsByTagName("input")[0];
            var i = 1;

            function f() {
    
    
                var out = setTimeout(function() {
    
    
                    t.value = i++;
                    f();
                }, 1000);
                if (i > 10) {
    
    
                    clearTimeout(out);
                    console.log("10秒钟已经到了");
                }
            }
            f();
        }
    </script>
</head>

<body>
    <input type="text">
</body>

</html>

setInterval()方法：

setInterval()方法能够周期性执行指定的代码，如果不加以处理，那么该方法会被持续执行，知道浏览器窗口关闭或者跳转到其他页面为止。

var o = setInterval(code, interval);

该方法与setTimeout()方法基本相同，其中参数code表示要周期执行的代码字符串，参数interval表示周期执行的时间间隔，以毫秒为单位。

该方法返回值是一个Timer ID，这个ID编号指向当前周期函数的执行引用，利用该值对计时器进行访问，如果把这个值传递给clearTimeout()方法，则会取消周期性执行的代码。

如果setInterval()方法的第一个参数是函数，则setInterval()方法可以接受任意多个参数，这些参数将作为该函数的参数使用。

var o = setInterval(code, interval[,arg1,arg2,...argn]);

注意：setTimeout()方法用来延迟代码执行，而setInterval()方法主要用来周期性执行代码。它们都可以设计周期性动作，其中setTimeout()方法适合不定时执行某个动作，而setInterval()适合定时执行某个动作。

控制窗口大小和位置

window对象定义了3组方法分别用来调整窗口位置、大小和滚动条和偏移位置：moveTo()和moveBy()、resizeTo()和resizeBy()、scrollTo()和scrollBy()。

这些方法都包含两个参数，分别表示x轴偏移值和y轴偏移值。包含To字符串的方法都是绝对的，也就是x和y是绝对位置、大小或滚动偏移；包含By字符串的方法都是相对的也就是它们在窗口的当前位置、大小或滚动偏移上增加所指定的参数x和y的值。

方法moveTo()可以将窗口左上角移动到指定的坐标，方法moveBy()可以将窗口上移、下移或者左移、右移指定数量的像素。方法resizeTo()和resizeBy()可以按照绝对数量和相对数量调整窗口的大小。

【实例】下面实例能够将当前窗口的大小重新设置为200像素宽、200像素高，然后生成一个任意数字来随机定位窗口在屏幕中的显示位置。

window.onload = function() {
    
    
    timer = window.setInterval("jump()", 1000);
}

function jump() {
    
    
    window.resizeTo(200, 200);
    x = Math.ceil(Math.random * 1024);
    y = Math.ceil(Math.random * 760);
    window.moveTo(x, y);
}

提示：window对象还定义了focus()和blur()方法，用来控制窗口的显示焦点。调用focus()放方法会请求系统将键盘的焦点赋予窗口，调用blur()方法则会放弃键盘焦点。

navigator对象

navigator对象存储了与浏览器相关的基本信息，如名称、版本和系统等。通过window.navigator可以引用该对象，并利用它的属性来读取客户端基本信息。

浏览器检测方法

检测浏览器类型的方法有多种，常用的方法包括两种：特征检测法和字符串检测法。这两种方法都存在各自的优点和缺点，用户可以根据需要进行选择。

特征检测法

特征检测法就是根据浏览器是否支持特定功能来决定相应操作的方法。这是一种非精确判断法，但是确实最安全的检测方法。因为准确检测浏览器的类型和型号是一件很困难的事情，而且很容易存在误差。如果不关心浏览器的身份，仅仅在意浏览器的执行能力，那么使用特征检测法就完全可以满足需求。

【实例1】下面代码检测当前浏览器是否支持documents.getElementByName特性，如果支持就使用该方法获取文档中的a元素，否则，再检测是否支持document.getElementsByTagName特性，如果支持，就用该方法获取文档中的a元素。

if(document.getElementByName) {
    
    
	var a = document.getElementByName("a");
} else if(document.getElementsByTagName) {
    
    
	var a = document.getElementsByTagName("a");
}

当使用一个对象、方法或属性时，先判断它是否存在。如果存在，则说明浏览器支持该对象、方法或属性，那么就可以放心使用。

字符串检测法

客户端浏览器每次发送HTTP请求时，都会附带有一个user-agent（用户代理）字符串，对于Web开发人员来说，可以使用用户代理字符串检测浏览器类型。

【实例2】BOM在navigator对象中定义了userAgent属性，利用该属性可以获取客户端user-agent字符串信息。

var s = window.navigator.userAgent;
// 简写方法：
// var s = navigator.userAgent;
console.log(s); //Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36

user-agent字符串包含了Web浏览器的大量信息，如浏览器的名称和版本。

注意：对于不同浏览器来说，该字符串所包含的信息可能不同。随着浏览器版本的不断升级，返回的user-agent字符串格式和信息也会不断变化。

检测浏览器类型和版本号

检测浏览器的类型和版本就比较容易了，用户只需要根据不同浏览器类型匹配特殊信息即可。

【实例】通过解析navigator对象的userAgent属性，可以获得浏览器的完整版本号。针对IE浏览器来说，它在“MSIE”字符串后面带一个空格，然后跟随版本及分号。因此，可以设计一下的属性获取IE的版本号。

function getIEVer() {
    
    
	var ua = navigator.userAgent;
	var b = ua.indexOf();
	if(b < 0) {
    
    
		return 0;
	}
	return parseFloat(ua.substring(b + 5, ua.indexOf(";", b)));
}

直接调用该函数即可获取当前IE浏览器的版本号。

console.log(getIEVer());

IE浏览器版本众多，一般可以使用大于某个数字的形式进行范围匹配，因为浏览器是向后兼容的，检测是否等于某个版本显然不能适应新版本的需要。

注意：如果浏览器的某些对象或属性不能向后兼容，这种检测方法也容易产生问题。所以更妥协的方法是采用特征检测法，而不是使用字符串检测法。

检测操作系统

navigator.userAgent返回值一般都会包含操作系统的基本信息。不过这些信息比较散乱，没有同意的规则。用户可以检测一些更为通过的信息，如检测是否为windows系统，或者为Macintosh系统，而不去分辨操作系统的版本号。

例如，如果仅检测通用信息，那么所有windows版本的操作系统都会包含“Win”字符串，所有Macintosh版本的操作系统都包含有“Mac”字符串，所有Unix版本的操作系统都包含有有“X11”，而Linux操作系统会同时包含“X11”和“Linux”。

【实例】通过下面方法可以快速检测客户端信息中是否包含上述字符串。

['Win', 'Mac', 'X11', 'Linux'].forEach(function(t) {
    
    
    (t === 'X11') ? t = 'Unix': t;
    navigator['is' + t] = function() {
    
    
        return navigator.userAgent.indexOf(t) != -1;
    };
});
console.log(navigator.isWin()); //false
console.log(navigator.isMac()); //true
console.log(navigator.isLinux()); //false
console.log(navigator.isUnix()); //false

Location对象

location对象存储了与当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。使用window对象的location属性可以访问。

location对象定义了8个属性，其中7个属性可以获取当前URL的各部分信息，另一个属性（href）包含了完整的URL信息。为了方便更直观地理解，表中各个属性将下面URL实例信息为参考进行说明。

http://www.mysite.cn:80/news/index.app?id=123&name= location#top

location对象属性：

属性	说明
href	声明了当前显示文档的完整的URL，与其他location属性只声明部分URL不同，把该属性设置为新的URL会是浏览器读取并显示新URL的内容
protocol	声明了URL的写一部分，包括后缀的冒号。例如：“http:”
host	声明了当前URL中的主机名和端口部分。例如：“www.mysite.cn:80”
hostname	声明了当前URL中的主机名。例如：“www.mysite.cn”
port	声明了当前URL的端口部分。例如：“80”
pathname	声明了当前URL的路径部分。例如：“news/index.asp”
search	声明了当前URL的查询部分，包括前导问号。例如：“?id=123&name=location”
hash	声明了当前URL中锚部分，包括前导符（#）。例如：“#top”，指定在文档中锚记的名称。

使用location对象，结合字符串方法可以抽取URL中查询字符串的参数值。

【实例】下面实例定义了一个获取URL查询字符串的参数值，该函数能够抽取每个参数和参数值，并以名/值对形式存储在对象中返回。

var queryString = function() {
    
    
    var q = location.search.substring(1);
    var a = q.split("&");
    var o = {
    
    };
    for (var i = 0; i < a.length; i++) {
    
    
        var n = a[i].indexOf("=");
        if (n == -1) {
    
    
            continue;
        }
        var v1 = a[i].substring(0, n);
        var v2 = a[i].substring(n + 1);
        o[v1] = unescape(v2);
    }
    return o;
}
var f1 = queryString();
for (var i in f1) {
    
    
    console.log(i + "=" + f1[i]);
}

如果当前页面的URL中没有查询字符串信息，用户可以在浏览器的地址栏中补加完整的查询字符串，如“?id=123name=aniu”，再次刷新页面，即可显示查询的字符串信息。

location对象还定义了两个方法：reload()和replace()。
- reload()：可以重新装载当前文档。
- replace()：可以装载一个新文档而无需为它创建一个新的历史记录。
对于那些使用了框架而且显示多个临时页的网站来说，replace()方法比较有用。这样临时页面都不会存储在历史列表中。
注意：window.location与document.location不同，前者引用location对象，后者只是一个读字符串，与document.URL同意。但是，当存在服务器重定向时，document.location包含的是已经装载的URL，而location.herf它包含的则是原始请求文档的URL。

history对象

history对象存储了客户端浏览器的浏览历史，通过window对象的history属性可以访问该对象。实际上，history对象仅存储最近访问的、有限条目的URL信息。

注意：在HTML5之前，为了保护客户端浏览器信息的安全和隐私，history对象禁止js脚本直接操作这些访问信息。不过HTML5新增了一个History API，该API允许用户通过js管理浏览器的历史记录，实现无刷新更改浏览器地址栏的链接地址，配合History + Ajix可以设计不同刷新页面的跳转。

操作历史记录

在历史记录中后退：

window.history.back();

在历史记录中前进：

window.history.forward();

移动到指定的历史记录点：使用go()方法从当前会话的历史记录中加载页面。当前页面索引值为0，上一页就是-1，下一页就是1，以此类推。

window.history.go(-1);
window.history.go(1);

length属性：使用length属性可以了解历史记录栈中一共有多少页。

var num = window.history.length;

添加和修改历史记录条目：HTML5新增了history.puhState()和history.replaceState()方法，允许用户逐条添加和修改历史记录条目。

使用history.pushState()方法可以改变referrer的值，而在调用该方法后创建的XMLHttpRequest对象会在HTTP请求头中使用这个值。referrer的值则是创建XMLHttpRequest对象时所处的窗口的URL。

【实例】假设http://mysite.com/foo.html页面ajing执行下面js代码。

var stateObj = {
    
    foo: "bar"};
history.pushState(stateObj, "page2" ,"bar.html");

这时浏览器的地址栏将显示http://mysite/bar.html，但不会加载bar.html页面，也不会检查bar.html是否存在。

如果现在导航到http://musite.com/页面，然后单击“后退”按钮，此时地址会显示http://musite.com/bar.html，并且会触发popstate事件，该事件中的状态对象会包含stateObj的一个拷贝。

如果再次点击“后退”按钮，URL将返回http://musite.com/foo.html，文档将触发另一个popstate事件，这次的状态对象为null，回退同样不会改变文档内容。

pushState()方法：

pushState()方法包括3个参数：

第一个参数：状态对象。状态对象是一个js对象直接量，与调用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

第二个参数：标题。可以传入一个简短的标题，标明将要进入的状态。

第三个参数：可选参数，新的历史记录条目的地址。浏览器不会再调用pushState()方法后加载改地址，如果不指定则为文档当前URL。

提示：调用pushState方法类似于window.location=’#foo’，它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势。
新的URL可以是任意的同源URL。相反，使用window.location方法时，只有仅修改hash才能保证停留在相同的document中。
根据个人需要决定是否修改URL。相反，设置window.location=‘#foo’，只有在当前hash值不是foo时才创安一条新历史记录。
可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法，只能把相关数据转码成一个很短的字符串。
注意：pushState()方法永远不会触发hashchange事件。
replaceState()方法：

history.replaceState()与history.pushState()用法相同，都包含3个相同的参数。不同之处是：pushState()是在history栈中添加一个新的项目，replaceState()是替换当前的记录值。

popstate事件：

每当激活历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState()创建，或者是被replaceState()方法替换的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

注意：当浏览会话历史记录时，不管是单击浏览器工具栏中的“前进”或者“后退”按钮，还是使用js的history.go()和history.back()方法，popstate事件都会被触发。

读取历史状态：

在页面加载时，可能会包含一个非空的状态对象。这种情况是会发生的，例如，如果页面中使用pushState()或replaceState()方法设置了一个状态对象，然后重启浏览器。当页面重新加载时，页面会触发onload事件，但不会触发popstate事件。但是如果读取history.state事件，会得到一个与popstate事件触发时一样的状态对象。

可以直接读取当前历史记录条目的状态，而不需要等待popstate事件。

var currentState = history.state;

screen对象

screen对象存储了客户端屏幕信息，这些信息可以用来探测客户端硬件配置。利用screen对象可以优化程序的设计，提示用户体验。例如，根据显示器屏幕大小选择使用图像的大小，或者根据显示器的颜色深度选择使用16色图像或8色图像，或者打开新窗口时设置居中显示等。

【实例】下面实例演示了如何让弹出的窗口居中显示。

function center(url) {
    
    
    var w = screen.availWidth / 2; //获取客户端屏幕的一半
    var h = screen.availHeight / 2; //获取客户端屏幕的高度一半
    var t = (screen.availHeight - h) / 2; //计算居中显示的顶部坐标
    var l = (screen.availWidth - w) / 2; //计算居中显示时左侧坐标
    var p = "top=" + t + ",left=" + l + ",width=" + w + "height=" + h; //设计坐标参数数字字符串
    var win = window.open(url, "url", p); //打开指定的窗口，并传递参数
    win.focus();
}
center("https://www.baidu.com");

注意：不同浏览器在解析screen对象的width和height属性时存在差异。

动态生成文档内容

使用document对象的write()和writeln()方法可以动态生成文档内容，包括以下两种方式。

在浏览器解析时动态输出信息。
在调用事件处理函数时使用write()或writeln()方法生成文档内容。

writeln()方法和write()方法完全相同，只不过在输出参数之后附加一个换行符。由于HTML忽略换行符，所以很少使用，不过在非HTML文档输出时使用会比较方便。

【实例】

function f(){
    
    
	document.write('<p>调用事件处理函数时动态生成的内容</p>');
}
document.write('<p οnclick=f()>文档解析时动态生成的内容</p>');

在页面初始化后，文档中显示文本为文档解析时动态生成的内容，而一旦单击该文本后，则write()方法动态输出文本为调用事件处理函数时动态生成的内容，并覆盖原来文档中显示的内容。

注意：只能在当前文档正在解析时，使用write()方法输出HTML代码，即在<script>标签中调用write()方法，不可以在事件处理函数中包含write()或writeln()方法。

js——BOM操作知多少？