dom:document Object ModelD is for document:the DOM cant work without a document. When you create a Web page and load it on a Web browser, the DOM comes to life. The It takes the document, which has written and turns it into an object. O is for Objects:just as we see before. Model:the m in DOM stands for Model, but it could just as easily stand for map.the DOM represents the Web page T Hats currently loaded in the browser window. The browser provides a map (or a model) of the page. You can use JavaScript to the read this map. The most important convention used by the DOM is the representation of a document as a tree. More specifically, the document is represented as a family tree.
However, instead of using the term family tree, it more accurate to call a document a node tree.
Nodes: A document is a collection of nodes, with nodes as the branches and leaves on the document tree. There is a number of defferent types of nodes. Lets take a quick look at three of them:element nodes, text nodes, attribute nodes.
Element Nodes: such as <body> <p> <ul>, Elemnets is the basic building blocks of documents on the WEB, and its the A Rrangement of these elements in a document this gives the document its structure.
Text Nodes: If a document consisted purely of empty elements, it would has a structure, but the document itself wouldnt contain MUC H content. On the web, most content is provided by Text.such as <p>dont forget to buy this stuff</p>, "Dont Forget to BU Y this stuff "is a text node. In XHTML, text nodes is always enclosed within element nodes.
Attribute Nodes: Attributes is used to give more specific information on an element. <p title = "A gentle reminder" > Dont forget to buy this stuff. </p>in DOM, title = "A gentle reminder" is a attribute node.
Because attributes is always placed within opening tags, attribute nodes is always contained within ELEMENT nodes. Not all elements contain attribute, and all attributes is contained by elements. In fact, each element in a document was an object. Using the DOM, you can "get" at all of these elements.
Getting Elements: Three DOM methods allow for access element nodes by ID, tag name, and class name.
getElementById (): Usage:
document.getElementById (ID): This method would return a specific object in the document Model.you can with the typeof to test This:eg:al ERT (typeof document.getElementById ("purchases"));
getElementsByTagName (): Usage:
element.getelementbytagname (TAG); Even if there is a one element with the specified tag name, Getelementbytagname still returns an array. The length of the array would be simply 1.you can also use a wildcard (wildcard character) with Getelementbytagname, which means you can MA Ke an array with every single element. Eg:alert (document.getElementsByTagName ("*"). length); You can also combine getElementsByTagName with getElementById. Eg:var shopping = document.getElementById ("purchases"); var items = shopping.getelementsbytagname ("*"); alert (items.length);
Getelementsbyclassname ()It also behaves in the same is getelementsbytagname by returning an array of elements with a common class name. The Getelementsbyclassname method is quite useful, but it's supported by only modern browsers. To do up for the lack of support, DOM scripters has needed to roll their own getelementsbyclassname function using Exi Sting DOM methods, sort of like a rite of passage.
functiongetelementsbyclassname (node, classname) {if(node.getelementsbyclassname) {//Use the existing method returnnode.getelementsbyclassname (classname); } Else { varResults =NewArray (); varElems = Node.getelementsbytagname ("*"); for(vari=0; i<elems.length; i++) { if(Elems[i].classname.indexof (className)! =-1) {Results[results.length]=Elems[i]; }}returnresults; }}Before you could write like this:var shopping = document.getElementById ("purchases"); var sales = shopping.getelementsbyclassname ("Sale"); With this function, you can write the code like This:var shopping = document.getElementById ("purchases"); var sales = Getelementsbyclassname (shopping, "sale"); Here ' s A
Quick Summaryof what you ' ve seen so far:
- A document is a tree of nodes.
- There is different types of nodes:elements, attributes, text, and so on
- You can go straight to a specific element node using getElementById.
- can go directly to a collection of element nodes using getElementsByTagName or Getelementsbyclassname
- Every one of these nodes is an object.
Getting and Setting Attributes:getattribute () Usage:object.getAttribute (attribute); Unlike the other methods you ' ve seen before and you cant use getattribute on the Document object. It can be used on the only element node object. SetAttribute () Usage:object.setAttribute (attribute, value);
The DOM in JavaScript
