New pages: DOMTokenList and MediaList toString() method (#37052)

* New pages: DOMTokenList and MediaList toString() method * landing page links to the new pages * Update index.md * Update index.md * Update files/en-us/web/api/domtokenlist/tostring/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/domtokenlist/tostring/index.md Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/domtokenlist/tostring/index.md * Update files/en-us/web/api/medialist/index.md Co-authored-by: wbamberg <[email protected]> * Apply suggestions from code review Co-authored-by: wbamberg <[email protected]> * Update files/en-us/web/api/medialist/tostring/index.md Co-authored-by: wbamberg <[email protected]> * Apply suggestions from code review Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/medialist/tostring/index.md * Apply suggestions from code review Co-authored-by: wbamberg <[email protected]> --------- Co-authored-by: wbamberg <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
mdn · Dec 21, 2024 · 494edeb · 494edeb
1 parent 8a08007
commit 494edeb
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 0 deletions.
diff --git a/files/en-us/web/api/domtokenlist/index.md b/files/en-us/web/api/domtokenlist/index.md
@@ -40,6 +40,8 @@ A `DOMTokenList` is indexed beginning with `0` as with JavaScript {{jsxref("Arra
   - : Executes a provided callback function once for each `DOMTokenList` element.
 - {{domxref("DOMTokenList.keys()")}}
   - : Returns an {{jsxref("Iteration_protocols", "iterator", "", 1)}}, allowing you to go through all keys of the key/value pairs contained in this object.
+- {{domxref("DOMTokenList.toString()")}}
+  - : Returns the {{domxref("DOMTokenList.value")}}, the space-separated values of the list as a string.
 - {{domxref("DOMTokenList.values()")}}
   - : Returns an {{jsxref("Iteration_protocols", "iterator", "", 1)}}, allowing you to go through all values of the key/value pairs contained in this object.
 

diff --git a/files/en-us/web/api/domtokenlist/tostring/index.md b/files/en-us/web/api/domtokenlist/tostring/index.md
@@ -0,0 +1,51 @@
+---
+title: "DOMTokenList: toString() method"
+short-title: toString()
+slug: Web/API/DOMTokenList/toString
+page-type: web-api-instance-method
+browser-compat: api.DOMTokenList.toString
+---
+
+{{APIRef("DOM")}}
+
+The **`toString()`** {{Glossary("stringifier")}} method of the {{domxref("DOMTokenList")}} interface returns the values of the token list serialized as a string. The return value is a space-separated list of tokens equal to the {{domxref("DOMTokenList.value")}} property.
+
+## Syntax
+
+```js-nolint
+toString()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A string.
+
+## Examples
+
+```js
+const element = document.createElement("div");
+const classes = element.classList;
+
+element.className = "shop empty-cart";
+classes.add("logged-in", "dark-mode");
+
+console.log(classes.toString());
+// "shop empty-cart logged-in dark-mode"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Element.classList")}}
+- {{domxref("DOMTokenList.add()")}}
diff --git a/files/en-us/web/api/medialist/index.md b/files/en-us/web/api/medialist/index.md
@@ -26,6 +26,8 @@ The **`MediaList`** interface represents the media queries of a stylesheet, e.g.
   - : Removes a media query from the `MediaList`.
 - {{domxref("MediaList.item()")}}
   - : A getter that returns a string representing a media query as text, given the media query's index value inside the `MediaList`. This method can also be called using the bracket (`[]`) syntax.
+- {{domxref("MediaList.toString()")}}
+  - : Returns a string representation of this media list in the same format as the object's {{domxref("MediaList.mediaText")}} property.
 
 ## Examples
 

diff --git a/files/en-us/web/api/medialist/tostring/index.md b/files/en-us/web/api/medialist/tostring/index.md
@@ -0,0 +1,63 @@
+---
+title: "MediaList: toString() method"
+short-title: toString()
+slug: Web/API/MediaList/toString
+page-type: web-api-instance-method
+browser-compat: api.MediaList.toString
+---
+
+{{APIRef("CSSOM")}}
+
+The **`toString()`** {{Glossary("stringifier")}} method of the {{domxref("MediaList")}} interface returns a string representing the object's values. The value is a comma-separated list of media values in the same format as the {{domxref("MediaList.mediaText")}} property.
+
+## Syntax
+
+```js-nolint
+toString()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A string.
+
+## Examples
+
+```js
+const firstStyleSheet = document.styleSheets[0]; // the document's first stylesheet
+const mediaList = firstStyleSheet.media; // the mediaList of the stylesheet
+
+// set the `media` text to a media query value
+mediaList.mediaText = "SCREEN AND (140PX <= WIDTH <= 380PX)";
+
+// add a second media value
+mediaList.appendMedium(
+  "SCREEN AND (MAX-HEIGHT: 400PX) AND (ORIENTATION: LANDSCAPE))",
+);
+
+// erroneously, add the same media query again
+mediaList.appendMedium(
+  "SCREEN AND (MAX-HEIGHT: 400PX) AND (ORIENTATION: LANDSCAPE))",
+);
+
+console.log(mediaList.toString());
+// "screen and (140px <= width <= 380px), screen and (max-height: 400px) and (orientation: landscape)"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("MediaList.mediaText")}}
+- {{domxref("MediaList.appendMedium()")}}
+- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)