原文： http://zetcode.com/javascript/documentall/

Document.all教程展示了如何使用all属性选择 JavaScript 中的所有 HTML 元素。

Document.all

Document 的all属性返回一个以文档节点为根的HTMLAllCollection-它返回页面的全部内容。 该属性是只读的。

在我们的示例中，我们将使用 Ramda 库遍历返回的HTMLAllCollection。 有关更多信息，请参见 Ramda 教程。

Document.all示例

下面的示例演示文档all属性的用法。

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>
  9. </head>
  11. <body>
  13.     <p>
  14.         This is simple web document.
  15.     </p>
  17.     <script>
  19.         let allTags = document.all;
  21.         let nOfTags = R.length(R.keys(allTags));
  22.         console.log(`There are ${nOfTags} tags in the document`);
  24.         console.log('List of tags:');
  26.         R.forEachObjIndexed((value, key) => {
  27.             console.log(`${key}: ${value.localName}`);
  28.         }, allTags);
  30.     </script>
  31. </body>
  33. </html>

在文档中，我们显示元素的数量及其列表。

  1. <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>

我们包括 Ramda 库。

  1. let allTags = document.all;

使用document.all获取所有标签。

  1. let nOfTags = R.length(R.keys(allTags));
  2. console.log(`There are ${nOfTags} tags in the document`);

我们计算标签的数量并将消息显示到控制台。

  1. R.forEachObjIndexed((value, key) => {
  2.     console.log(`${key}: ${value.localName}`);
  3. }, allTags);

使用 Ramda 的forEachObjIndexed()，我们遍历集合并输出所有标签名称。

在本教程中，我们使用了文档的all属性。

您可能也对以下相关教程感兴趣： JavaScript queryselector教程， Element.innerHtml教程， JavaScript Lodash 教程， JQuery 教程 ， Ramda 教程或使用 jQuery DatePicker。