Skip to content

Commit f047be8

Browse files
committed
docs(guide/dom): update select element and operate element part
1 parent 62870cc commit f047be8

File tree

1 file changed

+36
-2
lines changed

1 file changed

+36
-2
lines changed

docs/guide/dom/index.md

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,51 @@ import type { FastjsDom, FastjsDomList } from "jsfast";
3333

3434
const idElement = dom.select<FastjsDom>("#id");
3535
const classElement = dom.select<FastjsDomList>(".class");
36-
const tagElement = dom.select<FastjsDomList>("tag");
36+
const spanElement = dom.select<FastjsDomList>("span");
37+
```
38+
39+
Or even better with defining the type of the element.
40+
41+
```typescript
42+
import type { FastjsDom, FastjsDomList } from "jsfast";
43+
44+
const idElement = dom.select<FastjsDom<HTMLDivElement>>("#id");
45+
const classElement = dom.select<FastjsDomList<HTMLAnchorElement>>(".class");
46+
const tagElement = dom.select<FastjsDomList<HTMLSpanElement>>("span");
3747
```
3848

3949
## Operate a element
4050

41-
After you select a element, you can operate it with some [methods](./api.md).
51+
Either you select a single element or a list of elements, you can operate them with some [methods](./api.md).
52+
53+
### Using FastjsDom
54+
55+
After you select a **FastjsDom** element, you can operate it with some [methods](./api.md).
4256

4357
```typescript
4458
dom.select("h1")!.html("Hello World");
4559
```
4660

61+
### Using FastjsDomList
62+
63+
:::tip
64+
If there are a same method in **FastjsDom** and **FastjsDomList**, fastjs will use the method of **FastjsDomList**.
65+
66+
For example, `each` method is in both **FastjsDom** and **FastjsDomList**, but when you use `each` method on **FastjsDomList**, `FastjsDomList.each` will be called.
67+
:::
68+
69+
There are some special methods for **FastjsDomList**. But you can also use the methods of **FastjsDom**.
70+
71+
When you are using the methods of **FastjsDom** on **FastjsDomList**, it will apply to all elements in the list one by one.
72+
73+
```typescript
74+
import { dom } from "jsfast";
75+
76+
dom(".class")!.html("Hello World");
77+
// equals to
78+
dom(".class")!.each((element: FastjsDom) => element.html("Hello World"));
79+
```
80+
4781
## Create a element
4882

4983
You can create a element with `dom.create()`.

0 commit comments

Comments
 (0)