reading-notes

OBJECT

Objects group together a set of variables and functions to create a model of a something you would recognize from the real world. In an object, variables and functions take on new names.

IN AN OBJECT: VARIABLES BECOME KNOWN AS PROPERTIES AND FUNCTIONS BECOME KNOWN AS METHODS

OBJECT and PROPERTIES

Document Object Model

The Document Object Model (DOM) specifies how browsers should create a model of an HTML page and how JavaScript can access and update the contents of a web page while it is in the browser window.

The DOM is neither part of HTML, nor part of JavaScript; it is a separate set of rules.

It is implemented by all major browser makers, and covers two primary areas:

MAKING A MODEL OF THE HTML PAGE
ACCESSING AND CHANGING THE HTML PAGE

The terms elements and element nodes are used interchangeably but when people say the DOM is working with an element, it is actually working with a node that represents that element.

ACCESSING ELEMENTS

DOM queries may return one element, or they may return a Nodelist, which is a collection of nodes

METHODS THAT RETURN A SINGLE ELEMENT NODE

1- getElementByld (‘id’)

2- querySelector( ‘css selector ‘)

3- querySelectorAll ( ‘css selector ‘)

4- getElementsByClassName( ‘class’)

5- getElementsByTagName(‘TagName’)

Exapmle: document.getElementByld (‘id’)

NODELISTS: DOM QUERIES THAT RETURN MORE THAN ONE ELEMENT

When a DOM method can return more than one element, it returns a Nodelist (even if it only finds one matching element).

SELECTING AN ELEMENT FROM A NODELIST

There are two ways to select an element from a Nodelist:

1- THE item()) METHOD

Nodelists have a method called item() which will return an individual node from the Node list.

2- Array syntax (the preferd)

TRAVERSING THE DOM

When you have an element node, you can select another element in relation to it using these five properties. This is known as traversing the DOM

1- parentNode

2- previousSibling - nextSibling

3- firstChild - lastChild

Traversing the DOM can be difficult because some browsers add a text node whenever they come across whitespace between elements.

HOW TO GET/UPDATE ELEMENT CONTENT

To work with the content of elements you can:

• Navigate to the text nodes. This works best when the element contains only text, no other elements.

• Work with the containing element. This allows you to access its text nodes and child elements. It works better when an element has text nodes and child elements that are siblings.

When you select a text node, you can retrieve or amend the content of it using the node Va 1 ue property.

Remove and add HTML contact

1- innerHTML : there are security risks associated with using innerHTML

2- maniplation : can be safer than using innerHTML but it requires more code and acn be slower

CROSS-SITE SCRIPTING (XSS) ATTACKS

If you add HTML to a page using i nnerHTML (or several jQuery methods), you need to be aware of Cross-Site Scripting Attacks or XSS; otherwise, an attacker could gain access to your users’ accounts.

DEFENDING AGAINST CROSS-SITE SCRIPTING

VALIDATE INPUT GOING TO THE SERVER

1- Only let visitors input the kind of characters they need to when supplying information. This is known as validation. Do not allow untrusted users to submit HTML markup or JavaScript.

2- Double-check validation on the server before displaying user content/storing it in a database. This is important because users could bypass validation in the browser by turning JavaScript off.

3- The database may safely contain markup and script from trusted sources (e.g., your content management system). This is because it does not try to process the code; it just stores it.

4- As your data leaves the database, all potentially dangerous characters should be escaped.

5- Make sure that you are only inserting content generated by users into certain parts of the template files

6- Do not create DOM fragments containing HTML from untrusted sources. It should only be added as text once it has been escaped.

REMOVING ATTRIBUTES

To remove an attribute from an element, first select the element, then call removeAtt r i bute () . It has one parameter: the name of the attribute to remove.