Document.all教程 · ZetCode 中文系列教程

# `Document.all`教程 > 原文： [http://zetcode.com/javascript/documentall/](http://zetcode.com/javascript/documentall/) `Document.all`教程展示了如何使用`all`属性选择 JavaScript 中的所有 HTML 元素。 ## `Document.all` Document 的`all`属性返回一个以文档节点为根的`HTMLAllCollection`-它返回页面的全部内容。该属性是只读的。在我们的示例中，我们将使用 Ramda 库遍历返回的`HTMLAllCollection`。有关更多信息，请参见 [Ramda 教程](/javascript/ramda/)。 ## `Document.all`示例下面的示例演示文档`all`属性的用法。 `index.html` ```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script> </head> <body> <p> This is simple web document. </p> <script> let allTags = document.all; let nOfTags = R.length(R.keys(allTags)); console.log(`There are ${nOfTags} tags in the document`); console.log('List of tags:'); R.forEachObjIndexed((value, key) => { console.log(`${key}: ${value.localName}`); }, allTags); </script> </body> </html> ``` 在文档中，我们显示元素的数量及其列表。 ```js <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script> ``` 我们包括 Ramda 库。 ```js let allTags = document.all; ``` 使用`document.all`获取所有标签。 ```js let nOfTags = R.length(R.keys(allTags)); console.log(`There are ${nOfTags} tags in the document`); ``` 我们计算标签的数量并将消息显示到控制台。 ```js R.forEachObjIndexed((value, key) => { console.log(`${key}: ${value.localName}`); }, allTags); ``` 使用 Ramda 的`forEachObjIndexed()`，我们遍历集合并输出所有标签名称。在本教程中，我们使用了文档的`all`属性。您可能也对以下相关教程感兴趣： [JavaScript `queryselector`教程](/javascript/queryselector/)， [`Element.innerHtml`教程](/dom/innerhtml/)， [JavaScript Lodash 教程](/javascript/lodash/)， [JQuery 教程](/web/jquery/) ， [Ramda 教程](/javascript/ramda/)或[使用 jQuery `DatePicker`](/articles/jquerydatepicker/)。