Apr 08

JavaScript DOM: Must knowledge to understand Ajax #Root

  • Understanding Javascript DOM is the first step to understand Ajax.
  • DO M provides many methods to access and edit individual components of a web-page/document. The methods are called getters.
  •  < div id = 'test' > 
Hello < /div >

    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 <p> 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. < p id=’test’ title=’justEtc Computer’ > Hello <p> : 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 yet

var 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=3463
Categories:Root
Tags:
Post Data:2016-07-09 08:41:20

Shop Online: https://www.ShopForSoul.com/
(Big Data, Cloud, Security, Machine Learning): Courses: http://Training.SitesTree.com
In Bengali: http://Bangla.SaLearningSchool.com
http://SitesTree.com
8112223 Canada Inc./JustEtc: http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning)
Shop Online: https://www.ShopForSoul.com/
Medium: https://medium.com/@SayedAhmedCanada