Difference between revisions of "Traversing the DOM"

From rbachwiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Getting all Elements with the same class ==
<pre>
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';
});
</pre>
''' ES6 Version'''
const boxesArr = Array.from(elements)
boxesArr.forEach(cur => cur.style.backgroundColor = 'blue');
==Selecting Elements with the query selector==
==Selecting Elements with the query selector==
  document.querySelector('h1');
  document.querySelector('h1');
  document.querySelector('.classname'); // will return the 1st item with that class name
  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'); // 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');
  document.querySelector('#idname');


Line 33: Line 49:
</body>
</body>
</pre>
</pre>
== 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";
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Java Script|Category]]==

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";

Back To Top- Home - Category