JavaScript-Learning/tut14.js at master · ramaisgod/JavaScript-Learning · GitHub

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
/*
Element selector
1. Single element selector
2. Multi element selector
*/
let element = document.getElementById("a1");
console.log(element);
// element = element.className;
// console.log(element);

// element = element.childNodes;
// console.log(element);
// element = element.parentNode;
// console.log(element);
// element.style.color = 'red';
// element.innerText = 'ramaisgod';
// element.innerHTML = '<b>ramaisgod</b>';
// console.log(element.innerHTML);

// single element selector
let sel = document.querySelector('#a1');  // select using id
// console.log(sel);

let sel1 = document.querySelector('.book');  // get 1st element of the class. select using class name
// console.log(sel1);

sel = document.querySelector('h1')
// console.log(sel);

sel = document.querySelector('div')
// console.log(sel);
sel.style.color='green';

// single element selector
let myElement = document.getElementsByClassName('container');
console.log(myElement);
let el2 = myElement[0].getElementsByClassName('fruit');
console.log(el2);


let divEle = document.getElementsByClassName('container');

// Array.from(divEle).forEach(element => {
// console.log(element);
// element.style.color='blue';
// })

for (let index = 0; index < divEle.length; index++) {
    const element = divEle[index];
    console.log(element);
    element.style.color='cyan';
}