New pages: DOMTokenList and MediaList toString() method

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.
 

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 equal to the {{domxref("DOMTokenList.value")}} property.
+
+## Syntax
+
+```js-nolint
+toString()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A string; a space-separated list of values.
+
+## 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()")}}

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
 

files/en-us/web/api/medialist/tostring/index.md

@@ -0,0 +1,64 @@
+---
+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, in the same format as the {{domxref("MediaList.mediaText")}} property.
+
+## Syntax
+
+```js-nolint
+toString()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A string; a space-separated list of media values.
+
+## 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()")}}
+- {{domxref("MediaList")}}
+- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries)
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)