Translated from:
Dojo Dom Functions
Original Author: Sam Foster
Siqi (siqi.zhong@gmail.com)
In this tutorial, you will learn how to use dojo to perform simple cross-platform Dom operations. With the basic Dom knowledge and several dojo functions, You can efficiently create, read, update, or delete elements on the page.
Difficulty: Beginner
Dojo version: 1.6
Get startedSince JavaScript Based on the browser is concerned, the Document Object Model (DOM) is the place where we draw the content and the interface that the user sees. JavaScript and Dom are what we need if we want to enhance, replace, or add something to the HTML loaded by the browser. Dojo is designed to make Dom operations simpler and more efficient. Therefore, Dojo provides some convenient functions to solve the annoying compatibility problem between different browsers and make common operations more concise.
To understand these functions, we will operate on a simple page with an unordered list containing five elements:
<! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"> <br/> <title> Demo: dom functions </title> </P> <p> <MCE: script src = "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src = "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"> </MCE: SCRIPT> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> dojo. ready (function () {// "ready" entry point </P> <p >}); </P> <p> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <ul id = "list"> <br/> <li id = "one"> one </LI> <br/> <li id = "two"> two </LI> <br/> <li id = "three"> three </LI> <br/> <li id = "four"> four </LI> <br/> <li id = "five"> five </LI> <br/> </ ul> <br/> </body> <br/> </ptml>
This page already contains the dojo script tag. I believe you know the dojo. Ready code block. All code for Dom operations can be executed only after the Dom is loaded.
Search
First, we need to know how to obtain elements from the Dom. The simplest method is to use dojo. byid. After you pass the ID of an element you want to obtain to dojo. after byid, if a DOM node with the same ID exists, you will get the node. If no matching node exists, null is obtained.
This is equivalent to using document. getelementbyid, but using dojo. byid has two advantages: conciseness and solves the bug of Some browsers implementing getelementbyid. Another great feature of dojo. byid is that if you pass a DOM node to it, it will immediately return to the node. This helps you create APIs that are applicable to both strings and DOM nodes. Let's take an example:
Function settext (node, text) {<br/> node = dojo. byid (node); <br/> node. innerhtml = text; <br/>}</P> <p> dojo. ready (function () {<br/> var one = dojo. byid ("one"); </P> <p> settext (one, "One has been set"); <br/> settext ("two ", "Two has been set as well"); <br/> });
View examples
The settext function is used to set the text content of a node. Because dojo. byid can accept DOM nodes as parameters, this function can also accept strings or DOM nodes.
Create
Another thing you will often do is to create elements. Dojo does not prevent you from using the native document. createelement method to create elements, but it may be very lengthy to create an element and set all required attributes for it. What's more terrible is that you will face additional property settings caused by different browser differences. This makes dojo. Create a more convenient and reliable choice.
Dojo. create has the following parameters: node name (string), node attribute (object) optional parent node or sibling node, optional relative position to parent node or sibling node ("last" by default "). It returns the newly created Dom element node. Let's take an example:
Dojo. ready (function () {<br/> var list = dojo. byid ("list"), <br/> three = dojo. byid ("three"); </P> <p> dojo. create ("Li", {<br/> innerhtml: "six" <br/>}, list); </P> <p> dojo. create ("Li", {<br/> innerhtml: "seven", <br/> classname: "seven", <br/> style :{< br/> fontweight: "bold" <br/>}< br/>}, list); </P> <p> dojo. create ("Li", {<br/> innerhtml: "three and a half" <br/>}, three, "after"); <br/> });
View examples
A simple list element with the content "six" is created and added to the list. Then, another list element with the content of "seven" is created, and its classname attribute is "seven". This style makes it bold and then the element is added to the list. Finally, a list element with the content "three and a half" is created and inserted to the list element with the ID "three.
When should I create elements like this and set the innerhtml attribute of a container directly? If you already have a string for the HTML content you need, setting the innerhtml attribute will certainly be faster. However, dojo. the advantage of "CREATE" is that you do not need to add nodes to the Dom immediately if you want to create nodes, or it is displayed when you want to insert or add a new element without affecting the sibling nodes around you.
Plugging
If you already have a node and want to insert it somewhere, you will need to use dojo. Place. The parameter is as follows: the ID of a DOM node, a node to be inserted, a DOM node, or a reference node ID and an optional position (string, "last" by default "). This is very similar to the parameter table of dojo. Create. In fact, dojo. Create uses dojo. Place at the underlying layer. In the previous example, we added several buttons to the page:
<Button onclick = "movefirst ();"> the first item </button> <br/> <button onclick = "movebeforetwo (); "> before two </button> <br/> <button onclick =" moveafterfour (); "> after four </button> <br/> <button onclick =" movelast (); "> the last item </button>
The following code defines some functions that use dojo. place to move the third node in the list:
Function movefirst () {<br/> var list = dojo. byid ("list"), <br/> three = dojo. byid ("three"); </P> <p> dojo. place (three, list, "first"); <br/>}</P> <p> function movebeforetwo () {<br/> var two = dojo. byid ("two"), <br/> three = dojo. byid ("three"); </P> <p> dojo. place (three, two, "before"); <br/>}</P> <p> function moveafterfour () {<br/> var four = dojo. byid ("four"), <br/> three = dojo. byid ("three"); </P> <p> dojo. place (three, four, "after"); <br/>}</P> <p> function movelast () {<br/> var list = dojo. byid ("list"), <br/> three = dojo. byid ("three"); </P> <p> dojo. place (three, list); <br/>}
View examples
Valid parameters of the plugging location can be "before", "after", "replace", "only", "first", or "last ". For more information about the meaning of each plug-in option, see reference guide for dojo. Place.
In this simple example, dojo. place does a little more work than the native parentnode. appendchild (node. It can simply specify the location of the plug-in, whether it is relative to the parent node or brother node-use a consistent API.
Delete
You usually create nodes, but sometimes you want to delete some nodes. Dojo provides two methods to delete a node: dojo. destory deletes a node and all its child nodes, while dojo. Empty deletes only the child nodes of one node. Both methods take the ID of a DOM node or node as the parameter. We will add two buttons to our page:
<Button onclick = "destroyfirst ();"> destroy the first list item </button> <br/> <button onclick = "destroyall (); "> destroy all list items </button>
Function destroyfirst () {<br/> var list = dojo. byid ("list"), <br/> items = List. getelementsbytagname ("Li"); </P> <p> If (items. length) {<br/> dojo. destroy (items [0]); <br/>}</P> <p> function destroyall () {<br/> dojo. empty ("list"); <br/>}
View examples
The first button deletes the first element in the list when the user presses it. The second button clears the entire list.
Summary
Now, we have a comprehensive set of tools for Dom operations, from creating nodes to moving nodes to deleting them-but they can only operate on one node at the same time. What if you want to operate on nodes without IDs? The next tutorial will introduce dojo. query, which allows us to search and operate Nodes Based on the CSS selector!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
