JavaScript Framework manipulation DOM changes the content and appearance of page elements

DOM Operations

Before that, you've seen that JavaScript frameworks use selectors and DOM traversal to easily get specific elements. However, to change the content and appearance of a particular element on a Web page, you need to manipulate the DOM and apply the changes. Using pure JavaScript will be a chore, but luckily most JavaScript frameworks provide useful functions that can be easily done.

Suppose you have a box with an ID of the-box.

<div id= "The-box" >message goes here</div>

Using jquery to change its text to "message goes" can be very easy to use:

$ (' #the-box '). HTML (' This is the new message! ');

In fact, you can use HTML code in a function that can be parsed by a browser, for example:

$ (' #the-box '). HTML (' This is the <strong>new</strong> message! ');

In this case, the contents of the DIV element look like this:

<div id= "The-box" >this is the <strong>new</strong> message! ' </div>

Of course, in an instance you need to use special characters greater than or less than, instead of specifying special HTML entity code. You can use the jquery text function instead:

$ (' #the-box '). Text (' >200 ');

After the DIV element is updated, the code is as follows:

<div id= "The-box" >300 > 200</div>

In the example above, the existing content is replaced with the new content. What if you just want to append some information to the text? Luckily, jquery provides the APPEND function for this purpose.

$ (' #the-box '). Append (', goes message ');

Once the original Div is manipulated, the contents of the DIV element look like this:

<div id= "The-box" >message goes here, here goes message</div>

In addition to appending, you can append the contents to the front of the existing content instead of the back. In addition, jquery provides functions that can insert content within a given element, either before or after. There are functions to replace content, empty content, remove elements, clone elements, and so on.

In addition to the DOM manipulation functions, the JavaScript framework usually contains the style and class of several function manipulation elements. For example, you have a table that highlights a row when the mouse passes. You can create a special class name hover that you can add dynamically to a row. Using Yui you can use the following code to determine whether the line has a hover class name, there is no, no, plus.

if (Row.hasclass (' hover ')) row.removeclass (' hover '); else Row.addclass (' hover ');

Similarly, most JavaScript frameworks have built-in functions that manipulate CSS.

• Address: http://www.denisdeng.com/?p=712
• Original address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html