Repository navigation
Expand file tree
/
Copy pathscript.js
More file actions
95 lines (65 loc) · 4.62 KB
/
Copy pathscript.js
File metadata and controls
95 lines (65 loc) · 4.62 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// 1. Change the title of the page to `Hello AltCampus!`
document.title = "Hello AltCampus";
// 2. Select the element using the children property:
// - Select the `h1` element and change the value to `Learning DOM`
document.body.children[0].innerText = "learning DOM";
// - Select the first `li` element inside the `ul` with class `topics` and change the innerText to `all about document`
let firstLiInUl = document.body.children[5].children[0];
firstLiInUl.innerText = "all about document";
// - Select the input element with name `email`
let NameEmail = document.body.children[6].children[2];
// 3. Log the number (using console.log) of children of all the `li` element inside the ul with class `topics`
let ul = document.querySelector("ul");
console.log(`The number of childeren in class topics is ${ul.children.length}`)
// 4. Select the first input using the `type` selector and store them in variable named `emailInput`
let emailInput = document.querySelector(`input`);
// 5. Select the ul element using class selector and store in `topics`
let topics = document.querySelector(".topics");
// 6. Select the first label element and store in `label`
let lable = document.querySelector("label");
// 7. Select the input of type `checkbox` with the `id` selector and store in `inputCheckbox`
let inputCheckbox = document.getElementById(`remember`);
// 8. Select the input of type password using Attribute selectors. (eg: input[type="text"]) and store in `password`
let password = document.querySelector(`input[type="password"]`);
// 9. Select the input using the placeholder attribute selector with value `password` and store in `attrPassword`
let attrPassword = document.querySelector(`input[placeholder="password"]`);
// 10. Select all the `li` element and store in `allTopics`
let allTopics = document.querySelectorAll("li");
// 11. Select all the input element of any type and store in `allInput`
let allInput = document.querySelectorAll("input");
// 12. Use forEach to console the `innerText` property of all the li element in `allTopics` variable.
allTopics.forEach(topic => console.log(topic.innerText));
// 13. Select all the elements with class `list` and store in variable `listOfSelectedTopics`
let listOfSelectedTopics = document.querySelectorAll(`.list`);
// 14. Select the first li element inside the `ul` element using `>` (direct child) and store in `firstLi`
let firstLi = document.querySelector(`ul>li`);
// 15. Select all the img element and log the number of element saying `The total number of img element is ---`
let allImg = document.querySelectorAll(`img`);
console.log(`Total number of img is ${allImg.length}`);
// 16. Select all the `p` element and store in `allPElement`
let allPElement = document.querySelectorAll(`p`);
// 17. Select all the buttons and log the count of buttons.
let allButtons = document.querySelectorAll(`button`);
console.log(allButtons.length);
// 18. Select all the `label` element and log the count.
let allLabel = document.querySelectorAll(`label`);
console.log(allLabel.length);
// 19. Select all the elements with `id` of `test`
let Tests = document.querySelectorAll(`#test`);
// 20. Select the first element with id `test` using `getElementById`
let firstTest = document.getElementById(`test`);
// 21. Select the parent element of the element stored in `topics` variable (#5) and log the element.
console.log(topics.parentElement);
// 22. Select the next element sibling of the element stored in `topics` variable (#5) and log the element.
console.log(topics.nextElementSibling);
// 23. Select the previous element sibling of the element stored in `topics` variable (#5) and change the `innerText` property to `Learning About Walking the DOM`.
topics.previousElementSibling.innerText = "Learning About Walking the DOM";
// 24. Select the first element child of the element stored in `topics` variable (#5) and change the `innerText` property of the element to `This is the first child element`.
topics.firstElementChild.innerText = "This is the first child element";
// 25. Select the last element child of the element stored in `topics` variable (#5) and log the `typeof` the element.
let lastChildElement = topics.lastElementChild;
console.log(typeof(lastChildElement));
// 26. Select the element with type `fieldset` and store in a variable named `fieldsetElm`.
let fieldsetElm = document.querySelector(`fieldset`);
// 27. Select the parent element of the element stored in `fieldsetElm` variable (#5) and log the `typeof` the element.
console.log(typeof(fieldsetElm.parentElement));