window
object;
navigator
objectlocation
objectscreen
object andhistory
object<html> <head> <title>A simple document</title> </head> <body> <p> Some words. </p> <p> More words <em>and emphasised words</em> and final words. </p> </body> </html>
Note the different types of node: the document node, the element nodes, and the text nodes
element = document.querySelector('...');
null
if no element matches the CSS selector
elements = document.querySelectorAll('....');
<html lang="en"> <head> <title>Lorem ipsum</title> </head> <body> <section id="sectA"> <p class="opening">Lorem ipsum dolor sit amet consectetuer adipiscing.</p> <p class="closing">Lorem ipsum dolor sit amet consectetuer adipiscing.</p> </section> <section id="sectB"> <p class="opening">Lorem ipsum dolor sit amet consectetuer adipiscing.</p> <p>Lorem ipsum dolor sit amet consectetuer adipiscing.</p> <p class="closing">Lorem ipsum dolor sit amet consectetuer adipiscing.</p> </section> </body> </html>
section_element = document.querySelector('#sectB');
p_elements = document.querySelectorAll('p');
p_elements = document.querySelectorAll('#sectB p');
opening_elements = document.querySelectorAll('.opening');
opening_elements = document.querySelectorAll('#sectB .opening');
section_element = document.querySelector('#sectB');
section_element = document.querySelector('#sectB');
p_elements = document.querySelectorAll('p');
p_elements = document.querySelectorAll('p');
p_elements = document.querySelectorAll('#sectB p');
p_elements = document.querySelectorAll('#sectB p');
opening_elements = document.querySelectorAll('.opening');
opening_elements = document.querySelectorAll('.opening');
opening_elements = document.querySelectorAll('#sectB .opening');
opening_elements = document.querySelectorAll('#sectB .opening');
NB: It's still an 'array'.
p
element node:
new_p_element = document.createElement('p');
new_text_node = document.createTextNode('Lorem ipsum');
some_node.appendChild(new_node);
new_node
to the end of the some_node
's children
insertBefore
, replaceChild
, removeChild
some_text_node.nodeValue = 'Some new text';
appendData
, insertData
, deleteData
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example A</title> <script src="exampleA.js" type="module"> </script> </head> <body> <p> First paragraph. </p> <p> Second paragraph. </p> </body> </html>
document.addEventListener('DOMContentLoaded', init, false); function init() { let body_element = document.querySelector('body'); let new_p_element = document.createElement('p'); let new_text_node = document.createTextNode('Third paragraph'); new_p_element.appendChild(new_text_node); body_element.appendChild(new_p_element); }
new_text_node = document.createTextNode('Third paragraph'); new_p_element.appendChild(new_text_node);
innerHTML
:
new_p_element.innerHTML = 'Third paragraph';
innerHTML
is even more powerful than this example suggestssome_node.id = 'new_id';
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example B</title> <script src="exampleB.js" type="module"> </script> </head> <body> <section> <p> First paragraph. </p> <p> Second paragraph. </p> </section> </body> </html>
document.addEventListener('DOMContentLoaded', init, false); function init() { let section_element = document.querySelector('section'); section_element.id = 'my_section'; let p_elements = document.querySelectorAll('p'); i = 0; for (let p of p_elements) { p.id = 'p' + i; i = i + 1; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Make me smile</title> <script src="rollover.js" type="module"></script> </head> <body> <p> <img id="face" src="frown.jpg"> </p> </body> </html>
let img_element; document.addEventListener('DOMContentLoaded', init, false); function init() { (new Image()).src = 'smile.jpg'; img_element = document.querySelector('#face'); img_element.addEventListener('mouseover', make_it_smile, false); img_element.addEventListener('mouseout', make_it_frown, false); } function make_it_smile() { img_element.src = 'smile.jpg'; } function make_it_frown() { img_element.src = 'frown.jpg'; }
id
, src
and other attributesclass
attribute:
some_node.class = 'new_class';
some_node.className = 'new_class';
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example C</title> <script src="exampleC.js" type="module"> </script> </head> <body> <section> <p> First paragraph. </p> <p> Second paragraph. </p> </section> </body> </html>
document.addEventListener('DOMContentLoaded', init, false); function init() { let p_elements = document.querySelectorAll('p'); for (let p of p_elements) { p.className = 'paras'; } }