2. Recap
var element = document.getElementById('puzzle');
var elements = document.getElementsByTagName('div');
var elements = document.getElementsByClassName('submit'); // not IE < 9
var element = document.querySelector('#reload .submit'); // not IE < 8
var elements = document.querySelectorAll('#reload .submit'); // not IE < 8
element.getElementById('child');
element.getElementsByTagName('span');
element.getElementsByClassName('foo');
element.querySelector('#reload .submit'); // not IE < 8
element.querySelectorAll('#reload .submit'); // not IE < 8a
Friday, 11 October 13
3. Recap
var children = element.children;
var parent = element.parentNode;
Friday, 11 October 13
4. Recap
var parent = document.getElementById('foobar');
var element = document.createElement('div');
parent.appendChild(element);
parent.insertBefore(element, someOtherElement);
parent.removeChild(element);
element.parentNode.removeChild(element);
element.textContent = 'hello world';
Friday, 11 October 13
5. Recap
var ol = document.createElement('ol')
, el
;
document.getElementById('output').appendChild(ol);
for (var i = 1; i <= 100; ++i) {
el = document.createElement('li');
if (i % 3 === 0 && i % 5 === 0) {
el.textContent = 'FizzBuzz';
}
else if (i % 3 === 0) {
el.textContent = 'Fizz';
}
else if (i % 5 === 0) {
el.textContent = 'Buzz';
}
else {
el.textContent = i;
}
ol.appendChild(el);
}
Friday, 11 October 13
6. Recap
var el = document.getElementById('output');
el.style.backgroundImage = "url('bg.jpg')";
el.style.fontWeight = ‘bold’;
el.style.color = ‘red’;
window.getComputedStyle(el).backgroundImage; // not IE <
9
el.currentStyle.backgroundImage; // IE < 9
Friday, 11 October 13
7. Recap
var items = ol.children
;
for (var i = 0; i < items.length; ++i) {
el = items[i];
if (
el.textContent === 'FizzBuzz' ||
el.textContent === 'Fizz' ||
el.textContent === 'Buzz'
) {
el.style.fontWeight = 'bold';
}
if (i % 2 === 0) {
el.style.color = 'red';
}
}
Friday, 11 October 13
9. Nested Loops
var data = [[0, 1, 2, 3], [4, 5], [6, 7, 8, 9]]
;
for (var x = 0; x < data.length; ++x) {
for (var y = 0; y < data[x].length; ++y) {
console.log(data[x][y]);
}
}
Friday, 11 October 13
10. Element Property
var el = document.getElementById('output');
el.id;
el.className;
Friday, 11 October 13
20. Events
var el = document.getElementById('output');
el.addEventListener('click', callback, false); // not IE < 9
el.attachEvent('onclick', callback); // IE < 9
Friday, 11 October 13
21. Events
var el = document.getElementById('output');
function callback(e) {
alert('hello world');
e.preventDefault();
}
el.addEventListener('click', callback, false);
Friday, 11 October 13