JavaScript - The Document Object Model Flashcards
The Document Object Model (DOM) provides a way to ____ and _____ the contents of a web page.
The Document Object Model (DOM) provides a way to access and alter the contents of a web page.
The DOM allows us to ___/____ or ___ elements, attributes and structure.
The DOM allows us to add/modify or remove elements, attributes and structure.
The _________ is the document that is referred to in “Document Object Model”. JavaScript uses specific terms to refer to parts (page objects) of the document.
The webpage is the document that is referred to in “Document Object Model”. JavaScript uses specific terms to refer to parts (page objects) of the document.
The DOM represents a document with a ____ _____. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic _____ to the tree; with them you can change the document’s ______, ______, or ______. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.
The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them you can change the document’s structure, style, or content. Nodes can also have event handlers attached to them; once an event is triggered, the event handlers get executed.
Every document is made up of “_____”. There are different types of nodes, primarily, _____, ______ and _____.
Every document is made up of “nodes”. There are different types of nodes, primarily, element, attributes and text.
We can use these nodes to _____ specific parts of the document
We can use these nodes to target specific parts of the document
If you need to address the text of a paragraph, you need to target the _____ _____ of the paragraph NOT the _______ _______.
If you need to address the text of a paragraph, you need to target the text node of the paragraph NOT the paragraph itself.
Targeting elements nodes is used often. JavaScript can target elements easily via ______ and _____.
Targeting elements nodes is used often. JavaScript can target elements easily via classes and ids.
Example:
//returns a node
var node = document.getElementById("id");
//returns an element list of nodes
var nodeList = document.getElementsByTagName("tagName");
//returns an element list of nodes (HTML5 only)
var nodeList = document.getElementsByClassName("className");
With modern browsers, you are able to target elements using _____ _______.
With modern browsers, you are able to target elements using CSS selectors.
//returns the first node that matches the selector var node = document.querySelector(selectors);
//Returns a list of nodes that match the specified group of selectors var nodeList = document.querySelectorAll(selectors);
The query selector will only work for CSS selectors that the browser _______.
The query selector will only work for CSS selectors that the browser recognizes.
However, elements may be targeted relative to other elements;
//targets elements that are children of parentElement
var nodeList = parentElement.getElementsByTagName("tagName");Give an example of how to modify content:
//creates a new element node
var newElement = document.createElement("elementType")
//creates a new text node
var textNode = document.createTextNode("some text here");
//appends the node to the parent as its last child parentElement.appendChild(node);
//inserts a new element before the target element where both elements are children of parentElement parentElement.insertBefore(newElement, targetElement);
Creating all of your elements using JavaScript enables greater _______ of your application, including performance. Therefore, developers do not target elements as described above, they reference existing JavaScript variables. Effectively managing this technique leads into more advanced concepts. Modern frameworks apply this technique. More on that later.
Creating all of your elements using JavaScript enables greater control of your application, including performance. Therefore, developers do not target elements as described above, they reference existing JavaScript variables. Effectively managing this technique leads into more advanced concepts. Modern frameworks apply this technique. More on that later.
Give an example of how to modify attributes:
document.getElementById(‘linkId’).href = “http://www.google.com”;
myEl.getAttribute(“src”); myElemnt.setAttribute(“src”,”images/image2.jpg”); //created if doesnt exist.
Give an example of how to modify styles:
document.getElementById(“p2”).style.color=”blue”;
Give an example of how to remove elements:
var targetP = document.getElementById("p2");
targetP.parentNode.removeChild(targetP);
//or use the convenience function targetP.remove();
Classes can be _____ or ______ as necessary.
Classes can be added or removed as necessary.
Modifying the _____ or _____ attributes can affect the look and feel of the entire page.
Modifying the class or id attributes can affect the look and feel of the entire page.
List some properties:
nodeType nodeName nodeValue innerHTML childNodes id style firstChild nextElementSibling
List some methods:
appendChild(child); getAttribute( name ) getElementsByClassName(name) insertBefore( insertedNode, adjacentNode ) removeChild( removedNode ) setAttribute( name, value )
Some elements may have unique properties and methods. e.g. The video element has a ._______ property and ._____() and ._____() methods.
Some elements may have unique properties and methods. e.g. The video element has a .currentTime property and .play() and .pause() methods.
There a a few built-in arrays that allow us to access certain types of elements on the page:
- document.forms
- document.links
- document.images
- document.body
document.forms
document.forms is an array containing references to all the forms on the page.
document.links
document.links is an array containing references to all the links on the page.
document.images
document.images is an array containing references to all the images on the page.
document.body refers to the _____
document.body refers to the body
The DOM is a subset of the_______, the _______. Apart from the document, JavaScript can be used to script other parts of the browser including the _____, ________, _______, ______ and ________.
The DOM is a subset of the BOM, the Browser Object Model. Apart from the document, JavaScript can be used to script other parts of the browser including the screen, location, history, status and navigator.
When we refer to document.getElementById, it is actually window.document.getElementById. window is the _______ object.
When we refer to document.getElementById, it is actually window.document.getElementById. window is the global object.
The window object represents an _____ ____ ___ _____ _______.
The window object represents an open window in a browser.
If a document contain frames ( tags), the browser creates one _______ object for the HTML document, and one additional ______ object for each frame.
If a document contain frames ( tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
