Live selector
live selector track element in html document in active form if new element found in document then select that new element by active selector
list of live selector
1.document.getElementsByClassName()
2.document.getElementsByName()
3.document.getElementsByTagName()
<h1> live selector</h1>
<p class='first'>fisrt</p>
<p class='first'>second</p>
<p class='first'>third</p>
var element = document.getElementsByClassName('first');
for(let i=0;i<element.length;i++){
console.log(i);
}
setInterval(function(){
for(let i=0;i<element.length;i++){
console.log(i);
}
},1000);
var newElmnt = document.createElement('p');
newElmnt.className='first';
var textNode = document.createTextNode('welcome to dev community ');
newElmnt.appendChild(textNode);
document.body.append(newElmnt);
output
0
1
2
output after 1 second
0
1
2
3
Static selector
Only one static selector in javascript
1.document.querySelectorAll()
Static selector select element from document in first time code execute after code execute any new element insert in document then static selector does not select new element
var element = document.querySelectorAll('.first');
for(let i=0;i<element.length;i++){
console.log(i);
}
setInterval(function(){
for(let i=0;i<element.length;i++){
console.log(i);
}
},1000);
var newElmnt = document.createElement('p');
newElmnt.className='first';
var textNode = document.createTextNode('welcome to dev community ');
newElmnt.appendChild(textNode);
document.body.append(newElmnt);
output
0
1
2
output after 1 second are same
0
1
2
these are major difference between live and static selector
learn more about javascript tips please visit my website fast2learning
Top comments (0)