Preview

07 - Browser Object Model Document Object Model

 1. The ______________ is a way to manipulate the structure and style of an HTML page. It represents the internals of the page as the browser sees it, and allows the developer to alter it with JavaScript

  Document Object Model

  Browser Object Model

  Window Object Model

  Modal Form

 2. If you’d like to have a look at the DOM for a page, open up the _____________________ in your browser and look for the “elements” pane. 
 It’s a great insight into how the browser thinks, and in most browsers you can remove and modify elements directly.

  script tags

  browser cache

  html source code

  developer tools

 3. HTML is an XML-like structure in that the elements form a structure of parents’ nodes with children, like the branches of a tree. Fill in the blanks 
There is one root element (html) with branches like head and body, 
each with their own branches. For this reason, 
the DOM is also called the ___________

  html source code

  Binary tree

  DOM tree

  Script tree

 4. Modifying the DOM, by picking an element and changing something about it, is something done often in JavaScript

  FALSE

  TRUE

 5. o access the DOM from JavaScript, the ______________ is used. It’s provided by the browser and allows code on the page to interact with the content

  browser object

  tree model

  modifyable html script

  document object

 6. With the HTML DOM, JavaScript can access and change all the elements of an HTML document

  TRUE

  FALSE

 7. document.getElementById is a method for getting hold of an element - by its ID. What part of the page can be manipulated in this example? 
var pageHeader = document.getElementById('page-header');

  the variable 'var'

  The ById element

  The pageHeader element

  The getElement element

 8. When a web page is loaded, the browser creates a Document Object Model of the page.

  TRUE

  FALSE

 9. The HTML DOM is a standard for how to get, change, add, or delete HTML elements

  TRUE

  FALSE

 10. The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents

  FALSE

  TRUE

 11. Fill in the blanks for the following 
In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set 
(like changing the content of an HTML element).

A method is an __________________ (like add or deleting an HTML element).

   action you can do

  operation you use to add two numbers

  instance of a variable

  answer to a question

 12. In this example, getElementById is a method, while ____________ is a property. 
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

  document

  getElement

  "Hello World"

  innerHTML

 13. The BOM (Browser Object Model) consists of the objects navigator, history, screen, location and document which are 'children' of window

  TRUE

  FALSE

 14. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using javascript.

  FALSE

  TRUE

 15. The DOM maps out an entire page as a document composed of a hierarchy of nodes like a tree structure and using the DOMAPI nodes can be removed, added, and replaced

  FALSE

  TRUE

 16. Fill in the blanks for the following 
The document object represents your web page.

If you want to access any element in an HTML page, 
you always start with accessing the _____________________

Below are some examples of how you can use the document object to access and manipulate HTML.

Finding HTML Elements
======================
Method	Description
document.getElementById(id)	        Find an element by element id
document.getElementsByTagName(name)	Find elements by tag name
document.getElementsByClassName(name)	Find elements by class name

  script tags

  modal form

  document object

  browser cache

 17. The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

  TRUE

  FALSE

 18. Browsers feature a Browser Object Model (BOM) that allows access and manipulation of the browser window.

  TRUE

  FALSE

 19. Using the BOM, developers can move the window, change text in the status bar, and perform other actions that do not directly relate to the page content

  FALSE

  TRUE

 20. Because no standards exist for the BOM, each browser has its own implementation

  TRUE

  FALSE

 21. When a browser requests a web page from a server, _____ belonging to the page is added to the request. This way the server gets the necessary data to "remember" information about users

  cache

  cookies

  viruses

  macros

 22. The following is referring to the document's inner HTML 
Two properties can be used to determine the size of the browser window.

Both properties return the sizes in pixels:

window.innerHeight - the inner height of the browser window (in pixels)
window.innerWidth - the inner width of the browser window (in pixels)

  FALSE

  TRUE

 23. The following are all examples of: 
window.open() - open a new window
window.close() - close the current window
window.moveTo() -move the current window
window.resizeTo() -resize the current window

  window.screen

  window methods

  modal methods

  browser methods

 24. Fill in the blanks for the following 
The _______________ object can be written without the window prefix.

Properties:

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

  modal.form

  window.screen

  window methods

  browser methods

 25. The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page. 
The window.location object can be written without the window prefix.

Some examples:

window.location.href returns the href (URL) of the current page
window.location.hostname returns the domain name of the web host
window.location.pathname returns the path and filename of the current page
window.location.protocol returns the web protocol used (http: or https:)
window.location.assign loads a new document

  FALSE

  TRUE


Report an error