BTI220 notes – Tue Jul 30

We’ll work again with the HTML DOM today. We’ll modify the DOM with JavaScript. Then, we’ll introduce HTML Forms.

.

This document is being edited (this notice will be removed after the edits have been completed).

.

Developer tools that will help you now

Here are some developer tools that will help you write better web client code.

Firefox ‘Inspector‘ – view the DOM and CSS rules for an element

  • included with Firefox
  • on the ‘Web Developer’ menu

or… Chrome ‘Developer Tools’ menu, Elements tab

or… Internet Explorer ‘Developer Tools’ menu

Firefox ‘DOM Inspector‘ – easy way to view the DOM with the whitespace nodes

W3C Validator – checks/validates your code’s accuracy

  • on the W3C site, at validator.w3.org
  • can check a URL, a file upload, or copy-pasted code

.

Working with the HTML DOM

In this section, you’ll do some more work with the HTML DOM. Make sure that you are using one of the inspectors shown above.

.

Element selector methods

There are two sets of selector methods. The ‘getElement…’ methods have been used for 15+ years. The ‘querySelector…” methods are newer, and are often associated with HTML5. Over time, you’ll probably prefer using the newer selector methods.

getElementById

  • returns the specific element using its ‘id’

getElementsByTagName

  • returns a NodeList of elements that match the argument
  • examples – ‘li’, ‘p’

getElementsByClassName

  • returns a NodeList of elements that match the argument
  • examples – ‘indent25’, ‘shadebackground’

.

New-style selectors, can work on ‘document’ or an element reference…

querySelector

  • returns the first element that matches the argument(s)
  • examples – ‘div’, ‘#uniqueid’, ‘.classname’; comma-separated list

querySelectorAll

  • returns a NodeList of elements that match the argument(s)
  • examples – ‘li’, ‘.classname’; comma-separated list

.

What’s a NodeList? It’s a collection, similar enough to an array to make JavaScript programmers happy and comfortable. In other words, it will tell you how many items are in the list with its ‘length’ property. And, you can dereference one of its items with an array-like syntax (e.g. myList[2]), if you wish.

Other ways to select items include:

  • parentNode
  • childNodes
  • firstChild
  • nextChild
  • nextSibling
  • previousSibling

Use the MDN documentation to read about these members.

.

Changing the DOM

First, we’ll change style rules, and then we’ll change page content with JavaScript.

Remember that we can modify the DOM in two ways: 1) with CSS, and 2) with JavaScript.

.

The first  task will introduce you to the ‘style’ property syntax, which is based on CSS rule syntax

.

Events (from the DOM) that JavaScript can handle

onclick

onmouseover

onmouseout

onsubmit – an HTML Form was submitted

onfocus – an object became active

onblur – an object became inactive (after being active)

onchange – an object was changed

Also… onerror, onload, onunload, and many others

.

Examples

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

// hello

.

.

.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: