Back To Module Home

Front-End Development with JavaScript

0% completed

Delving into the Document Object Model

Ubiquitous Language of Page Representation

Cornerstone of Interactions

The DOM Application Programming Interface

What the DOM Covers

Hands On: Querying the Document

How it Works: Querying the Document

Hands On: Changing the DOM

How it Works: Changing the DOM

Hands On: Completing Event Handling

Navigating in the Document Tree

Node Navigation Basics

Accessing Element Content

A Brief Navigation Reference

Element Specific Properties

Changing the Document Tree

Adding New Child Elements to the Document

Adding Adjacent Elements

Removing and Replacing Elements

Changing Attributes and Element Style

Using Event Parameters

Going Global: Global Attributes

Going Global: Global Events

Entering the Realm of JavaScript

A Couple of JavaScript Peculiarities A Brief History of JavaScript Objects and Dynamism Functions are First Class Citizens Regular Expression Literals Placing JavaScript in HTML JavaScript Syntax Basics Variables Types Argument Passing Understanding Scopes Working With the Boolean Type Working With the Number Type Converting to the Number Type Number Methods Working With the String Type Converting to Strings String Properties and Functions Working With the Date Type Working With the Object Type A Quick Overview of Function Prototypes Instance Properties and Methods Working With the Array Type Array Conversions Array Operations: Creating Stacks and Queues Array Methods to Manipulate Strings Array Methods to Change Element Ordering Advanced Array Operations Unary Operators Arithmetic Operators Equality Operators Relational and Boolean Operators Assignment Operators Conditional, Comma, typeof, and instanceof Operators Operator Precedence The if, while, and do-while Statements The for and for-in loops The switch and with Statements Summary

Advanced JavaScript Programming

The JavaScript Object Notation Serializing and Parsing JSON Functions Specifying Function Expressions Recursive Functions Closures Programming with Objects Object Properties Removing Object Properties Instantiating Objects Using Object Prototypes Object Inheritance Modularity The Browser Object Model Methods of the Windows Object The History Object The Location Object The Navigator Object The Screen Object Error Handling The onerror Event Managing Errors Summary

Introducing CSS in Style

Styles and Cascading Style Sheets Styling Page Elements CSS At-Rules The Concept of Cascading Selectors Attribute selectors Group Selectors and the Universal Selector Pseudo-Element and Pseudo-Class Selectors Descendent Selectors Child Selectors Sibling Selectors Other Selectors Style Properties Colors Length, Size Types and URL Values Baseline Style Sheet The Cascading Order Selector Group Priorities Calculating Selectivity Location Priorities Media-Dependent Style Sheets Adding Media Style Sheets Media Queries Summary

Basic Style Patterns

Text Formatting Font Type, Size, and Color Text Styles Paragraphs Styling Lists Using Web Fonts The Box Model Margins and Paddings Special Behavior of Margins Setting Up Borders Height and Width of the Box Boxing Inline Elements Using Floating Elements Using Background Images Positioning Background Images Aligning Background Images with Borders and Paddings Sizing Background Images The Background Shorthand Notation Styling Tables Basic Font and Colors Adjusting Text Setting Up Table-Specific Properties Styling Tips for Forms Summary

Conclusion

...

/

Accessing Element Content

Accessing Element Content

In this lesson, we'll learn three simple ways to access node content. Let's begin!

To implement useful functionality, it is not enough to navigate to a document tree node. You often need to query the content of a specific node, or a set of nodes.

Three simple ways to access node content

The DOM provides three simple ways to access node content.

Method 1

The first and most obvious way is to use the HTML element and attribute navigation methods to access child elements and ...