Aug 08

JavaScript DOM: Must knowledge to understand Ajax #65

  • Understanding Javascript DOM is the first step to understand Ajax.
  • DOM provides many methods to access and edit individual components of a web-page/document. The methods are called getters. 
  •  
     Hello

    getElementById method can reference to this div element. var testDiv = document.getElementById(“test”); CSS #test{} refers to the same area of the document

  • getElementsByTagName: all the elements with the partcular tag name. Returns an array. var testTag = document.getElementsByTagName(“p”); just like p{} in CSS applies to all tags.
  • testTag.length can be useful.
  • You can also cycle through the elements and take some actions 
          for(var i = 0; i < testTag.length ; i++){         //do something      }
  • Another example: document.getElementById(“test”).getElementsByTagName(“p”); [CSS #test p{} – will affect the same area in CSS]
  • DOM provides getAttribute () : can access the value of an attribute.

    Hello

    : var title= document.getElementById(“test”).getAttribute(“title”);

  • Web-page can be thought of a set of interconected nodes. getElementById, getElementsByTagName, getAttribute – all help in accessing the nodes.
  • Three basic types of nodes in web-pages: element, text, attribute. element – building block, text = attribute = content
  • Every node is contained under another node. So there will be parent and child relationships. parentNode, childNode – are corresponding methods for accessing parents and childs.
  • Example: var test = document.getElementById(“test”); var testParent= test.parentNode; var testChild = test.childNodes;
  • childNodes – returns an array
  • var allEle = document.getElementsByTagName(“*”); – a collection of all the elements of the web-page.
  • firstChild – first Child of an element, lastChild – lastChild of an element, previousSibling, nextSibling – having same parent of the current node (next element), nodeValue, nodeValue – content of a node,
  • DOM Setters
  • Using DOM, you can create elements dynamically and put it in the document. createElement() – method serves the purpose
  • var paragraph = document.createElement("p"); - element created - element node - but not inserted in the document yetvar textNode = document.createTextNode("A new text node from DOM!"); - creates a text node
  • setAttribute() – method can be used to set the attributes of a node. example: paragraph.setAttribute(“title”, “introduction”);
  • appendChild() – append one node under another node;
  •     var pNode = document.createElement("p");    var textNode = document.createTextElement("How is it going?");     pNode.setAttribute("title","Test Title");     pNode.appendChild(textNode);          var testDiv = document.getElementById("testDiv");     testDiv.appendChild(pNode);
  • removeChild() – helps to remove a child node from a parent node

From: http://sitestree.com/?p=4968
Categories:65
Tags:
Post Data:2008-02-06 07:27:43

    Shop Online: <a href='https://www.ShopForSoul.com/' target='new' rel="noopener">https://www.ShopForSoul.com/</a>
    (Big Data, Cloud, Security, Machine Learning): Courses: <a href='http://Training.SitesTree.com' target='new' rel="noopener"> http://Training.SitesTree.com</a> 
    In Bengali: <a href='http://Bangla.SaLearningSchool.com' target='new' rel="noopener">http://Bangla.SaLearningSchool.com</a>
    <a href='http://SitesTree.com' target='new' rel="noopener">http://SitesTree.com</a>
    8112223 Canada Inc./JustEtc: <a href='http://JustEtc.net' target='new' rel="noopener">http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning) </a>
    Shop Online: <a href='https://www.ShopForSoul.com'> https://www.ShopForSoul.com/</a>
    Medium: <a href='https://medium.com/@SayedAhmedCanada' target='new' rel="noopener"> https://medium.com/@SayedAhmedCanada </a>