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)