Once we get a response back from the server, we probably want to update our html page



Yüklə 441 b.
tarix22.01.2018
ölçüsü441 b.
#39990



Once we get a response back from the server, we probably want to update our HTML page

  • Once we get a response back from the server, we probably want to update our HTML page

  • The HTML page itself is document

  • You can get information from the HTML page

    • var price = document.getElementById("price").value;
    • var allImages = document.getElementsByTagName("img");
    • var firstImg = document.getElementsByTagName("img")[0];

  • We can use the DOM to change the HTML



innerHTML is a non-W3C DOM property that gets or sets the text between start and end tags of an HTML element

  • innerHTML is a non-W3C DOM property that gets or sets the text between start and end tags of an HTML element

    • When the innerHTML property is set, the given string completely replaces the existing content of the object
    • If the string contains HTML tags, the string is parsed and formatted as it is placed into the document

  • Syntax: var markup = element.innerHTML; element.innerHTML = markup;

  • Example: document.getElementById(someId).innerHTML = response;

  • innerHTML is nonstandard



...
and ... are containers

  • ...
    and ... are containers

    • Like
      for paragraph, there is a blank line before and after a
    • Like for italics, does not affect spacing or flow

  • The primary use of these tags is to hold an id attribute

  • With an id, we can manipulate page content

    • // Find thing to be replaced var mainDiv = document.getElementById("main-page"); var orderForm = document.getElementById("target");
    • // Create replacement var paragraph = document.createElement("p"); var text = document.createTextNode("Here is the new text."); paragraph.appendChild(text);
    • // Do the replacement mainDiv.replaceChild(paragraph, target);


The Document Object Model gives you access to all the elements on a web page.

  • The Document Object Model gives you access to all the elements on a web page.

    • Using any programming language, you can create, modify and remove elements in the page dynamically.

  • The DOM is separated into 3 different parts / levels:

    • Core DOM - standard model for any structured document
    • XML DOM - standard model for XML documents
    • HTML DOM - standard model for HTML documents

  • With the DOM, XHTML elements can be treated as objects, and many attributes of XHTML elements can be treated as properties of those objects. Then, objects can be scripted (through their id attributes) with JavaScript to achieve dynamic effects.

    • Warning: - The DOM is accessible only when the whole document has been loaded.That’s the reason the DOM access code is executed only after the load event has been fired.




The Document Object Collections are groups of related objects on a page.



Access items in a collection via square brackets

  • Access items in a collection via square brackets

  • item method of a DOM collection

    • Access specific elements in a collection, taking an index as an argument

  • namedItem method

    • takes a name as a parameter and finds the element in the collection, if any, whose id attribute or name attribute matches it

  • href property of a DOM link node

    • Refers to the link’s href attribute

  • Collections allow easy access to all elements of a single type in a page

    • Useful for gathering elements into one place and for applying changes across an entire page

  • Example of Collection of type link



In the legacy DOM, with the name attribute, you can assign names to important document elements and to refer to those elements by name:

  • In the legacy DOM, with the name attribute, you can assign names to important document elements and to refer to those elements by name:

  • Assuming that the
    is the first one in the document:

    • document.forms[0] // refer to the form by position
    • document.f1 // refer to the form by name
    • document.forms[“f1”] // refer to the form as array index

  • Setting the name attribute of a , , or (but not of and >) also makes the corresponding Form, Image, or Applet object accessible as a named property of the document object itself. Thus, you can also refer to the form as:
      • document.f1

  • You have a form that looks like this:

    • /* you can refer to the text input field element as : */
    • document.shipping.zipcode




    HTML documents have a hierarchical structure of nested tags that is represented in the DOM as a tree of objects. The tree representation of an HTML document contains nodes representing HTML tags or elements, e.g and





    nodeName

    • nodeName

    • nodeValue

    • nodeType

    • parentNode

    • childNodes

    • firstChild

    • lastChild

    • previousSibling

    • nextSibling

    • attributes

    • ownerDocument





    Most element nodes have child nodes:

    • Most element nodes have child nodes:

    • The node has two child nodes; and

    • The node has one child node; the node</b></h2></li> <li><h2></h2></li> <li><h2><b>The <title> node also has one child node; the text node "DOM Tutorial“</b></h2></li> <li><h2></h2></li> <li><h2><b>The <h2> and <br />nodes are siblings, and both child nodes of <body></b></h2></li> </ul> <br /><center><img src="img14.jpg" alt=""></center> <br /><h2><b>Properties</b> are often referred to as atributes that describes the node (i.e. nodename is "p").</h2> <ul><li><h2><b>Properties</b> are often referred to as atributes that describes the node (i.e. nodename is "p").</h2></li> <li><h2><b>Methods</b> are often referred to as something that is done (i.e. delete "p").</h2></li> <li><h2><b>DOM Properties (attributes)</b></h2></li> <ul><li>These are some typical DOM properties:</li> <li>x.nodeName - the name of x</li> <li>x.nodeValue - the value of x</li> <li>x.parentNode <a href="/contest-of-xml-lock-protocols-outline-key-ideas-of-2-groups-of.html">- the parent node of x</a></li> <li>x.childNodes - the child nodes of x</li> <li>x.attributes - the attributes nodes of x</li> </ul><li><h2>Note: In the list above, <b>x</b> is a node object.</h2></li> </ul> <br /><center><img src="img15.jpg" alt=""></center> <br /><h2>You can access a node in three ways:</h2> <ul><li><h2>You can access a node in three ways:</h2></li> <ul><li>1. By using the getElementById() method</li> <li>2. By using the getElementsByTagName() method</li> <li>3. By navigating the node tree, using the node relationships )</li> </ul><li><h2><b>x.getElementByID(<i>id</i>)</b> - get the element with a specified id</h2></li> <li><h2><b>x.getElementsByTagName(<i>name</i>)</b> - get all elements with a specified tag name</h2></li> <li><h2>document.getElementsByName(name)</h2></li> <ul><li>returns a collection of objects with the specified NAME</li> </ul><li><h2>Note: In the list above, <b>x</b> is a node object.</h2></li> </ul> <br /><center><img src="img16.jpg" alt=""></center> <br /><h2>1-<b> return the text from a <br />Hello DOM! <br /></b> </h2> <ul><li><h2>1-<b> return the text from a <br />Hello DOM! <br /></b> </h2></li> <li><h2><b> txt=document.getElementById("intro").</b></h2></li> <li><h2><b> childNodes[0].nodeValue </b></h2></li> <li><h2><b>Display:- “</b>Hello DOM!”</h2></li> <ul><li>document - the current HTML document</li> <li>getElementsById("intro") - the <br />element with the id "intro"</li> <li>childNodes[0] - the first child of the <br />element (the text node)</li> <li>nodeValue - the value of the node (the text itself) </li> </ul><li><h2>2- <b>returns first paragraph inside third div in document.</b></h2></li> <li><h2><b>document.getElementsByTagName('div')[2].getElementsByTagName('p')[0];</b></h2></li> <li><h2><b>3- returns fourth link inside element with the ID ‘nav‘</b></h2></li> <li><h2><b>document.getElementById(‘nav).getElementsByTagName('a')[3]; </b></h2></li> </ul> <br /><center><img src="img17.jpg" alt=""></center> <br /> <br /><center><img src="img18.jpg" alt=""></center> <br /><h2>example returns a nodeList of all <br />elements that are descendants of the element with id="main":</h2> <ul><li><h2>example returns a nodeList of all <br />elements that are descendants of the element with id="main":</h2></li> <li><h2>document.getElementById('main').getElementsByTagName("p");</h2></li> <li><h2>The nodeList object represents a node and its child nodes as a node tree. </h2></li> <li><h2><b>Property of Nodelist:</b></h2></li> <ul><li><b>length:</b>Returns an unsigned long integer indicating the number <a href="/datagrid-project-conference.html">of nodes in the NodeList</a><b>.</b></li> <li><b>Method of Nodelist:</b></li> <li><b>item(index):</b>This method takes an index as its argument and returns the node at that index position.</li> </ul><li><h2>x=document.getElementsByTagName("p");</h2></li> <li><h2>for(i=0;i<x.length;i++){ document.write(x[i].childNodes[0].nodeValue); document.write(" <br />"); </h2></li> <li><h2> }</h2></li> </ul> <br /><center><img src="img19.jpg" alt=""></center> <br /><h2>The three properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.</h2> <ul><li><h2>The three properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.</h2></li> <li><h2><html></h2></li> <li><h2><body></h2></li> <li><h2> <br />W3Schools example <br /></h2></li> <li><h2> <div id="main"></h2></li> <li><h2> <br />The <a href="/janer-cristaldo.html">DOM is very useful </a><br /></h2></li> <li><h2> <br />This example demonstrates <b>node Relationships</b></h2></li> <li><h2> <br /></h2></li> <li><h2> </div></h2></li> <li><h2> <br /><center><img src="img20.jpg" alt=""></center> <br /><h2>the <br />is the first child node (firstChild) of the <body> element, and the <div> element is the last child node (lastChild) of the <body> element.</h2> <ul><li><h2>the <br />is the first child node (firstChild) of the <body> element, and the <div> element is the last child node (lastChild) of the <body> element.</h2></li> <li><h2>Furthermore, the <body> is the parent (parentNode) .</h2></li> <li><h2>The firstChild property can be used to access the text of an element.</h2></li> <li><h2>x=document.getElementById("intro"); var text=x.firstChild.nodeValue; </h2></li> </ul> <br /><center><img src="img21.jpg" alt=""></center> <br /><h2><b><html></b></h2> <ul><li><h2><b><html></b></h2></li> <li><h2><b><head></b></h2></li> <li><h2><b><script type="text/javascript"></b></h2></li> <li><h2><b>function changeLink()</b></h2></li> <li><h2><b>{</b></h2></li> <li><h2><b>document.getElementById('myAnchor').innerHTML="Visit KAU";</b></h2></li> <li><h2><b>document.getElementById('myAnchor').href="http://www.kau.edu.sa";</b></h2></li> <li><h2><b>document.getElementById('myAnchor').target="_blank";</b></h2></li> <li><h2><b>}</b></h2></li> <li><h2><b></script></b></h2></li> <li><h2><b></head></b></h2></li> <li><h2><b><body></b></h2></li> <li><h2><b>Visit Microsoft</b></h2></li> <li><h2><b><input type="button" onclick="changeLink()" value="Change link"></b></h2></li> <li><h2><b> <br />In this example we change the text and the URL of a hyperlink. We also change the target attribute.</b></h2></li> <li><h2><b>The target attribute is by default set to "_self", which means that the link will open in the same window.</b></h2></li> <li><h2><b>By setting the target attribute to "_blank", the link will open in a new window. <br /></b></h2></li> <li><h2><b> <br /><center><img src="img22.jpg" alt=""></center> <br /><h2><b><html></b></h2> <ul><li><h2><b><html></b></h2></li> <li><h2><b><head></b></h2></li> <li><h2><b><script type="text/javascript"></b></h2></li> <li><h2><b>function changeSize()</b></h2></li> <li><h2><b>{</b></h2></li> <li><h2><b>document.getElementById(“ccsf").height="250";</b></h2></li> <li><h2><b>document.getElementById(“ccsf").width="300";</b></h2></li> <li><h2><b>}</b></h2></li> <li><h2><b>function changeSrc()</b></h2></li> <li><h2><b>{</b></h2></li> <li><h2><b>document.getElementById(“ccsf").src=“colan.gif";</b></h2></li> <li><h2><b>}</b></h2></li> <li><h2><b></script></b></h2></li> <li><h2><b></head></b></h2></li> <li><h2><b><body></b></h2></li> <li><h2><b><img id=“ccsf" src=“logo_01.gif" width="107" height="98" /></b></h2></li> <li><h2><b> <br /> <br /></b></h2></li> <li><h2><b><input type="button" onclick="changeSize()" value="Change height and width of image"></b></h2></li> <li><h2><b><input type="button" onclick="changeSrc()" value="Change image"></b></h2></li> <li><h2><b> <br /><center><img src="img23.jpg" alt=""></center> <br /><h2><b><html></b></h2> <ul><li><h2><b><html></b></h2></li> <li><h2><b><head></b></h2></li> <li><h2><b><script type="text/javascript"></b></h2></li> <li><h2><b>function changeContent()</b></h2></li> <li><h2><b>{</b></h2></li> <li><h2><b>var x=document.getElementById('myTable').rows[0].cells;</b></h2></li> <li><h2><b>x[0].innerHTML="NEW CONTENT";</b></h2></li> <li><h2><b>x[1].innerHTML="NEW TOO";</b></h2></li> <li><h2><b>}</b></h2></li> <li><h2><b></script></b></h2></li> <li><h2><b></head></b></h2></li> <li><h2><b><body></b></h2></li> <li><h2><b><table id="mytable" border="1"></b></h2></li> <li><h2><b><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr></b></h2></li> <li><h2><b><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr></b></h2></li> <li><h2><b><tr><td>Row3 cell1</td><td>Row3 cell2</td></tr></b></h2></li> <li><h2><b></table></b></h2></li> <li><h2><b><form></b></h2></li> <li><h2><b><input type="button" onclick="changeContent()" value="Change content"></b></h2></li> <li><h2><b></form></b></h2></li> <li><h2><b> <br /><center><img src="img24.jpg" alt=""></center> <br /><h2><b><html></b></h2> <ul><li><h2><b><html></b></h2></li> <li><h2><b><head></b></h2></li> <li><h2><b><script type="text/javascript"></b></h2></li> <li><h2><b>function dsptxt(id)</b></h2></li> <li><h2><b>{</b></h2></li> <li><h2><b> alert(document.getElementById(“mytable”).innerHTML);</b></h2></li> <li><h2><b>}</b></h2></li> <li><h2><b></script></b></h2></li> <li><h2><b></head></b></h2></li> <li><h2><b><body></b></h2></li> <li><h2><b><table id="mytable" border="2"></b></h2></li> <li><h2><b><tr><td id="cell1">Cell 1 data</td></b></h2></li> <li><h2><b><td id="cell2">Cell 2 data</td></tr></b></h2></li> <li><h2><b><tr><td id="cell3">Cell 3 data</td></b></h2></li> <li><h2><b><td id="cell4">Cell 4 data</td></tr></b></h2></li> <li><h2><b><tr><td id="cell5">Cell 5 data</td></b></h2></li> <li><h2><b><td id="cell6">Cell 6 data</td></tr></b></h2></li> <li><h2><b><tr><td id="cell7">Cell 7 data</td></b></h2></li> <li><h2><b><td id="cell8">Cell 8 data</td></tr></b></h2></li> <li><h2><b></table></b></h2></li> <li><h2><b> <br /><center><img src="img25.jpg" alt=""></center> <br /><h2>The three properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.</h2> <ul><li><h2>The three properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.</h2></li> <li><h2><html></h2></li> <li><h2><body></h2></li> <li><h2> <br />W3Schools example <br /></h2></li> <li><h2> <div id="main"></h2></li> <li><h2> <br />The DOM is very useful <br /></h2></li> <li><h2> <br />This example demonstrates <b>node Relationships</b> <br /></h2></li> <li><h2> </div></h2></li> <li><h2> <br />This was the last <br /></h2></li> <li><h2> <br /><center><img src="img26.jpg" alt=""></center> <br /> <br /><center><img src="img27.jpg" alt=""></center> <br /> <br /><center><img src="img28.jpg" alt=""></center> <br /> <br /><center><img src="img29.jpg" alt=""></center> <br /> <br /><center><img src="img30.jpg" alt=""></center> <br /><h2><b>Append a new child node: Add a new </b>“paragraph” as the last Child of the body element.</h2> <ul><li><h2><b>Append a new child node: Add a new </b>“paragraph” as the last Child of the body element.</h2></li> <li><h2><b><script type="text/javascript"></b></h2></li> <ul><li>var paragraph= document.createElement("p");</li> <li>var text = document.createTextNode("Here is the new paragraph.");</li> <li>paragraph.appendChild(text);</li> <li>document.body.appendChild(paragraph);</li> <li><b></script></b></li> </ul><li><h2>What if we execute the following 2 lines instead of the last line above? Paragraph is appended to div section</h2></li> <ul><li>var mainDiv = document.getElementById("main");</li> <li>mainDiv.appendChild(paragraph); </li> </ul></ul> <br /><center><img src="img31.jpg" alt=""></center> <br /><h2><b>Replace a child</b> node <b>with a new node</b>: first child from body element is the paragraph “W3Schools example” will be replaced with the new node</h2> <ul><li><h2><b>Replace a child</b> node <b>with a new node</b>: first child from body element is the paragraph “W3Schools example” will be replaced with the new node</h2></li> <ul><li>var paragraph= document.createElement("p");</li> <li>var text = document.createTextNode("Here is the new paragraph.");</li> <li>paragraph.appendChild(text);</li> <li>target = document.body.firstChild</li> <li>document.body.replaceChild(paragraph, target);</li> <li><b>What if we wan</b>t target = document.body.childNodes[1]</li> <li>document.body.replaceChild(paragraph, target);<b>t to replace the Div section?</b></li> </ul></ul> <br /><center><img src="img32.jpg" alt=""></center> <br /><h2><b>Insert new child</b> node <b>after a node:</b> Insert a new paragraph node before the div section.</h2> <ul><li><h2><b>Insert new child</b> node <b>after a node:</b> Insert a new paragraph node before the div section.</h2></li> <ul><li>var paragraph= document.createElement("p");</li> <li>var text = document.createTextNode("Here is the new paragraph.");</li> <li>paragraph.appendChild(text);</li> <li>target = document.body.childNodes[1]</li> <li>document.body.insertBefore(paragraph, target);</li> </ul><li><h2><b>Insert new child</b> node <b>after a node:</b> Insert a new paragraph node at the end of body .</h2></li> <ul><li>document.body.insertBefore(paragraph, null);</li> </ul></ul> <br /><center><img src="img33.jpg" alt=""></center> <br /><h2><b>Delete a child</b> <b>node</b> : third “paragraph” from the body element. This means the paragraph. with sentence “This was the last”</h2> <ul><li><h2><b>Delete a child</b> <b>node</b> : third “paragraph” from the body element. This means the paragraph. with sentence “This was the last”</h2></li> <ul><li>x=document.body;</li> <li>y=x.childNodes[2];</li> <li>z=x.removeChild(y);</li> </ul></ul> <br /><center><img src="img34.jpg" alt=""></center> <br /> <br /><center><img src="img35.jpg" alt=""></center> <br /><h2><b>Each <a href="/der-siebte-tag-oder-die-vollendung-der-schopfung-reinhard-eber.html">document element tag has an id</a></b></h2> <ul><li><h2><b>Each document element tag has an id</b></h2></li> <ul><li><b>H1 = bigheading, H3 = smallheading, </b></li> <li><b>p = para1, p=para2, a= link, p=para3, </b></li> <li><b>ul = list, </b></li> <ul><li><b>li = item1, li = item2, li = item3, </b></li> </ul><li><b>div = nav</b></li> <ul><li><b>Table contains id, text fields and corresponding method:</b></li> <ul><li><b>id = gbi, value = Get By id, method = byId()</b></li> <li><b>id = ins, value = Insert Before, method = insert()</b></li> <li><b>id= append, value = Append Child, method = appendNode()</b></li> <li><b>id = replace, value = Replace Current, method = replaceCurrent()</b></li> <li><b>Last 2 rows of the table don’t have id and text fields</b></li> </ul></ul></ul><li><h2></h2></li> </ul> <br /><center><img src="img36.jpg" alt=""></center> <br /><h2><b>Let’s now demonstrate and study the whole script in detail. </b></h2> <ul><li><h2><b>Let’s now demonstrate and study the whole script in detail. </b></h2></li> <li><h2></h2></li> <li><h2><b>Now you are able to take home work with you</b></h2></li> <ul><li><b>Add a new method that can traverse from any given node even the Html node of body.</b></li> <li><b>Modify the script to remove any node at the document but take care not to delete the html, head, body and script.</b></li> <li><b>Modify the script to get the patent of any node</b></li> <li><b>Modify the script to create new nodes with other tags than P.</b></li> <li><b>Modify the script with any functionality you may find.</b></li> </ul></ul> <br /><center><img src="img37.jpg" alt=""></center> <br /><h2>The objects and collections in the W3C DOM give you flexibility in manipulating the elements of a web page. </h2> <ul><li><h2>The objects and collections in the W3C DOM give you flexibility in manipulating the elements of a web page. </h2></li> <li><h2>The W3C DOM allows you to access every element in an XHTML document. Each element in a document is represented by a separate object. </h2></li> <li><h2>For a reference on the W3C Document Object Model, see the DOM Level 3 recommendation from the W3C at http://www.w3.org/TR/DOM-Level-3-Core/. The DOM Level 2 HTML Specification, available at http://www.w3.org/TR/DOM-Level-2-HTML/, describes additional DOM <a href="/html-derslik-html-haqqinda-ilk-anlayislar-html-faylini-yaratma.html">functionality specific to HTML</a>, such as objects for various types of XHTML elements. </h2></li> <li><h2>Not all web browsers implement all features included in the DOM specification.</h2></li> </ul> <br /><center><img src="img38.jpg" alt=""></center> <br /> <br /><center><img src="img39.jpg" alt=""></center> <br /> <br /><center><img src="img40.jpg" alt=""></center> <br /> <br /><center><img src="img41.jpg" alt=""></center> <br /><h2>You can add event handlers to HTML elements</h2> <ul><li><h2>You can add event handlers to HTML elements</h2></li> <ul><li><input type="Submit" value="Submit" onClick="doIt();" /> </li> <li><img src="dave.jpg" alt="me" onclick="sendmail();" /></li> </ul><li><h2>You can also add handlers programmatically, from a JavaScript function:</h2></li> <ul><li>var act = document.getElementById("act"); act.onclick = takeAction;</li> <li>var images = document.getElementsByTagName("img"); for (var i = 0; i < images.length; i++) { images[i].onclick = expandImage; }</li> <ul><li>Inside expandImage, the particular image is in the variable this</li> </ul><li>Remember: JavaScript is case sensitive, HTML isn't!</li> </ul><li><h2>You can programmatically remove event handlers</h2></li> <ul><li>act.onclick = null</li> </ul></ul> <br /><center><img src="img42.jpg" alt=""></center> <br /><h2><b>Click</b></h2> <ul><li><h2><b>Click</b></h2></li> <li><h2><b>Dblclick</b></h2></li> <li><h2><b>Mousedown</b></h2></li> <li><h2><b>Mouseup</b></h2></li> <li><h2><b>Mouseover</b></h2></li> <li><h2><b>Mousemove</b></h2></li> <li><h2><b>Mouseout</b></h2></li> </ul> <br /><center><img src="img43.jpg" alt=""></center> <br /><h2><b>JavaScript and HTML DOM Reference</b></h2> <ul><li><h2><b>JavaScript and HTML DOM Reference</b></h2></li> <li><h2> http://www.w3schools.com/jsref/ </h2></li> <li><h2>http://www.w3schools.com/jsref/dom_obj_document.asp http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_elements</h2></li> </ul> <br /><center><img src="img44.jpg" alt=""></center> </input></body></html></body></html></html></input></body></html></html></input></input></body></html></html></input></body></html></html></body></body></body></body></body></body></html></body>


    Yüklə 441 b.

    Dostları ilə paylaş:



Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©muhaz.org 2024
rəhbərliyinə müraciət
gir | qeydiyyatdan keç
    Ana səhifə
Dərs
Dərslik
Guide
Kompozisiya
Mücərrəd
Mühazirə
Qaydalar
Referat
Report
Request
Review

yükləyin