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
Some text nodes will have whitespace at the beginning or end?
Both
The DOM, essentially connects web pages to scripts or programming languages?
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
How can we get the current document location as a string?
document.url
How can we get the object location
document.location
How can we get the character set being used by the document?
document.characterSet
How can we get and set the title of a document?
document.title
How can we get a collection of th style sheets objects on the current document
document.styleSheets
How can we get all the < scripts > elements on the document
document.scripts
How can we get the head element of the current document?
document.head
How can we get the body of the current document?
document.body
How can we get a collection of all the hyperlinks in the current document
document.links
How do we get a collection of the images in the current document?
document.images
How do we get a collection of all the < form > elements in the current document
document.forms
How do we return an object reference by their ID class
document.getElementById()
How do we return a list/collection of elements with a given tag name?
document.getElementsByTagName()
How do we get a collection / list of elements with the given class name
document.getElementsByClassName()
How do we get the first element node in the document, that matches the specific selectors
document.querySelector()
How do we get a list / collection of all the element nodes within the document that match the specified selectors?
document.querySelectorAll()
