DOM(Document object model):
-----------------------------
let d = innerHeight
d=innerWidth
d=scrollX
d=scrollY
d=location
d=history
d=history.go(-2)
console.log(d);
DOM in details:
---------------
let d = document
d = document.all
// looping through html tags
Array.from(d).forEach(function(element){
console.log(element);
})
// console.log(d);
Single Element Selector:
---------------------
let ele = document.getElementById('white')
ele=ele.innerHTML
// ele = ele.innerText
// ele=ele.innerText
// ele = ele.childNodes
// ele=ele.parentNode
console.log(ele);
Multi Element Selector:
------------------------
let c = document.getElementsByClassName('class')
Array.from(c).forEach(element => {
console.log(element)
element.style.color = 'pink'
});
console.log(c);
Query selector:
--------------------
let sel = document.querySelector('#green')
sel = document.querySelector('.class')
sel = document.querySelector("h1");
// sel.style.color='green'
console.log(sel);
Parent / Child Nodes:
-----------------------
Node types:
Element(1)
Attrtibute(2)
text Node(3)
comment(8)
document(9)
docType(10)
eg:
let cont = document.querySelector('.container');
cont = cont.childNodes[1];
nodeType = cont.nodeType
nodeName = cont.nodeName
// cont= cont.children;
console.log(cont);
console.log(nodeType);
console.log(nodeName);
eg2:
let c = document.querySelector('div.container')
console.log(c.children[4].children[1]);
console.log(c.lastChild);
console.log(c.lastElementChild);
console.log(c.firstElementChild.parentNode);
console.log(c.firstElementChild.nextElementSibling);
Creating and Append Element:
-----------------------------
let element= document.createElement('li');
let text= document.createTextNode('I am a tetx node');
element.appendChild(text);
// Add a class name
element.className='child1';
element.id='child-id1';
element.setAttribute('title','mytitle')
// element.innerText='Inseted by javva script'
// element.innerHTML = '<b>Inseted by javva scrip</b>';
console.log(element);
let ul = document.querySelector('ul.this')
ul.appendChild(element)
console.log(ul);
0 Comments