- 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
