Section 4.3. Under the Microscope: The document object


4.3. Under the Microscope: The document object

Everything in the web browser's model of your web page can be accessed using the JavaScript "document" object. You've already seen the getElementById() function, but there's a lot more that you can do with the document object.

     You can just type "document" in your JavaScript code,     and use this object anytime you want.documentThe     document object gives your JavaScript access to the web browser's DOM tree. 

Get the root element of the document

You can grab the <html> root element from an HTML document using the documentElement property:

 var htmlElementThe root element in HTML is always <html>. = document.documentElement; 

Find an element by its "id" attribute

You've already seen how getElementById() makes it a piece of cake to find an element in your web page, using the element's id attribute.

 var manganese =   document.getElementById("Mg")This gets the element   with an id of "Mg"..value; 

Create new markup nodes

You can use the various "create" methods on the document object to add elements and text to your markup:

 var myImage = document.createElement  ("img");This creates a new <img> element. varNow you can add this text node to an element in your markup. favShows =   document.createTextNode  ("24 and Lost"); 

Any changes you make to the browser's model of a web page will automatically update the actual web page in users' browsers.

Find nodes by their name

If you want all the elements with a certain name, you can use getElementsByTagName(). This returns an array, so you'll need to loop through the array to get a particular element:

 var allDivs =    document.getElementsByTagName("div");This returns    all the <div>   elements. var firstPara =    document.getElementsByTagName("p")Get all the <p>    elements...[0]; ...and return just the first one    in the array. 

This looks like just what I need to change my web page on the fly... but where's the Ajax? I don't even see a request object in any of that code.

The DOM works with Ajax...

...but the DOM isn't part of Ajax.

              asynchronous requestThis is where that JavaScript request object becomes so important. Web BrowserHere's your typical Ajax application making a request.             getBoardsSold()There's no DOM code in here... PHP script                       server's response...or here,                       where you get the request, either. Web Browser Here's the same Ajax app, getting a response from the server, and running a callback function.       updatePage() Your callback function gets run when the browser gets a response from the server. PHP script 

        updatePage()   Once you're ready to update a web page, the asynchronous part of your programming is done. But your callback still needs a way to actually change the web page that the user is looking at. 

When you're ready to update a web page, or just want to build a cool user interface, you need to use the Document Object Model for the page.

 Here's the DOM tree for a web page, and some JavaScript that works on the DOM.         body                    div     div     div    div           img     img    img     img      img    div 

Find nodes by their name

If you want all the elements with a certain name, you can use getElementsByTagName(). This returns a list, so you'll need to loop through the list to get a particular element:

 var allDivs =   document.getElementsByTagName("div") var firstPara =   document.getElementsByTagName("p")Get all the <p> elements...[0];...and return just the first one in the list. 

Create new markup nodes

You can use the various "create" methods on the document object to add elements and text to your markup:

 var myImage = document.createElementThis creates a new <img> element.("img"); var favShows =Now you can add this text node to an element in your markup. document.createTextNode("24 and Lost"); 

With the DOM, you can move items around on a page...

...and create nice CSS effects, without ever reloading the page.




Head Rush Ajax
Head Rush Ajax (Head First)
ISBN: 0596102259
EAN: 2147483647
Year: 2004
Pages: 241

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net