1
- # Getting Start with Dom
1
+ # Getting Started with Dom
2
2
3
- With Fastjs's dom module, you can operate dom elements with simple codes.
3
+ With Fastjs's dom module, you can operate on DOM elements with simple codes.
4
4
5
- Some API of Fastjs's dom module looks like jQuery, but not fully the same way.
5
+ Some APIs of Fastjs's dom module look like jQuery, but not fully the same way.
6
6
7
- Fastjs redesigned a lot of API to help you write in different ways, and we provide strongly type support without any extra packages.
7
+ Fastjs redesigned a lot of APIs to help you write in different ways, and we provide strongly typed support without any extra packages.
8
8
9
9
## Import Module
10
10
11
11
``` typescript
12
12
import { dom } from " jsfast" ;
13
13
```
14
14
15
- ## Select a element
15
+ ## Select an element
16
16
17
- :::tip Different with jQuery
17
+ :::tip Different from jQuery
18
18
Fastjs doesn't register a global variable ` $ ` to select elements, import ` dom ` and use ` dom.select() ` to select elements.
19
19
:::
20
20
21
- Select a element to operate is usually the things you need to do first , you can do this easliy with ` dom.select() `
21
+ Selecting an element to operate on is usually the first thing you need to do, you can do this easily with ` dom.select() `
22
22
23
23
``` typescript
24
24
dom .select (" #id" ); // FastjsDom | null
25
25
dom .select (" .class" ); // FastjsDomList | null
26
26
dom .select (" tag" ); // FastjsDomList | null
27
27
```
28
28
29
- With strongly type support with your typescript project, you can define the return type of ` dom.select() ` .
29
+ With strongly type support in your TypeScript project, you can define the return type of ` dom.select() ` .
30
30
31
31
``` typescript
32
32
import type { FastjsDom , FastjsDomList } from " jsfast" ;
@@ -48,11 +48,11 @@ const tagElement = dom.select<FastjsDomList<HTMLSpanElement>>("span");
48
48
49
49
## Operate a element
50
50
51
- Either you select a single element or a list of elements, you can operate them with some [ methods] ( ./api.md ) .
51
+ Either you select a single element or a list of elements, you can operate on them with some [ methods] ( ./api.md ) .
52
52
53
53
### Using FastjsDom
54
54
55
- After you select a ** FastjsDom** element, you can operate it with some [ methods] ( ./api.md ) .
55
+ After you select a ** FastjsDom** element, you can operate on it with some [ methods] ( ./api.md ) .
56
56
57
57
``` typescript
58
58
dom .select (" h1" )! .html (" Hello World" );
@@ -61,7 +61,7 @@ dom.select("h1")!.html("Hello World");
61
61
### Using FastjsDomList
62
62
63
63
::: tip
64
- If there are a same method in ** FastjsDom** and ** FastjsDomList** , fastjs will use the method of ** FastjsDomList** .
64
+ If there is a same method in ** FastjsDom** and ** FastjsDomList** , fastjs will use the method of ** FastjsDomList** .
65
65
66
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
67
:::
@@ -78,9 +78,9 @@ dom(".class")!.html("Hello World");
78
78
dom (" .class" )! .each ((element : FastjsDom ) => element .html (" Hello World" ));
79
79
```
80
80
81
- ## Create a element
81
+ ## Create an element
82
82
83
- You can create a element with ` dom.create() ` .
83
+ You can create an element with ` dom.create() ` .
84
84
85
85
``` typescript
86
86
dom .create (" div" );
@@ -127,7 +127,7 @@ dom.create("div", {
127
127
128
128
### Set Content
129
129
130
- You can set content to the element by setting the ` text ` or ` html ` or ` val ` key.
130
+ You can set content to the element by setting the ` text ` , ` html ` , or ` val ` key.
131
131
132
132
``` typescript
133
133
dom .create (" div" , {
@@ -152,4 +152,4 @@ dom.create("div", {
152
152
dom .create (" div" , {
153
153
class: [" class1" , " class2" ],
154
154
});
155
- ```
155
+ ```
0 commit comments