{"id":68907,"date":"2021-08-08T04:10:03","date_gmt":"2021-08-08T08:10:03","guid":{"rendered":"http:\/\/bangla.salearningschool.com\/recent-posts\/javascript-dom-must-knowledge-to-understand-ajax-65\/"},"modified":"2021-08-08T04:10:03","modified_gmt":"2021-08-08T08:10:03","slug":"javascript-dom-must-knowledge-to-understand-ajax-65","status":"publish","type":"post","link":"http:\/\/bangla.sitestree.com\/?p=68907","title":{"rendered":"JavaScript DOM: Must knowledge to understand Ajax #65"},"content":{"rendered":"<ul>\n<li> Understanding Javascript DOM is the first step to understand Ajax.    <\/li>\n<li> DOM provides many methods to access and edit individual components of a web-page\/document. The methods are called getters.    <\/li>\n<li>\n<pre> <div id='test'> Hello <\/div><\/pre>\n<p> getElementById method can reference to this div element. var testDiv = document.getElementById(&#8220;test&#8221;); CSS #test{} refers to the same area of the document   <\/li>\n<li> getElementsByTagName: all the elements with the partcular tag name. Returns an array. var testTag = document.getElementsByTagName(&#8220;p&#8221;); just like p{} in CSS applies to all  tags.    <\/li>\n<li> testTag.length can be useful.   <\/li>\n<li> You can also cycle through the elements and take some actions\n<pre>      for(var i = 0; i &lt; testTag.length ; i++){         \/\/do something      }   <\/pre>\n<\/li>\n<li> Another example: document.getElementById(&#8220;test&#8221;).getElementsByTagName(&#8220;p&#8221;); [CSS #test p{} &#8211; will affect the same area in CSS]   <\/li>\n<li> DOM provides getAttribute () : can access the value of an attribute.\n<p id='test' title='justEtc Computer'> Hello <\/p>\n<p> : var title= document.getElementById(&#8220;test&#8221;).getAttribute(&#8220;title&#8221;);  <\/p>\n<li> Web-page can be thought of a set of interconected nodes. getElementById, getElementsByTagName, getAttribute &#8211; all help in accessing the nodes.   <\/li>\n<li> Three basic types of nodes in web-pages: element, text, attribute. element &#8211; building block, text = attribute = content<\/li>\n<li> Every node is contained under another node. So there will be parent and child relationships. parentNode, childNode &#8211; are corresponding methods for accessing parents and childs.<\/li>\n<li> Example: var test = document.getElementById(&#8220;test&#8221;); var testParent= test.parentNode; var testChild = test.childNodes; <\/li>\n<li> childNodes &#8211; returns an array  <\/li>\n<li> var allEle = document.getElementsByTagName(&#8220;*&#8221;); &#8211; a collection of all the elements of the web-page.  <\/li>\n<li> firstChild &#8211; first Child of an element, lastChild &#8211; lastChild of an element, previousSibling, nextSibling &#8211;  having same parent of the current node (next element), nodeValue, nodeValue &#8211; content of a node,   <\/li>\n<li> <b>DOM Setters<\/b> <\/li>\n<li> Using DOM, you can create elements dynamically and put it in the document. createElement() &#8211; method serves the purpose<\/li>\n<li>\n<pre>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<\/pre>\n<\/li>\n<li> setAttribute() &#8211; method can be used to set the attributes of a node. example: paragraph.setAttribute(&#8220;title&#8221;, &#8220;introduction&#8221;); <\/li>\n<li> appendChild() &#8211; append one node under another node;<\/li>\n<li>\n<pre>    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);<\/pre>\n<\/li>\n<li> removeChild() &#8211; helps to remove a child node from a parent node <\/li>\n<\/li>\n<\/ul>\n<p> From: http:\/\/sitestree.com\/?p=4968<br \/> Categories:65<br \/>Tags:<br \/> Post Data:2008-02-06 07:27:43<\/p>\n<pre><code>    Shop Online: &lt;a href='https:\/\/www.ShopForSoul.com\/' target='new' rel=\"noopener\"&gt;https:\/\/www.ShopForSoul.com\/&lt;\/a&gt;\n    (Big Data, Cloud, Security, Machine Learning): Courses: &lt;a href='http:\/\/Training.SitesTree.com' target='new' rel=\"noopener\"&gt; http:\/\/Training.SitesTree.com&lt;\/a&gt; \n    In Bengali: &lt;a href='http:\/\/Bangla.SaLearningSchool.com' target='new' rel=\"noopener\"&gt;http:\/\/Bangla.SaLearningSchool.com&lt;\/a&gt;\n    &lt;a href='http:\/\/SitesTree.com' target='new' rel=\"noopener\"&gt;http:\/\/SitesTree.com&lt;\/a&gt;\n    8112223 Canada Inc.\/JustEtc: &lt;a href='http:\/\/JustEtc.net' target='new' rel=\"noopener\"&gt;http:\/\/JustEtc.net (Software\/Web\/Mobile\/Big-Data\/Machine Learning) &lt;\/a&gt;\n    Shop Online: &lt;a href='https:\/\/www.ShopForSoul.com'&gt; https:\/\/www.ShopForSoul.com\/&lt;\/a&gt;\n    Medium: &lt;a href='https:\/\/medium.com\/@SayedAhmedCanada' target='new' rel=\"noopener\"&gt; https:\/\/medium.com\/@SayedAhmedCanada &lt;\/a&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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(&#8220;test&#8221;); CSS #test{} refers to the same area of the document getElementsByTagName: all the elements &hellip; <\/p>\n<p><a class=\"more-link btn\" href=\"http:\/\/bangla.sitestree.com\/?p=68907\">Continue reading<\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1917],"tags":[],"class_list":["post-68907","post","type-post","status-publish","format-standard","hentry","category-fromsitestree-com","item-wrap"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":24402,"url":"http:\/\/bangla.sitestree.com\/?p=24402","url_meta":{"origin":68907,"position":0},"title":"JavaScript DOM: Must knowledge to understand Ajax #Root","author":"Author-Check- Article-or-Video","date":"April 8, 2021","format":false,"excerpt":"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 =\u2026","rel":"","context":"In &quot;FromSitesTree.com&quot;","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":70147,"url":"http:\/\/bangla.sitestree.com\/?p=70147","url_meta":{"origin":68907,"position":1},"title":"Random Notes on JavaScript\/HTML #13","author":"Author-Check- Article-or-Video","date":"August 27, 2021","format":false,"excerpt":"This short-note will make sense, only if you already have some javascript sense. It can be used - just to refresh memory, once in a while. My JavaScript Experience? started on 2000, conducted a JavaScript Training Session on 2001, wrote a book for a training institute on JavaScript on 2001,\u2026","rel":"","context":"In &quot;FromSitesTree.com&quot;","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":24404,"url":"http:\/\/bangla.sitestree.com\/?p=24404","url_meta":{"origin":68907,"position":2},"title":"Ajax: An Overview #Root","author":"Author-Check- Article-or-Video","date":"April 8, 2021","format":false,"excerpt":"Ajax: dynamically changes a portion of the current web-page without refreshing t he total web-page. Resembles the way IFrame works. So far I know, google uses IFrame to display\/refresh maps in web-pages XMLHttpRequest is the object that serves the purpose of Ajax The way it works: create an instance of\u2026","rel":"","context":"In &quot;FromSitesTree.com&quot;","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7681,"url":"http:\/\/bangla.sitestree.com\/?p=7681","url_meta":{"origin":68907,"position":3},"title":"AJAX","author":"Author-Check- Article-or-Video","date":"March 28, 2015","format":false,"excerpt":"AJAX -------- \u0993\u09df\u09c7\u09ac\u09c7, \u0993\u09df\u09c7\u09ac \u09a1\u09c7\u09ad\u09c7\u09b2\u09aa\u09be\u09b0 \u09a5\u09c7\u0995\u09c7 \u09b6\u09c1\u09b0\u09c1 \u0995\u09b0\u09c7 \u09b8\u09be\u09a7\u09be\u09b0\u09a3 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0\u0995\u09be\u09b0\u09bf \u09aa\u09b0\u09cd\u09af\u09a8\u09cd\u09a4, \u09b8\u09ac\u09be\u09b0 \u0995\u09be\u099b\u09c7 \u0997\u09a4 \u0995\u09df\u09c7\u0995 \u09ac\u099b\u09b0 \u09a7\u09b0\u09c7 \u09af\u09c7 \u09b6\u09ac\u09cd\u09a6\u099f\u09bf \u0997\u09c1\u099e\u09cd\u099c\u09a8\u09c7 \u09aa\u09b0\u09bf\u09a3\u09a4 \u09b9\u09df\u09c7\u099b\u09c7 \u09a4\u09be \u09b9\u099a\u09cd\u099b\u09c7 AJAX . \u09b9\u09be\u099c\u09be\u09b0\u09cb \u0993\u09df\u09c7\u09ac application \u09a4\u09c8\u09b0\u09bf \u09b9\u09df\u09c7\u099b\u09c7 \u0993 \u09b9\u099a\u09cd\u099b\u09c7 \u098f\u0987 \u09aa\u09cd\u09b0\u09af\u09c1\u0995\u09cd\u09a4\u09bf\u09b0 \u0989\u09aa\u09b0 \u09ad\u09bf\u09a4\u09cd\u09a4\u09bf \u0995\u09b0\u09c7\u0964 \u0995\u09bf\u09a8\u09cd\u09a4\u09c1 \u0995\u09c0 \u098f\u0987 AJAX ? Ajax = \u09aa\u09c1\u09b0\u09cb\u09a8 \u09aa\u09cd\u09b0\u09af\u09c1\u0995\u09cd\u09a4\u09bf\u09b0 \u09a8\u09a4\u09c1\u09a8 \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 Ajax\u2026","rel":"","context":"In &quot;\u099c\u09be\u09ad\u09be&quot;","block_context":{"text":"\u099c\u09be\u09ad\u09be","link":"http:\/\/bangla.sitestree.com\/?cat=266"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":68909,"url":"http:\/\/bangla.sitestree.com\/?p=68909","url_meta":{"origin":68907,"position":4},"title":"Ajax: An Overview #65","author":"Author-Check- Article-or-Video","date":"August 8, 2021","format":false,"excerpt":"Ajax: dynamically changes a portion of the current web-page without refreshing the total web-page. Resembles the way IFrame works. So far I know, google uses IFrame to display\/refresh maps in web-pages XMLHttpRequest is the object that serves the purpose of Ajax The way it works: create an instance of the\u2026","rel":"","context":"In &quot;FromSitesTree.com&quot;","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":27156,"url":"http:\/\/bangla.sitestree.com\/?p=27156","url_meta":{"origin":68907,"position":5},"title":"Javascript : Miscellaneous Code #Programming Code Examples #Java\/J2EE\/J2ME #Ajax","author":"Author-Check- Article-or-Video","date":"May 12, 2021","format":false,"excerpt":"var browser=navigator.appName; var b_version=navigator.appVersion; <a href=\"http:\/\/www.justetc.net\" target=\"_blank\"> <img border=\"0\" alt=\"hello\" src=\"b_pink.gif\" id=\"b1\" width=\"26\" height=\"26\" onmouseover=\"mouseOver()\" onmouseout=\"mouseOut()\" \/> Place the following code under script tag\/in a javascript file function mouseOver() { document.getElementById(\"b1\").src =\"b_blue.gif\"; } function mouseOut() { document.getElementById(\"b1\").src =\"b_pink.gif\"; } <map name=\"planetmap\"> <area shape =\"rect\" coords =\"0,0,82,126\" onMouseOver=\"writeText('You are over the\u2026","rel":"","context":"In &quot;FromSitesTree.com&quot;","block_context":{"text":"FromSitesTree.com","link":"http:\/\/bangla.sitestree.com\/?cat=1917"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/68907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=68907"}],"version-history":[{"count":0,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/68907\/revisions"}],"wp:attachment":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=68907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=68907"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=68907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}