document对象的方法也非常多,但是也是很多没用的,表14-2中只列出比较常用的方法(其他没列出的暂时不用管)。

document对象常用的方法
方法 说明
document.getElementById() 通过id获取元素
document.getElementsByTagName() 通过标签名获取元素
document.getElementsByClassName() 通过class获取元素
document.getElementsByName() 通过name获取元素
document.querySelector() 通过选择器获取元素,只获取第1个
document.querySelectorAll() 通过选择器获取元素,获取所有
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.write() 输出内容
document.writeln() 输出内容并换行

上表中,大多数方法在前面的章节已经介绍过了,这里我们顺便复习一下,可以用手遮住右边,看着左边,然后回忆一下它的用途是什么。

下面我们来重点介绍一下document.write()和document.writeln()。在JavaScript中,如果想要往页面输出内容,可以使用document对象的write()和writeln()这两个方法。

一、document.write()

在JavaScript中,我们可以使用document.write()输出内容。这个方法我们已经接触得够多了,这里不再赘述。

语法:

document.write("内容");

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> document.write('<div style="color:hotpink;">绿叶学习网</div>'); </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

document.write()不仅可以输出文本,还可以输出标签。此外,document.write()都是往body标签内输出内容的。对于上面这个例子,我们打开浏览器控制台(按F12键)可以看出来,如图所示。

二、document.writeln()

writeln()方法跟write()方法相似,唯一区别是:writeln()方法会在输出内容后面多加上一个换行符\n。

一般情况下,这两种方法在输出效果上是没有区别的,仅当在查看源码才看得出来区别,除非把内容输出到pre标签内。

语法:

document.writeln("内容")

说明:

writeln是“write line”的缩写,大家不要把“l”写成字母“i”的大写。很多初学者容易犯这个低级错误。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> document.writeln("绿叶学习网") document.writeln("HTML") document.writeln("CSS") document.writeln("JavaScript") </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

我们把writeln()换成write(),浏览器预览效果如图所示。

从上面可以看出,writeln()方法输出的内容之间有一点空隙,而write()方法没有。

document.writeln("绿叶学习网"); document.writeln("HTML"); document.writeln("CSS"); document.writeln("JavaScript");

上述代码其实等价于以下代码:

document.write("绿叶学习网\n") document.write("HTML\n") document.write("CSS\n") document.write("JavaScript\n")

但是当我们把writeln()方法输出的内容放进<pre></pre>标签内,那效果就不一样了。

举例:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> document.writeln("<pre>绿叶学习网") document.writeln("HTML") document.writeln("CSS") document.writeln("JavaScript</pre>"); </script> </head> <body> </body> </html>

浏览器预览效果如图所示。

分析:

writeln()方法在实际开发中用得还是特别少的,我们简单了解一下就可以。