Compared to some other JavaScript libraries, such as Prototype and its derivatives, the Microsoft AJAX Library doesn’t offer a whole lot of DOM manipulation. Still, it’s beta than nothing.

The dollar function $() was dumped in favor of $get() which is an alias for document.getElementById(). It takes two parameters: the id of an element to locate, and an element to traverse for a match. If the second parameter is omitted, the entire document is searched. The following sample searches for the content paragraph within the article element:

<div id=”article”>    <h1>Lorem Ipsum Dolor Sit Amet.</h1>    <p id=”blurb”>Quisque a sapien viverra tellus…</p>    <p id=”content”>Integer est felis, commodo ut…</p> </div> <script type=”text/javascript”> var article, content;  article = $get (‘article’); content = $get (‘content’, article);  /* Same as … */ content = $get (‘content’); </script>
addCssClass(), removeCssClass (), containsCssClass
These names should be self-explanatory. These functions take two parameters: an element and a class name.

var blurb = $get (‘blurb’); Sys.UI.DomElement.addCssClass (blurb, ‘highlight’); var isHighlighted =     Sys.UI.DomElement.containsCssClass (blurb, ‘highlight’); Sys.UI.DomElement.removeCssClass (blurb, ‘highlight’);
Please, note that you can add several CSS class names to an element. There’s nothing wrong with <p id=”blurb” class=”foo highlight bar”></p>, for example.

The code above could be written with toggleCssClass() as follows:

Sys.UI.DomElement.toggleCssClass (blurb, ‘highlight’); var isHighlighted =      Sys.UI.DomElement.containsCssClass (blurb, ‘highlight’); Sys.UI.DomElement.toggleCssClass (blurb, ‘highlight’);
getLocation ()
Returns absolute coordinates of an element (with scrolling taken into account!) You don’t have to position an element with CSS. Wherever it is on the page, you’ll get its coordinates. E.g.:

var position = Sys.UI.DomElement.getLocation (blurb); alert (‘x = ‘ + position.x + ‘; y = ‘ + position.y);
Absolutely positions an element with CSS. Note that when an element is positioned this way, i.e. by applying a position: absolute CSS rule, it’s taken out of the page flow. If there are elements that preceed and follow it, they will collapse to close the gap.

getBounds ()
Gets the absolute coordinates of an element along with its height and width. The (x, y) coordinates are obtained via a call to getLocation() discussed above.

N.b.: When it comes to calculating coordinates and dimensions of an element, it gets hairy fast. There are margins, paddings, borders on the element and/or on its parent and the parent’s parent, etc. Check out Measuring Element Dimension and Location to see for yourselves. So don’t be surprised if you come up a few pixels short here and there in a complex layout.

var bounds = Sys.UI.DomElement.getBounds (article); /* The absolute (x, y) coordinates of the article box along  * with its height and width are in: *  * bounds.x, bounds.y, bounds.width and bounds.height */
To be honest, I don’t understand this function besides the fact that it allows you to set an attribute with a namespace (via setAttributeNS), the namespace being that of the Accessible, Adaptable Applications (AAA). If somebody knows what the deal here is, please leave a comment.

That’s pretty much it for DOM manipulation with the “core” library. Not a whole lot, if you ask me. I wish there were more variants of the $get() function to find elements by CSS selectors. I wish I could add and remove arbitrary styles, not just the CSS class name. The omnipresent getElementsByClassName () is missing too. And so forth. But then again—maybe that wasn’t the intention.

If the Microsoft AJAX Library is meant to give a leg up with building web apps, I think the team needs to beef it up.