Difference between revisions of "Traversing the DOM"
Jump to navigation
Jump to search
(One intermediate revision by the same user not shown) | |||
Line 10: | Line 10: | ||
</pre> | </pre> | ||
''' ES6 Version''' | ''' ES6 Version''' | ||
const boxesArr = Array.from(elements) | |||
boxesArr.forEach(cur => cur.style.backgroundColor = 'blue'); | |||
Latest revision as of 00:33, 2 December 2016
Getting all Elements with the same class
var elements = document.querySelectorAll('.box'); // the queryelectorall Returns a Node List so we have to convert it to a regular array by using the slice.call var boxesArr = Array.prototype.slice.call(elements); boxesArr.forEach(function(curr){ cur.style.backgroundColor = 'green'; });
ES6 Version
const boxesArr = Array.from(elements) boxesArr.forEach(cur => cur.style.backgroundColor = 'blue');
Selecting Elements with the query selector
document.querySelector('h1'); document.querySelector('.classname'); // will return the 1st item with that class name document.querySelectorAll('.classname'); // will return a array with all items with that class name document.querySelectorAll(.classname').[0] // will select the first array item with that classname document.querySelector('#idname');
Creating and Inserting Elements
This will append the text after the first li
var p = document.createElement('P'); p.textContent = "A new Paragraph"; p.style.fontSize = '17px'; var li= document.querySelector('li'); li.appendChild(p);
This will append the text after the second li
var p = document.createElement('P'); p.textContent = "A new Paragraph"; p.style.fontSize = '17px'; var li= document.querySelectorAll('li')[1]; li.appendChild(p);
HTML
<body> <h1>Outwter</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </body>
Changing CSS
NOTE: CSS style names and DOM Styles are a little Different. eg. css background color is background-color while DOM is backgorundColor
var mystyle = document.querySelector('#myid'); mystyle.style.backgroundColor = "red";