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/)。