Querying and Manipulating the DOM

At the bottom of this page are several shapes. Save this html file and edit it on your computer to complete Parts 1 and 2.

You may want to reference the code from the ad block example.

The following are likely to be useful:

Part 1: Write code that correctly replaces the blanks in the following statements:

  1. There are __ shapes in total.
  2. __ shapes are squares.
  3. __ shapes are green.
  4. __ shapes contain the number 5.
  5. __ shapes are red triangles with the number 4.

Part 2: Write code to perform the following side effects

  1. Change all shapes with a 1 inside to be circles
  2. Change all triangles to be blue
  3. Change all green shapes to have number 1 inside
  4. Insert 10 green squares with the number 7 at the beginning
  5. Delete all triangles with the number 3
  6. Move all blue circles to the end

FYI:

5
2
6
7
0
5
6
2
5
6
5
1
1
6
1
3
9
1
2
0
9
5
9
5
8
5
3
6
3
1
8
7
7
5
2
2
6
7
5
7
6
4
9
8
6
4
8
1
4
6
1
2
4
8
5
5
6
7
9
1
9
1
9
5
4
8
2
4
8
2
5
8
1
5
5
1
4
0
0
5
9
7
7
9
0
8
3
6
6
8
9
1
3
0
9
9
2
5
3
1