Javascript Selectors
- HTML is the skeleton of a webpage; Javascript is the muscle! Javascript selectors allow us to create references to DOM Objects. Because DOM Objects are accessed you may modify the properties of these HTML elements directly.
Creating Selectors
var selector = document.getElementById("news");
- Getting by Ids (unique) and Classes (meant for re-use):
document.getElementById("my-id");
- returns an single item.
document.getElementsByClassName("navigation-item");
- returns array of items.
- use the
innerHTML
property toget
orset
values into a selector. For example:selector.innerHTML;
will return the innerHTML of a selector.- using
selector.innerHTML = "your text";
will replace the innerHTML.
Assignment
You can assign the results of functions to a variable!
var answer = prompt("Did you sleep at all?");
var selector = document.getElementById("main");
Types of Selectors
getElementById('string-id-name');
- Returns a single objectgetElementsByTagName('ul');
- returns an array of allul
tagsgetElementsByClassName('string-class-name');
- returns an array of all.string-class-name
querySelector('css-selector');
- returns a single object using CSS selector syntaxquerySelectorAll('.my-class');
- returns an array of objects that use the CSS selector syntax
Creating DOM Elements / Manipulating them
// basic selectors
// declare a selector named container
// access that container via document.getElementById('name-of'id)
var container = document.getElementById('container');
console.log(container);
var monsters = ['Wreck-it Ralph', 'The giraffe from Lion King SNES', 'Ganon'];
for (var baddie in monsters) {
// create a new dom element using document.createElement('name-of-tag');
var li = document.createElement('li');
console.log(li);
// access and assign a property to my dom element
li.innerHTML = monsters[baddie];
// append it to a container using selector.appendChild(domElement)
container.appendChild(li);
}
// now, we need to create an image!
var kittenImage = document.createElement('img');
// alt text (alt) - ADA compliancy text for the blind
kittenImage.alt = 'A cute random kitten';
kittenImage.id = 'kitten';
// src = image source
kittenImage.src = 'http://vignette3.wikia.nocookie.net/clubpenguinpookie/images/d/d0/Extremely-cute-kitten_large.jpg/revision/latest?cb=20140614000321';
// append my element as a child to a selector
container.appendChild(kittenImage);