Difference between getElementBy and querySelector /querySelectorAll
querySelector /querySelectorAll getElementBy
Newer Feature Quickest and most efficient
More Flexible as its parameter is CSS Not flexible
selector
querySelector is better supported than
getElementsByClassName
Gives static NodeList Gives live NodeList
Previous and Next Sibling
First and Last Child
How to GET/UPDATE Element Content
ACCESSING & CHANGING A TEXT NODE
ACCESS & UPDATE A TEXT NODE WITH NODEVALUE
ACCESS & UPDATE TEXT WITH TEXTCONTENT (& INNERTEXT)
Till 217
ist1.js
document.write('##########################################################
################################')
var hot_elements = document.querySelectorAll('li.hot')
for (i = 0; i < hot_elements.length; i++) {
document.write(hot_elements[i].textContent + '<br>');
hot_elements[i].className = 'cool';
}
var startItem = document.getElementById('two');
document.write('startItem with id two : ' + startItem.textContent +
'<br>');
var previousItem = startItem.previousElementSibling;
var nextItem = startItem.nextSibling;
document.write('previousItem with id two : ' + previousItem.textContent +
'<br>');
document.write('nextItem with id two : ' + nextItem.textContent + '<br>');
// Access a TextNode with NodeValue
var figs =
document.getElementById('one').firstChild.nextSibling.nodeValue;
console.log(figs)
//ACCESSING & CHANGING A TEXT NODE
var itemTwo = document.getElementById('two');
var elementText = itemTwo.firstChild.nodeValue;
console.log(itemTwo);
elementText = elementText.replace('pine nuts', 'karara kaju');
itemTwo.firstChild.nodeValue = elementText;
// ACCESS & UPDATE TEXT WITH TEXTCONTENT (& INNERTEXT)
console.log(document.getElementById('one').textContent);
console.log(document.getElementById('one').innerText);
Add below lines in DOM1.html
<script src="js/list.js "></script>
<script src="js/list1.js "></script>
