script.js

alert("helloo")
//window object is by default created by browser,it is a global object with lots of methods
//dom is an subobject of window which has complete html in it
console.log("hello")
window.console.log("heiiu")
console.log(document)//shows html code
console.dir(window.document)//shows method and properties  of document
//dom is. atree like structure window-documen-html-head-body where these are nodes and dom is created when web page is loaded
console.log(document.body);
console.dir(document.body)
console.log(document.body.childNodes[0])
console.dir(document.body.childNodes[0])
//helps to dynamically change the properties of web page
document.body.childNodes[1].innerText = "abcd"//put it on console and it will dynamicaly chnage it until refreshed
//script tag is written after body tag as it will not be able to access its dom if written in head tag

let heading = document.getElementById("heading")
console.log(heading)
console.dir(heading)
heading.innerText = "new heading"
heading.innerHTML ="<i>new heading</i>"
let para = document.getElementsByClassName("paragraph")//return collection array
console.log(para)
console.dir(para)

let p = document.getElementsByTagName("p")
console.log(p)
console.dir(p)

let query = document.querySelector(".hellooo")//return first element having this id/class/tag
console.log(query)
let q = document.querySelectorAll(".hellooo")//return all element
let s =  document.querySelector("#paragraph")
console.log(query.tagName)//returns tag
//parent child sibling
console.log(document.querySelector("div").children)//provide all the children of div
let d = document.querySelector("ul");
console.log(d.innerText)
console.log(d.innerHTML)
//d.innerText="uhkuh"

let px = document.querySelector("h5");
console.log(px.textContent)//shows the hidden content;

let x = document.querySelector("#object");
console.log(x.getAttribute("id"))//tel u the name of attribute;
x.setAttribute("class","new_class")//changes the attribute name;

console.log(x.style)
x.style.backgroundColor = "yellow";
x.style.fontSize = "20px";
//x.innerText = "namsaste"

newbtn = document.createElement("button")

x.innerText = "plz click";
console.log(newbtn)

let y = document.querySelector(".create");
   y.append(newbtn)//inside
   y.prepend(newbtn)
   y.before(newbtn)//outside
   y.after(newbtn)

   y.remove();