Difference between revisions of "Traversing the DOM"
Jump to navigation
Jump to search
(Created page with "==Selecting Elements with the query selector== document.querySelector('h1'); document.querySelector('.classname'); // will return the 1st item with that class name document...") |
|||
| (12 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'); | ||
== Creating and Inserting Elements== | |||
This will append the text after the first li | |||
<pre> | |||
var p = document.createElement('P'); | |||
p.textContent = "A new Paragraph"; | |||
p.style.fontSize = '17px'; | |||
var li= document.querySelector('li'); | |||
li.appendChild(p); | |||
</pre> | |||
This will append the text after the second li | |||
<pre> | |||
var p = document.createElement('P'); | |||
p.textContent = "A new Paragraph"; | |||
p.style.fontSize = '17px'; | |||
var li= document.querySelectorAll('li')[1]; | |||
li.appendChild(p); | |||
</pre> | |||
HTML | |||
<pre> | |||
<body> | |||
<h1>Outwter</h1> | |||
<ul> | |||
<li><a href="#">Link 1</a></li> | |||
<li><a href="#">Link 2</a></li> | |||
</ul> | |||
</body> | |||
</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";