Scribd
Upload
4 views

JavaScript Notes 4

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

JavaScript Notes 4

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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>

You might also like