4.3. Under the Microscope: The document objectEverything 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. |