1.3 - The DOM Flashcards
En qué nos ayuda el DOM
Nos permite interactuar con un document HTML
Técnicamente, que es el DOM
es una API por cada HTML, como también documentos XML, y SVG. Nos ofrece una representación en forma de objetos en un árbol
With the DOM, programmers can… ?
Build documents Navigate their structure Add, modify, delete elements and content.
Web Browsers, uses the DOM, for what?
Use the DOM specifications to determine how they will display the web pages
When we load a web page in the browser, what happens behind the scenes?
The browser is taking the HTML document sent from the server, and converting it into the DOM
Any language can interact with the DOM?
Yes, the DOM is language agnostic.
For what purpose we use JS with the DOM?
As a way to access and interact with elements on a Web Page
In the DOM, everything is made up of what things?
NODES
What are the “NODES”?
Objects that are then made into trees
What nodes have, as objects has?
properties and methods
How many node types exists, that are related to our purpose?
6
Name the 6 nodes types ir numeric order
1 - Element
3 - Text
8 - Comments
9 - Document
10 - DocumentType
11 - DocumentFragments
The node type Document What identification number it has, and what is his purpose?
number: 9 It is the HTML document itself
The node type DocumentType What identification number it has, and what is his purpose?
number: 10 Handles the Doctype. e.g. for HTML5 documents.
The node type Element What identification number it has, and what is his purpose?
number: 1 Element nodes, quite common, represent all of the HTML elements on a page.
The node type Text What identification number it has, and what is his purpose?
number: 3 text values(valores de texto) often found inside node elements or attributes.
Node types and Node elements are the same?
NO
The node type Comments What identification number it has, and what is his purpose?
number: 8 HTML comments
The node type DocumentFragments What identification number it has, and what is his purpose?
number: 11 Collection of nodes, often used for inserting a group of elements or text nodes together into a document.
Attributes elements are nodes in their own right?
NO, that was in the past, from DOM 4, attributes will no longer be nodes in the same way.
There is any way in the browser to see the DOM represented as a tree like fashion?
NO, but it´s quite common to picture it or imagine it like a “tree like” for learning purposes
There will be some text nodes that contain white spaces?
YES
What it does? only readable? document.url
Returns the document location as a string Retorna la locación del document como una cadena Read only
What it does? only readable? document.location
returns a Location object, which contains information about the URL of the document, and provides methods for changing that URL and loading another URL Read only
What it does?
only readable?
document.characterSet
Returns the character set being used by the document
Read only
what it does?
read only?
document.title
sets or gets the title of the current document
SET AND GET
What it does?
Read only?
document.styleSheets
returns a list of the style sheet objects on the current document
Read only
what it does?
only readable?
document.scripts
Returns all the < script > elements on the document
read only
what it does?
only readable?
document.head
returns the < head > element of the current document
read only
what it does?
read only?
document.body
returns the < body > element of the current document
only readable, we need to use other methods to change the body as
document.body.textContent
what it does?
read only?
document.links
returns a list of all the hyperlinks in the document
read only
what it does?
only readable?
document.images
returns a list of the images in the current document
read only
what it does?
read only?
document.forms
returns a list of the < form > elements within the current document
read only
what it does?
document.getElementById()
returns an object reference to the identified element
what it does?
document.getElementsByTagName()
Returns a list of elements with a given tag name
what it does?
document.getElementsByClassName()
Returns a list of elements with the given class name
what it does?
document.querySelector()
Returns the first element node within the document, in document order, that matches the specific selectors
what it does?
document.querySelectorAll()
returns a list of all the element nodes within the document that match the specified selectors
