Just jQuery The Core UI - The DOM
Written by Ian Elliot   
Thursday, 05 May 2022
Article Index
Just jQuery The Core UI - The DOM
Working With The DOM
Selectors In JavaScript
Page 2 of 3

Working with the DOM

Before we move on to consider how jQuery works it is a good idea to find out how the DOM and JavaScript work together without its help. The reason is that this is the fundamental way things work and it is what jQuery uses to do its job. You can do things directly in JavaScript and the DOM without using jQuery and sometimes this is a good idea and sometimes it is essential.

When the browser loads the page it creates the DOM with one object for each node. The browser creates the document object at the root of the hierarchy and this is made available to a JavaScript program. That is, document is your route into the DOM.

The document object has a range of functions and properties that let you access and work with the rest of the DOM. For example, the head and body methods return the objects corresponding to the head and body tags. Only the document node has head and body tags, but all nodes have children and all of the DOM objects have properties to access them:

  • childNodes – return a collection of all child nodes

  • children – return a collection of all child nodes that are elements, i.e. excluding text or comment nodes

There are also properties that return individual elements:

  • firstChild

  • lastChild

  • parentNode

  • nextSibling

  • previousSibling

  • nodeName

The only real question we have to answer is what the order of the children is. The answer is that it is the same as the order in which they appear as tags in the web page.

For example if the web page is:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
 </html>

then:

var child=document.firstChild;

is a docType object which is not part of the HTML specification, but it is a DOM node all the same. If we ask for the nextSibling of child what do you think the answer is:

var child2=child.nextSibling;

The answer is an html element. What is the next sibling of the html element – there isn’t one and nextSibling returns null.

You can see how you can use the properties and functions provided by document and the other node DOM objects to move though the DOM, but don’t worry too much about mastering them because jQuery provides better ways to work.

Simple Selectors – id and class

Suppose you had a button somewhere on the page. Using the properties and functions introduced so far finding it would be a tedious task involving children of children and so on. Suppose there are two buttons on the page how could you know you had found the one you wanted to work with?

We clearly need a way of searching the DOM and returning objects that meet a given specification. In the case of the DOM this specification is called a selector. Selectors are also used by CSS to specify which elements a style should be applied to, so selectors are more properly known as CSS selectors.

The most basic way of finding a DOM object is to use its id or class as a selector. 

Beginners often get confused about id and class.

The key idea is that on a page the id identifies an element uniquely, but a class can be assigned to multiple elements.

For example:

<div id="div1" class="bigdiv">
</div>

creates a div with id div1 and class bigdiv.

Only one element on the page can have the id div1, but any number can belong to the class bigdiv.

You can imagine how these are used in practice.

You use the id to uniquely identify a component of the UI, for example id="button1" and you use the class to identify a group of components that have something in common, usually the way they look. 

One use of these attributes is as part of a CSS definition of what the element should look like. You can apply a set of properties to an element by picking it out by type, id or class in a style sheet.

For example:

.bigdiv {
 background-color: black
}

sets all of the elements that are a member of the bigdiv class to a black background color.

Also:

#div1 {
 background-color: black
}

selects the single element with id set to div1 and sets its background to black.

Another simple selector is the tag type. For example:

div {
 background-color: black
}

sets all div tags to black backgrounds.

It really is this simple and you can deal with 90% of all situations just using these three selectors:

  • name all tags like <name>

  • #name the single tag with id="name"

  • .name all tags with class="name"

There are, of course, much more complicated forms of selector, and we will look at these in later chapters, but for now let's keep things simple.

<ASIN:1871962501>

<ASIN:1871962528>

<ASIN:1871962560>

<ASIN:1871962579>
Last Updated ( Friday, 27 May 2022 )