Chapter 1. Manipulate the DOM

Question 1

section tag

Answer 1

defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Question 2

nav tag

Answer 2

defines a set of navigation links.

Question 3

aside

Answer 3

tag defines some content aside from the content it is placed in.

Question 4

progress - format

Answer 4

progress value=”22” max=”100”

Question 5

nav tag

Answer 5

defines a set of navigation links.

Question 6

mark

Answer 6

tag if you want to highlight parts of your text.

Question 7

figure

Answer 7

tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

Question 8

figcaption

Answer 8

tag defines a caption for a figure element.It can be placed as the first or last child of the figure element.

Question 9

hgroup

Answer 9

represents a multi-level heading for a section of a document. It groups a set of h tags

Question 10

main

Answer 10

represents the dominant content of the body of a document.

Question 11

getElementsByClassName

Answer 11

Get all elements that have the class

Question 12

querySelector

Answer 12

gets the first child element that matches the provided CSS selector criteria

Question 13

querySelectorAll

Answer 13

Gets all the child elements that match the provided CSS selector criteria

Question 14

getElementsByTagName

Answer 14

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.

Question 15

appendChild

Answer 15

add a new HTML element to the calling container. The node is added to the end of the list of children

Question 16

video- format

Answer 16

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>

Question 17

audio element

Answer 17

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

Question 18

visibility of canvas

Answer 18

just like the div, it has no default visibility

Question 19

canvas - coordinates

Answer 19

Top left corner (x,y) is (0,0)

Question 20

SVG Performance issues

Answer 20

If there is too many objects in an SVG rendering performance can be slow, so in that case use canvas

Question 21

Draw lines on canvas - format

Answer 21

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();

Question 22

difference between display: none and visibility:hidden

Answer 22

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