JavaScript dom Getting Started tutorial (1/3)

The code is as follows	Copy Code
document.getElementById (' intro '). Style.color = ' #FF0000 ';

In order to understand the functionality of this API, it is easy to understand that by looking at it from one step to the next:

The code is as follows	Copy Code
var myDocument = document; var Myintro = Mydocument.getelementbyid (' intro '); var myintrostyles = Myintro.style;

Now, we can set the color:

The code is as follows	Copy Code
Myintrostyles.color = ' #FF0000 ';

Now that we have a reference to the text's style object, we can add other CSS styles:

The code is as follows	Copy Code
myintrostyles.padding = ' 2px 3px 0 3px '; Myintrostyles.backgroundcolor = ' #FFF '; Myintrostyles.margintop = ' 20px ';

Here we just want the basic CSS property name, the only difference is that the name of the CSS property, if with-then need to be removed, such as using margintop instead of margin-top. For example, the following code does not work and throws a syntax error:

The code is as follows	Copy Code
Myintrostyles.padding-top = ' 10em ';

A syntax error has occurred:
Horizontal line in JavaScript-is the subtraction operator
And there's no such property name

Properties can be accessed like arrays, so using this knowledge we can create a function to change the style of any given element:

The code is as follows	Copy Code
function Changestyle (Elem, property, Val) { Elem.style[property] = val; Use [] to access properties } Use the above function: var Myintro = document.getElementById (' intro '); Get Intro Text Object Changestyle (Myintro, ' Color ', ' red ');

This is just an example, so the function may be of no use, and syntactically, it will be used directly or quickly, for example (Elem.style.color = ' red '). In addition to the style attribute, there are many other attributes that can be manipulated by a node (or element), and if you use Firebug, click the Dom tab to see all the attributes of that node (or element):

All properties can be accessed through the dot identifier (for example, Element.tabindex). Not all attributes are raw data types (strings, numbers, booleans, and so on), and the Sytle property is also an object that contains its own properties, many of which are read-only, meaning they cannot be modified. For example, you cannot directly modify the ParentNode attribute of a node, and if you modify the read-only attribute, the browser throws an error: for example, throwing the error "setting a" is has only a getter, but we need to pay attention.

Usually DOM operations change the original content, there are several ways to do this, and the simplest is to use the innerHTML attribute, for example:

The code is as follows	Copy Code
var Myintro = document.getElementById (' intro '); Replace the current content myintro.innerhtml = ' New content for the <strong>amazing</strong> paragraph! '; Add content to current content myintro.innerhtml = ' ... some more content ... ';

The only problem is that the method is not defined in the specification and is not defined in the DOM specification, and if you don't resent it, keep using it because it's a lot quicker than the other way we're going to discuss it next.

Node nodes

When creating content through the DOM API, you need to be aware of the 2 types of node nodes, one is the element node, one is the text node, and the previous section has listed all the node types, both of which require our special attention now. Creating elements can be done through the CreateElement method, and the text node can be created using createTextNode, the corresponding code is as follows:

The code is as follows	Copy Code
var Myintro = document.getElementById (' intro '); Add content var sometext = ' This are the text I want to add '; var textnode = document.createTextNode (Sometext); Myintro.appendchild (Textnode);

Here we use the AppendChild method to attach the new text node to the text field, which is a bit longer than the non-standard innerHTML method, but it is still important to understand these principles, here is a more detailed example of using the DOM method:

var Myintro = document.getElementById (' intro ');

The code is as follows	Copy Code
Add a new connection to a text node First, create a new connection element var mynewlink = document.createelement (' a '); <a/> Mynewlink.href = ' http://google.com '; <a href= "http://google.com"/> Mynewlink.appendchild (document.createTextNode (' Visit Google ')); <a href= "http://google.com" >visit google</a> To attach content to a text node Myintro.appendchild (Mynewlink);

In addition to the DOM there is a InsertBefore method for the node in front of the attachment content, through InsertBefore and appendchild we can implement their own InsertAfter functions:

' Target ' is an already existing element in the DOM.
' Bullet ' is the new element to insert

The code is as follows	Copy Code
function InsertAfter (target, bullet) { Target.nextsibling? Target.parentNode.insertBefore (bullet, target.nextsibling) : Target.parentNode.appendChild (bullet); }

The 3-mesh expression was used:
Format: expression When condition is true: expression with false condition

The above function first checks to see if the next node of the target element exists, and if it exists, add the bullet node in front of the node, and if not, target is the last node, append the new node directly in the back. The DOM API doesn't provide InsertAfter because it's really unnecessary--we can create it ourselves.

Dom operations have a lot of content, and what you see above is just a part of it.

Event Events

Browser events are at the heart of all Web programs, and through these events we define what is going to happen, and if there is a button in the page, you need to verify that the form is legitimate before clicking on it, and then you can use the Click event, the most standard list of events listed below:

Note: As we said in the previous chapter, the DOM and JavaScript languages are 2 separate things, and browser events are part of the DOM API, not part of JavaScript.

Mouse events

' MouseDown '-the mouse device triggers the MouseDown event when it presses an element.

' MouseUp '-the mouse device triggers the MouseUp event when it bounces from the pressed element.

' Click '-triggers the click event when the mouse clicks on the element.

' DblClick ' – triggers the DblClick event when the mouse double-clicks the element.

' MouseOver '-triggers the MouseOver event when the mouse moves over an element.

' Mouseout '-triggers the Mouseout event when the mouse leaves an element.

' MouseMove '-triggers the MouseMove event when the mouse moves on an element but does not leave.

Keyboard events

' KeyPress '-triggers the event when the key is pressed.

' KeyDown '-triggers the event when the key is pressed, and before the KeyPress event.

' KeyUp '-triggers the event when the key is released, after the KeyDown and KeyPress events.

Form Events

' SELECT '-The Text field (input, textarea, etc.) when the text is selected to trigger the event.

' Change '-when the control loses input focus, it triggers the event (or when the value is changed).

' Submit '-triggers the event when the form is submitted.

' Reset '-this event is triggered when the form resets.

' Focus '-this event is triggered when the element gets focused, usually from the mouse device or tab navigation.

' Blur '-triggers the event when the element loses focus, usually from the mouse device or tab navigation.

Other events

' Load ' – The event is triggered when the page is loaded (including content, picture, frame, object).

' Resize ' – this event is triggered when the page size changes (for example, browser scaling).

' Scroll ' – The event is triggered when the page scrolls.

' Unload '-triggers the event when all content is deleted from the page or frame (for example, leaving a page).

There are also a variety of events, the events shown above are the most commonly used events in JavaScript, and some events may be different across browsers. There are also some other browser implementation of the property events, such as gecko implementation of the domcontentloaded or Dommousescroll, Gecko detailed list of events please see here.

Event handling

We have the event, but not yet how to manage the processing functions and events, before using these events, you first register these event handlers and then describe what to do when the event occurs, and the following example shows a basic event registration model:

home 1 2 3 last