Document Object Model (Javascript)
Document Object Model, provides a way of manipulating
HTML and XML documents. (We call this "way of manipulating" things an Application Programming Interface, or API — but more on those later.)
The DOM provides a structural representation of the document in tree form, enabling you
to modify its content and visual presentation by using a scripting language such as JavaScript.
Block elements can be nested in a block element True False
true
Inline elements can be nested inside of another inline element True False
true
Common Listing events
other common events are change, 'keydown', 'keyup', 'load', 'mouseover', 'mouseout'
remove child element
removeChild() ul.removeChild(ul.querySelector('li:nth-child(2)'));
Which of the following tags contains the main content of a table? body tablebody thead tbody tfoot
tbody
common window commands
window.document; //returns the entire HTML document window.innerWidth; // returns the inner width of the browser window. window.innerHeight; // returns the inner height of the browser window.
insertAdjacentHTML
insert html attributes in the dom
Class Selectors
$('.pics'); Just like in CSS, we use a . to denote a class. This code is selecting any HTML elements with the class pics,
Last Selector Let's say you want to select the last div on the page. You could use the last selector to do that
$('div:last');
Let's say we want to select the first img tag inside each div. We could do that with the first child selector. You set up this selector:
$('parent-tag child-tag:first-child'); $('div img:first-child');
Descendant Selector Let's say we want to select all list items inside the ul tag. The li tags are descendants of the ul tag. We can use a descendant selector like this:
$('ul li');
where do you like the jQuery library from
(right above the </body> close tag)
Bubbling
(starting at the target node and moving up the DOM tree to the root) by default, events nowadays all bubble.
capturing
(starting from the target node's parent elements and propagating down the tree until it reaches the target)
Which of the following is an inline element: <p> <strong> <section>
<strong>
CSS selectors
A tag name (e.g. p or div) A class (e.g. .red) An ID (e.g. #something-specific)
ID Selectors
An ID selector works in much the same way as a class selector; you just replace the . with a #: $('#baby-ninja');
DOM
Document Object Model
Block elements can be nested inside of an inline element True False
False
stopPropagation
Like preventDefault, stopPropagation is a function that, when called, interrupts the event's normal behavior. In this case, it stops the event from triggering other nodes in the DOM that might be listening for the same event.
Document
The document object represents any web page loaded in the browser. The document contains all the nodes that represent the HTML elements of the page. We use the document object to traverse through the HTML and manipulate elements. There are many document properties that allow us to obtain information about the document programmatically.
addEventListener second argument
The second argument is a function that accepts the event as its argument. The event has a number of useful properties on it — keypress, keydown, and keyup events, for example, will have a which property that tells us which key was pressed. In the code snippet example below we add an event listener to the input element. const input = document.querySelector('input'); input.addEventListener('keydown', function(e) { console.log(e.which); });
All visible content in an HTML document is written inside of the <body> tag. True False
True
Inline elements can be nested inside of a block element True False
True
The display value of most DOM elements is either inline or block. T or F
True
EventListener
addEventListener() takes two arguments: the name of the event, and a function to handle the event. ex. const main = document.getElementById('main'); main.addEventListener('click', function(event) { alert('I was clicked!'); });
append element to an existing DOM node
appendChild() document.body.appendChild(element); body is what we are appending the element to
Document Ready
built-in way to determine when a page is loaded. $(document).ready(function() { // code to be executed goes here }); The $ is a shortcut for jQuery, and provides an interface to the library. Every time you see $, think jQuery.
Preventing the Default Behavior for DOM Nodes Example
const input = document.querySelector('input'); input.addEventListener('keydown', function(e) { if (e.which === 71) { console.log('default prevented'); return e.preventDefault(); } else { console.log('Not a "g"'); } });
CDN
content delivery network
create element in DOM
document.createElement() document.createElement(tagName), where tagName is the string representation of any valid HTML tag (e.g., 'p', 'div', 'span', etc.).
remove entire element from dom
element.remove() ul.remove();
JavaScript and DOM
we can (1) view a current representation of our Document Object Model. With JavaScript we can also (2) select specific portions of the DOM, and manipulate them, which changes what shows up in a browser window.
Which of the following selectors is the most specific: header #header .header.header-dark
#header
Alt Tag Selector Let's say we want to select an image that has a specific alt text. The second image on our page (The Beatles) has the alt text "the beatles making faces". We can use that text to find the image:
$("img[alt='the beatles making faces']");
Window
-The highest level of the DOM tree is the window object. Think of the window as the browser window. The window contains the entire DOM document. All components of your HTML file will be accessible from within the window. -The window object has a large number of properties that return information about the object. Below are a few examples
Document commands
document.all; // returns all the nodes inside the document object document.contentType; // returns the type of content contained. Most web pages should return "text/html" document.URL; // returns the URL of the document object
Selecting Elements We can select HTML elements in the document with JavaScript and jQuery:
document.getElementsByTagName("p"); //returns all p tags on a page // alternatively, we could do document.querySelectorAll('p'); --- it returns a NodeList (which, remember, is not an Array) of all matching elements. $("p"); document.getElementById() - IDs must be unique document.getElementsByClassName() -does not need to be unique document.getElementsByTagName()
to update the style of an element in the dom
element.style.textAlign = 'center';
set the element
ex. element.innerHTML = 'Hello, DOM!';
<span> elements have display: block by default True False
false
An element can have multiple ID's, separated by a space True False
false
An element can only have one class at a time True False
false