Chapter 5:Document Object Model vocab
Characters to escape in HTML
&,<,>,-,',",/
How to access and update the DOM tree
1. Locate the node that represents the element you want to work with 2.Use its text content,child elements, and attributes
How to get/update element content
1. Navigate to the text nodes 2.Working with the containing element
How to add elements using DOM manipulation
1.Create the element 2.Give it content 3.Add it to the DOM
How to remove elements using DOM manipulation
1.Store the element to be removed in a variable 2.Store the parent of that element in a variable 3.Remove the element from its containing element
How to add and remove content from a DOM tree
1.The innerHTML property (has security risks) 2.DOM manipulation (Slower,more code, but better at targeting individual nodes)
NodeList
A collection of nodes, when a method returns more than one node. Look an numbered like an array, but actually a type of object called a collection.
innerHTML
A lot of new markup for less code, but it should not be used to add content from a user for security, can be difficult to isolate single elements, and event holders may no longer work as intended.
Escaping user content
All data from untrusted sources should be escaped in the server before it is shown on the page. Most server-side languages offer helper functions that will strip out our escape malicious code
appendChild()
Attaches an element to a node as the next "generation"
Element and Element Nodes
Can be used in the same definition, but when the DOM is working with an element, it is actually working with a node
getElementByClassName('class')
Can select multiple elements by its class name and can return a node list
hasAttribute()
Checks if there's a node with that attribute name that exists
Web Server
Collects info from browser and passes it to database, and generates pages using data from database and inserts it into templates
createTextNode()
Creates a text node
createElement()
Creates an element
Untrusted Data
Data the owner does not have complete control over
Document Node
Every element, attribute, and piece if text in HTML is represented by a DOM node. At the top of the tree, a document node is added; it represents the entire page. When you access any element, attribute, or text node, you navigate to it via the document node.
How to be safe on websites
For javascript, do use textContent or innerText, not innerHTML without controlling all markup. For Jquery, do use .text(), not .html()
innerText()
Get/sets text. Should he avoided because Firefox does not support it, it will not show any content hidden by css, it is slower
innerHTML
Gets text and markup from an element
nodeValue
Gets text from node, must be on text node
getAttribute()
Gets value from that attribute with that name
textContent
Gets/sets text from an element and its children
className
Gets/sets the value of the class attribute
id
Gets/sets the value of the id attribute
Element node
HTML elements describe the structure of an HTML page i.e <hl>. To access the DOM tree, you start by looking for elements. Once you find the element you want, then you can access its text and attribute nodes, if you want to.
parentNode
Helps traverse through nodes by showing the node who "birthed" it
DOM tree
How the DOM specifies the way in which the browser should structure a DOM model
DOM manipulation
It is suited to changing one element from a large DOM tree and doesnt affect event handlers and easily allows a script to add elements incrementally, but it is slower than innerHTML and theres alot more code involved
Application Programming Interface (API)
Let programs (and scripts) talk to each other. Ex.DOM
DOM queries
Methods that find elements in the DOM tree. When you need to work with an element more than once, you should use a variable to the result of this query. Ex.getElementById('one')
Text nodes
Once you have accessed an element node, you can then reach the text within that element. This is stored in its own text node. Text nodes cannot have children. If an element contains text and another child element, the child element is not a child of the text node but rather a child of the containing element.
Browser
Requests pages from and sends data to web server, and processes HTML,css,and JS from web server
item()
Returns a specific node from the NodeList when you tell it the index number if the item you want. But it is more common to use array syntax to retrieve it.
getElementsByTagName('tag Name')
Returns elements with that tag name
firstChild
Returns the first recent node of that node in the next "generation"
previousSibling
Returns the next node to the left who's in the same "generation"
nextSibling
Returns the next node to the right in that "generation"
lastChild
Returns the oldest node of that node in the next "generation"
querySelector()
Selects an individual element node
getElementById()
Selects an individual element node by its ID
getElementsByClassName('class')
Selects multiple elements by its class name and returns a node list
querySelectorAll('css selector')
Selects multiple elements with that name and returns in a node list
Document Object Model
Specifies how browsers should create a model of an HTML page and how JS can acess and update the contents of a webpage while it is in the browser window: Neither part if HTML or JS. Stored in browser memories and has 4 main nodes
Database
Stores information creates by website admins and users, and returns content needed to create web pages.
Attribute nodes
The opening tags of HTML elements can carry attributes and these are represented by attribute nodes in the DOM tree. Attribute nodes are not children of the element that carries them: they are part of that element. Once you access an element, there are specific JS methods and properties to read or change that element's attributes.
setAttribute()
Updates value if that attribute with that name
document.write()
Quick and easy, but only works when page initially loads and if used after it can overwrite the whole page, not add content, create a new page. Can cause problems with XHTML pages that are strictly validated. Generally frowned on
removeChild()
Removes a element from the node in the next "generation"
removeAttribute()
Removes that attribute with that name
length
Tells you how many items are in the NodeList
Static NodeList
When your script updates the page, the NodeList is not updated to reflect the changes made by the script. (querySelector returns this)
Live Nodelist
When your script updates the page, the nodeList is updated at the same time. The methods beginning getElementsBy.. return this. Faster to generate than static NodeLists.
Cross-Site Scripting Attacks (XSS)
When an attacker can gain access to user's accounts (in innerHTML and several jQuery Methods)
Validation
When owners only let visitors input the characters they need when supplying information. (ex Not HTML markup or JS)
Traversing the DOM
When you have an element node, you can select another element in relation to it using 5 properties. Can be difficult because some browser add a text node whenever then come across whitespace between elements. Ex(Internet Explorer)