-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdompart1.js
95 lines (69 loc) · 2.85 KB
/
dompart1.js
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
// The 3 Muskeeters of Web dev
// Html - structure
// Css - Style
// Javascript - logic
// console.log("Hello Aditya");
// alert("Hello world"); //this will pause the execution & show the alert dialog
// window object :
// The window object represents an open window in a browser. it is browser's object (not javascript's) & is automatically created by browser.
// It is a global object with lots of properties & methods
// in console we can type : window
// or :
// console.log(window);
// or we can
// window.console.log("Hello world!"); // it is a global object..
// window.alert("hii");
// What is DOM ?
// DOM stands for = Document object Model
// When a web page is loaded , the browser creates a Document object Model(DOM) of the page
// when :
// window.document
// #document (file:///G:/My%20Drive/Complete%20Javascript/index.html)
// Or When :
// console.log(window.document)
// VM2664:1 #document (file:///G:/My%20Drive/Complete%20Javascript/index.html)<!DOCTYPE html><html lang="en"><head>…</head><body>…</body></html>
// undefined
// File tree :
// window => document (object) => is a model or representation of html Document object Model
// (DOM) => html => <head> </head> tag.. => (meta tag)
// => <body> </body> tag.. => </div> , </script>
// console.log(window.document);
// console.log(document.body); // to access body
// console.log(document.head); // to access head
// for access to nodes in html body :
// console.log(document.body.childNodes[1]);
// for changing the background color :
// document.body.style.background = "green";
// for accessing iner text in childnode[3] which is : <p>let's learn about DOM comcepts in detail</p>
// document.body.childNodes[1].innerText = "abcd";
// output will be : abcd
// DOM Manipulation :
// 1: Selecting with id
// let heading = document.getElementById("heading");
// console.dir(heading); // always use dir after console.
// Output will be : h1#heading
// let heading2 = document.getElementById("heading2");
// console.dir(heading2);
// Note when elements with id that you logged but didn't exists.
// 2: Selecting with class
// let h4 = document.getElementsByClassName("myclass");
// console.dir(h4);
// console.log(h4);
// In output html collection will be called arrays..
// let myclass = document.getElementsByClassName("myclass");
// console.dir(myclass);
// console.log(myclass);
// Since html collection also called as arrays.
// let button1 = document.getElementsByClassName("button");
// console.dir(button1);
// console.log(button1);
// Let's Access to button the button :
// 3: Selecting with tag
// document.getElementsByTagName("p");
// let parahs = document.getElementsByTagName("p");
// console.dir(parahs);
// console.log(parahs);
// 4: Query selector
// Structure :
// // document.querySelector("myId/myclass/tag")
// let elements = document.querySelector()