Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 13 commits into from
Dec 21, 2024
Merged
2 changes: 2 additions & 0 deletions files/en-us/web/api/domtokenlist/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
51 changes: 51 additions & 0 deletions files/en-us/web/api/domtokenlist/tostring/index.md
Original file line number Diff line number Diff line change
@@ -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()")}}
2 changes: 2 additions & 0 deletions files/en-us/web/api/medialist/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
63 changes: 63 additions & 0 deletions files/en-us/web/api/medialist/tostring/index.md
Original file line number Diff line number Diff line change
@@ -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)
Loading