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()方法在实际开发中用得还是特别少的，我们简单了解一下就可以。