DOM/script.js at main · Abiachieve/DOM · 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
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
// const element=document.createElement("div")
// element.innerHtml="<span>this is dynamic span tag</span>"
// document.body.append(element);
// const element=document.createElement("header");
// const element1=document.createElement("section");
// const element2=document.createElement("article");
// const element3=document.createElement("span");
// const element4=document.createElement("p");
// element3.innerHtml="<span>this is dynamic span tag</span>"
// element4.innerHtml="<p>this is dynamic span tag</p>"
// element1.append(element3);
// element2.append(element4);
// element.append(element1,element2);

// document.body.append(element)


// const div=document.createElement("div");
// const header=document.createElement("header");
// const section=document.createElement("section");
// const span=document.createElement("span");
// const article=document.createElement("article");
// const p=document.createElement("p");
// span.innerHtml="<span>this is dynamic span tag</span>"
// p.innerText="this is paragraph"

// section.setAttribute("class","container");
// section.setAttribute("class","container1");
// section.appendChild(span);
// article.appendChild(p);
// header.append(section,article);

// const element= document.createElement("div")
// element.innerHTML="<span>This is my dynamic span</span>"
// document.body.append(element);


// const element= document.createElement("div")
// const element1= document.createElement("div")
// const element2= document.createElement("span")
// element1.setAttribute("class","container")
// element1.setAttribute("id","attri")
// element1.setAttribute("style","background-color:aqua")
// element2.setAttribute("style","background-color:blueviolet;color:white")
// element2.innerHTML="this is dynamic span"
// element1.append(element2);
// element.append(element1);
// document.body.append(element);

// const header= document.createElement("header")
// const section= document.createElement("section")
// section.setAttribute("class","container")
// section.setAttribute("style","background-color:aqua")
// const span= document.createElement("span")
// span.setAttribute("class","container")
// span.setAttribute("style","background-color:blueviolet")
// span.innerHTML="This is span"
// const article=document.createElement("article")
// article.setAttribute("class","container")
// article.setAttribute("style","background-color:red;color:white")
// article.innerHTML="<p>This is paragraph</p>"
// section.append(span);
// header.append(section,article);
// document.body.append(header);

// const att= document.createElement("div")
// att.setAttribute("class","container")
// att.setAttribute("id","attri")
// att.setAttribute("style","background-color:aqua")
// att.innerHTML="This is attribute"
// document.body.append(att);
// function changecolor(newcolor){
// document.getElementById("para").style.color= newcolor
// }


// //get element by id
// const res=document.getElementById("container");//returs html element
// console.log(res);
// //get element by class name
// const res1=document.getElementsByClassName("para"); //returns array-html collection
// console.log(res1);

// const res2=document.getElementsByTagName("div"); //returns array-html collection
// console.log(res2);
// //Query selector All
// const res3=document.querySelectorAll("div"); //returns node list array
// console.log(res3);
// //Query selector
// const res4=document.querySelector("div"); //returns html
// console.log(res4);