Chapter 1. Manipulate the DOM Flashcards
section tag
defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
nav tag
defines a set of navigation links.
aside
tag defines some content aside from the content it is placed in.
progress - format
progress value=”22” max=”100”
nav tag
defines a set of navigation links.
mark
tag if you want to highlight parts of your text.
figure
tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
figcaption
tag defines a caption for a figure element.It can be placed as the first or last child of the figure element.
hgroup
represents a multi-level heading for a section of a document. It groups a set of h tags
main
represents the dominant content of the body of a document.
getElementsByClassName
Get all elements that have the class
querySelector
gets the first child element that matches the provided CSS selector criteria
querySelectorAll
Gets all the child elements that match the provided CSS selector criteria
getElementsByTagName
It doesn’t really provide anything useful other than a length, which lets you know how many items it contains, and the ability to access each individual item.
appendChild
add a new HTML element to the calling container. The node is added to the end of the list of children
video- format
video controls height=”400” width=”600” poster=”picture.jpg”>
source src=”movie.mp4” type=”video/mp4”
source src=”movie.ogg” type=”video/ogg”
<p>Video is not supported by this browser.</p>
audio element
It has all the same attributes and the same methods as video but it occupies no space. It shows only when you use controls option
visibility of canvas
just like the div, it has no default visibility
canvas - coordinates
Top left corner (x,y) is (0,0)
SVG Performance issues
If there is too many objects in an SVG rendering performance can be slow, so in that case use canvas
Draw lines on canvas - format
window.onload = function () {
var drawingSurface = document.getElementById("drawingSurface");
var ctxt = drawingSurface.getContext("2d");
}
ctxt. beginPath();
ctxt. moveTo(10, 10);
ctxt. lineTo(225, 350);
ctxt. lineTo(300, 10);
ctxt. lineTo(400, 350);
ctxt. stroke();
difference between display: none and visibility:hidden
display: none means the tag will not appear on the page at all - there will be no space allocated for it on the page
visibility: hidden - it is hidden but the space for it is allocated on the page
