In my last DOM tutorial, you learned how to access the elements inside your Web page as JavaScript objects. Once you’ve done that, how do you find out more about each element? This tutorial shows you how to delve deep into any DOM element object.
Web Development
Client and server-side programming. Covers JavaScript, PHP, Perl and ASP.
See also:Retrieving Page Elements via the DOM
In the last DOM article, you learned that the DOM represents the contents of a Web page as a “tree” of JavaScript objects. By accessing the parts of the tree, called the nodes, you can read existing page content, alter content, and even add new content from scratch.
In this article you’ll learn how to locate and retrieve the elements of a Web page using JavaScript and the DOM.
Introducing the JavaScript DOM
The Document Object Model lets you access and manipulate the contents of Web pages using JavaScript. By using the DOM, you can do wonderful things like:
- Create tabbed Web pages
- Create expandable/collapsible (“accordion”-style) Web page elements
- Generate Web page content dynamically (on the fly)
In this introductory article, you learn about the concept of the DOM, and how it’s used to access Web page elements from within JavaScript.
Styling Links with CSS
CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:
- normal links
- links that have already been visited
- links that are being clicked on, and
- links that are hovered over with the mouse.
You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.
Using Javascript’s Location Object to Work with URLs
JavaScript gives you many ways to access and change the current URL that is displayed in the visitor’s browser. All these techniques use the Location
object, which is itself a property of the Window
object. You can create a new Location
object that contains the current URL as follows:
var currentURL = window.location;
In this tutorial, you explore all the properties and methods of the Location
object. You learn:
- How to read all the different parts of a URL
- How to send the visitor to another page by changing the URL, and
- How to automatically reload or refresh the page.
[Read more…] about Using Javascript’s Location Object to Work with URLs
Using CSS Shorthand for Fast-loading Websites
Nothing is more certain to turn away visitors than a slow-loading website, so it’s worth doing everything you can to make your site load as quickly as possible. Common techniques include compressing images and removing unnecessary markup from your pages; however, one often-overlooked aspect is your site’s CSS. With a complex page layout, a CSS file can easily run into the tens of kilobytes, adding significantly to a website’s initial load time.
Fortunately there are a number of CSS shorthand tricks you can use to dramatically reduce the size of your CSS files, and save typing at the same time! Let’s explore them.
[Read more…] about Using CSS Shorthand for Fast-loading Websites
Nested Arrays in JavaScript
In previous tutorials we’ve taken a look at JavaScript array basics, manipulating arrays, and sorting arrays. So far, all the arrays we’ve dealt with have been “flat” arrays; each array element contains a single value, such as a number, string, or object.
However, like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays. In a nested array, the elements of one array are themselves arrays. For example:
Sorting JavaScript Arrays
Previously we looked at the basics of JavaScript arrays, and showed how to manipulate the elements within them. In this tutorial, we take a look at how to sort array elements. You learn how to reverse the order of an array; how to sort an array alphabetically; and how to sort an array’s elements into any order you like.
Manipulating JavaScript Arrays
My first tutorial on JavaScript arrays covered the basics: creating arrays, accessing the contents of arrays, array lengths, and looping through arrays.
In this tutorial, you explore arrays in more depth, and learn how to use various methods of the Array
object to manipulate arrays.
JavaScript Array Basics
Like most languages, JavaScript lets you create arrays to store bunches of values in. An array is simply a sequence, or list, of values. A value in a JavaScript array can be anything from a number or string, through to a function or an object; JavaScript arrays can store pretty much any type of data. A single value in a JavaScript array is called an element.
With JavaScript arrays, you can:
- Store any number of values, including no values at all (known as an empty array)
- Access any or all the elements of an array through a single variable name
- Read and write elements of an array
- Loop through all the elements of an array
- Join two or more arrays together to make one longer array
- Convert an array to one long string
- Add or remove elements from the beginning, end, or middle of an array
- Reverse the order of the elements in an array
- Sort the elements of an array in any order you like
- Nest arrays within other arrays
JavaScript stores arrays as Array
objects, so most of the things you can do with arrays revolve around the properties and methods of the Array
class.
In this introductory article, you look at creating arrays, accessing the contents of arrays, the concept of array lengths, and looping through arrays.