web development -2

sri999

t12.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Working with Document Nodes and Style Sheets

Tutorial 12

Carey

Objectives

Explore nodes and the node tree

Create element and text nodes

Append nodes to a web document

Work with the properties and methods of element nodes

Create attribute nodes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Add attribute nodes to page elements

Create external and embedded style sheets with JavaScript

Add style sheets to a web document

Create a style rule for an embedded style sheet

Enable and disable style sheets

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Nodes and Document Structure

Node: Any object within an HTML file

Node tree: Hierarchical structure of nodes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Nodes and Document Structure (continued 1)

Nodes in the node tree have a familial relationship

Each node can be a parent, child, and/or sibling of other nodes

Node relationship is indicated using the following expression:

node.relationship

where node is a currently selected node and relationship is the relationship of another node to the current node

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Nodes and Document Structure (continued 2)

Root node is the base node from which all other nodes originate

Root node is an elementary node in the hierarchy of a node tree

Each node can contain one or more child nodes to transfer the required information

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Nodes and Document Structure (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Nodes and Document Structure (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Restructuring the Node Tree

Working with nodes is better than writing HTML code through the innerHTML property

Node tree can be rearranged to form a new structure

Restructuring a node tree helps in ordering an HTML content with more accuracy

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Restructuring the Node Tree (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Restructuring the Node Tree (continued 2)

makeOutline() function is used to generate the code for the document outline

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating and Appending Nodes

JavaScript’s document object model supports several methods to create nodes of different types

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating and Appending Nodes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating and Appending Nodes (continued 2)

Nodes that are created are added to the computer memory as a document fragment

Document fragment is not a part of the document’s node tree until it is appended to a node within the tree

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating and Appending Nodes (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Node Types, Names, and Values

Text for each entry in the outline list should match the text of a heading in the source article

To maintain uniformity throughout a document, outlining app does the following:

Loops through the child nodes of the source article

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Node Types, Names, and Values (continued)

Tests whether each child node represents an h1 through h6 element node

Extracts the element’s text if it is a heading and creates a list item containing that same text string

Appends the list item as a new child of the outline’s ordered list

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Looping through the Child Nodes Collection

Use a counter variable starting with a value of 0 and increase by 1 for each node, up to the length of the childNodes collection

for (var i = 0;

i <node.childNodes.length; i++)

{

Commands

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Looping through the Child Nodes Collection (continued 1)

Object reference for child nodes in the for loop is

node.childNodes[i]

where node is the parent node of the child nodes collection, and i is the value of the counter variable in the for loop

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Looping through the Child Nodes Collection (continued 2)

Use familial references, starting with the first child of the parent node and traverse each subsequent sibling until no siblings remain

for (var n = node.firstChild; n !== null; n = n.nextSibling) {

commands

}

Object reference for child nodes in the for loop is n variable defined within the for loop expression

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Looping through the Child Nodes Collection (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Node Properties

The node has the following properties:

node.nodeType: It indicates the type of node

node.nodeName: It indicates the node name

node.nodeValue: It indicates the node value for a node in the document

To check whether a node refers to an element, attribute, text string, comment, document, or any other type of node, use

node.nodeType

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Node Properties (continued 1)

To retrieve the name of a node within a document, use

node.nodeName

To retrieve a node’s value, use

node.nodeValue

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Node Properties (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Node Properties (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Node Properties (continued 4)

Text node can be referenced within an element in order to access the text contained within the element

Example:

<h1 id=”title”>History Online</h1>

Text of the above h1 heading is obtained by

document.getElementById(“title”). firstChild.nodeValue;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Node Properties (continued 5)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Node Properties (continued 6)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Nested List

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Nested List (continued 1)

In a nested list, lower-level headings are nested within upper-level headings

All h1 heading are placed at the top most level of the table of contents, all h2 headings are placed at the next lower level, and so forth

indexOf()function is used to determine the level of each list item

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Nested List (continued 2)

To test the three possibilities for the comparison of the index numbers, use:

if (headLevel === prevLevel) {

// Append the list item to the current list

} else if (headLevel > prevLevel) {

// Start a new nested list

} else {

// Append the entry to a higher list

}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Nested List (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Nested List (continued 4)

In JavaScript, following commands are used to append a nested list:

var nestedList = document.createElement(“ol”);

NestedList.appendChild(listElem);

outlineList.lastChild.appendChild(ne stedList);

outlineList = nestedList;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Nested List (continued 5)

Use the following command to calculate the difference between the index number of the previous heading and the current heading:

var levelUp = prevLevel - headLevel;

Use the parentNode property twice for each difference in level to move up the node tree, as shown below:

for (var i = 1; i <= levelUp; i++) {

outlineList = outlineList.parentNode.parentNode;}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Nested List (continued 6)

for (var i = 1; i <= levelUp; i++)

{

outlineList = outlineList.parentNode.parentNode;

}

Use the following command to append a list item to a higher-order list:

outlineList.appendChild(listElem);

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Attribute Nodes

Attribute node contains an attribute that can be attached to an element node

Attribute nodes are not part of the node tree because they are not the child or parent of any node

Attribute nodes cannot be placed in a node hierarchy

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Attribute Nodes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Attribute Nodes (continued 2)

Document object model supports several methods to create, attach, and set the values of attributes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Heading IDs

Creating hypertext links involves two steps,

Adding an ID attribute to each heading (if it doesn’t already have one) to mark its location within the web page.

Changing the content of each list item to a hypertext link pointing to the corresponding heading

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Heading IDs (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Heading IDs (continued 2)

Counter variable headNum is created to maintain the uniqueness of each ID

headNum is set with initial value = 0, and it increases by 1 for each heading found in the source document

Use the following code to create the headNum variable:

var headNum = 0;

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Heading IDs (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Looping through the Attributes Collection

To examine each HTML attribute associated with an element, use the following code:

node.attributes

Named node map is an unordered list of nodes that can be referenced by their names

Named node map refers to the names of attributes in an attributes collection

Index numbers are also used to refer to the attributes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Hypertext Links

Each list item can be changed to a hypertext link pointing to the corresponding heading using the href attribute

Value of the href attribute for each list item is #id where id is the ID value assigned to the corresponding heading

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Hypertext Links (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Hypertext Links (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Style Sheets

Inline styles are created by modifying the style property of various page elements

In inline styles, the style property is applied to specific elements in a document

JavaScript can be used to create and modify style sheets that can be applied to en entire document

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheets Collection

Both external and embedded style sheets are part of the following object collection:

document.styleSheets

Arrangement of style sheets within a collection follows their order of declaration within a document head

First style sheet declared in a document is referenced as document.styleSheets[0];

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheets Collection (continued 1)

Subsequent style sheets would be referenced as document.styleSheets[1], document.styleSheets[2],and so forth

Total number of style sheets in a document is given by the document.styleSheets.length property

Last style sheet in a collection can be referred using the following property:

document.styleSheets[document.styleS heets.length-1]

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheet Object

Each style sheet in a styleSheets collection is a styleSheet object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheet Object (continued 1)

To reference a specific style sheet, use the following code:

document.styleSheets[index]

where index is the index number of the style sheet, starting with 0 for the first style sheet

Style sheet switcher is an application used to choose among different style sheets to display a web document

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheet Object (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheet Object (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheet Object (continued 4)

Form buttons are used to switch between the two views of a page

HTML code for the form buttons is as follows:

</div>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The styleSheet Object (continued 5)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Style Sheet Rules

Style rules within the sheet are part of a following object collection:

stylesheet.cssRules

where stylesheet is a reference to a sheet within the document.styleSheets object collection

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Style Sheet Rules (continued 1)

Example: If the first style sheet contains the following rules:

h1 {color: red;}

h2 {color: blue;}

</style>

then the following object reference document.styleSheets[0].cssRules[1]

points to the second style rule

h2 {color: blue;}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Style Rule Objects

Each individual rule within a cssRules collection is treated as an object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding and Removing Style Rules

To add a new rule at the end of a style sheet, use sheet.cssRules.length as the index value

Once a rule has been removed, all subsequent rules move up in the cssRules collection and their index values change subsequently

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding and Removing Style Rules (continued 1)

Use the following code to insert a new style rule into a style sheet:

sheet.insertRule(rule, index)

where sheet is the style sheet, rule is the text of the style rule, and index is the index value of the new rule

Use the following code to remove a rule from a style sheet:

sheet.deleteRule(index)

where index is the index value of the rule

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding and Removing Style Rules (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript can be used to append an embedded style sheet to the end of a document head

Adding and Removing Style Rules (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding and Removing Style Rules (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Calculated Styles

Final appearance of any page element is a calculated style based on all the styles found within the following:

External style sheets

Embedded sheets

Inline styles

Styles built into the browser

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Calculated Styles (continued 1)

Following getComputedStyle() method can be used to retrieve the calculated styles:

document.getComputedStyle(object, pseudo)

where object is a page object, and pseudo is a text string containing a pseudo-element that is applied to the page object

If no pseudo-element is used, set the pseudo value to null

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Calculated Styles (continued 2)

To retrieve the calculated styles for the first paragraph of the current document, use:

var p1 = document.getElementsByTagName(“p”)[0 ];

var p1Styles = document.getComputedStyle(p1, null);

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Calculated Styles (continued 3)

To retrieve the calculated value of a specific style, use:

styleDeclaration.getPropertyValue (styleText)

styleDeclaration.style

where styleDeclaration is a CSSStyleDeclaration object, styleText is a text string, and style is the JavaScript name of a style property

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Calculated Styles (continued 4)

Calculated styles are read-only values and cannot be changed using JavaScript

Values are expressed in absolute units

Calculated property that measures a size is expressed only in pixels

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition