{"id":24402,"date":"2021-04-08T23:10:11","date_gmt":"2021-04-09T03:10:11","guid":{"rendered":"http:\/\/bangla.salearningschool.com\/recent-posts\/javascript-dom-must-knowledge-to-understand-ajax-root\/"},"modified":"2021-04-08T23:10:11","modified_gmt":"2021-04-09T03:10:11","slug":"javascript-dom-must-knowledge-to-understand-ajax-root","status":"publish","type":"post","link":"http:\/\/bangla.sitestree.com\/?p=24402","title":{"rendered":"JavaScript DOM: Must knowledge to understand Ajax #Root"},"content":{"rendered":"<ul>\n<li>Understanding Javascript DOM is the first step to understand Ajax.<\/li>\n<li>DO M provides many methods to access and edit individual components of a web-page\/document. The methods are called getters.<\/li>\n<li>\n<pre> &lt; div id = 'test' &gt; \r\nHello &lt; \/div &gt;<\/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 &lt;p&gt; 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++)\r\n{\r\n         \/\/do something\r\n}\r\n<\/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. &lt; p id=&#8217;test&#8217; title=&#8217;justEtc Computer&#8217; &gt; Hello &lt;p&gt; : var title= document.getElementById(&#8220;test&#8221;).getAttribute(&#8220;title&#8221;);<\/li>\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\"); - \r\nelement created - element node - but not inserted in the document yet\r\n\r\nvar textNode = document.createTextNode(\"A new text node from DOM!\"); \r\n- creates a text node\r\n<\/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\");\r\n\r\n    var textNode = document.createTextElement(\"How is it going?\");\r\n\r\n     pNode.setAttribute(\"title\",\"Test Title\");\r\n\r\n     pNode.appendChild(textNode);     \r\n\r\n     var testDiv = document.getElementById(\"testDiv\");\r\n\r\n     testDiv.appendChild(pNode);\r\n\r\n<\/pre>\n<\/li>\n<li>removeChild() &#8211; helps to remove a child node from a parent node<\/li>\n<\/ul>\n<p> From: http:\/\/sitestree.com\/?p=3463<br \/> Categories:Root<br \/>Tags:<br \/> Post Data:2016-07-09 08:41:20<\/p>\n<p>\t\tShop Online: <a href='https:\/\/www.ShopForSoul.com\/' target='new' rel=\"noopener\">https:\/\/www.ShopForSoul.com\/<\/a><br \/>\n\t\t(Big Data, Cloud, Security, Machine Learning): Courses: <a href='http:\/\/Training.SitesTree.com' target='new' rel=\"noopener\"> http:\/\/Training.SitesTree.com<\/a><br \/>\n\t\tIn Bengali: <a href='http:\/\/Bangla.SaLearningSchool.com' target='new' rel=\"noopener\">http:\/\/Bangla.SaLearningSchool.com<\/a><br \/>\n\t\t<a href='http:\/\/SitesTree.com' target='new' rel=\"noopener\">http:\/\/SitesTree.com<\/a><br \/>\n\t\t8112223 Canada Inc.\/JustEtc: <a href='http:\/\/JustEtc.net' target='new' rel=\"noopener\">http:\/\/JustEtc.net (Software\/Web\/Mobile\/Big-Data\/Machine Learning) <\/a><br \/>\n\t\tShop Online: <a href='https:\/\/www.ShopForSoul.com'> https:\/\/www.ShopForSoul.com\/<\/a><br \/>\n\t\tMedium: <a href='https:\/\/medium.com\/@SayedAhmedCanada' target='new' rel=\"noopener\"> https:\/\/medium.com\/@SayedAhmedCanada <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. &lt; div id = &#8216;test&#8217; &gt; Hello &lt; \/div &gt; getElementById method can reference to this div element. var testDiv = document.getElementById(&#8220;test&#8221;); CSS #test{} refers to &hellip; <\/p>\n<p><a class=\"more-link btn\" href=\"http:\/\/bangla.sitestree.com\/?p=24402\">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_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1917],"tags":[],"class_list":["post-24402","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":68907,"url":"http:\/\/bangla.sitestree.com\/?p=68907","url_meta":{"origin":24402,"position":0},"title":"JavaScript DOM: Must knowledge to understand Ajax #65","author":"Author-Check- Article-or-Video","date":"August 8, 2021","format":false,"excerpt":"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\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":24402,"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":7681,"url":"http:\/\/bangla.sitestree.com\/?p=7681","url_meta":{"origin":24402,"position":2},"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":24404,"url":"http:\/\/bangla.sitestree.com\/?p=24404","url_meta":{"origin":24402,"position":3},"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":21628,"url":"http:\/\/bangla.sitestree.com\/?p=21628","url_meta":{"origin":24402,"position":4},"title":"Css selectors by Example #Web Development #CSS #Root #By Sayed Ahmed","author":"Author-Check- Article-or-Video","date":"March 3, 2021","format":false,"excerpt":"\/* the style will be applied to all elements using intro for class attribute*\/ .intro { background-color:yellow; } \/* the style will be applied to the element with id attribute set to firstname*\/ #firstname { background-color:yellow; } \/* the style will be applied to all elements*\/ * { background-color:yellow; }\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":68909,"url":"http:\/\/bangla.sitestree.com\/?p=68909","url_meta":{"origin":24402,"position":5},"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":[]}],"_links":{"self":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/24402","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=24402"}],"version-history":[{"count":0,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=\/wp\/v2\/posts\/24402\/revisions"}],"wp:attachment":[{"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=24402"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/bangla.sitestree.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=24402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}