{"flag":true,"single":true,"pageTitle":"DOM (Document Object Modal) in javascript","post":{"id":208,"user_id":"1","slug":"dom-document-object-modal-in-javascript-fecq","title":"DOM (Document Object Modal) in javascript","body":"<p><strong>DOCUMENT.METHOD().PROPERTY:<\/strong><\/p>\r\n<p>document.getElementById(\"demo\").innerHTML = \"Hello World!\";<\/p>\r\n<p><strong>FIND HTML ELEMENTS by id,tagname,classname and query ,form<\/strong><\/p>\r\n<ul>\r\n<li>document.getElementById(\"intro\") Find an element by id=\"intro\"<\/li>\r\n<li>document.getElementsByTagName(\"p\") All &lt;p&gt; tags<\/li>\r\n<li>document.getElementsByClassName(\"intro\") Find all elements by class=\"intro\"<\/li>\r\n<li>var x = document.querySelectorAll(\"p.intro\"); \/\/specific selector x[0],x[1]<\/li>\r\n<li>var x = document.forms[\"frm1\"];\/\/ x.elements[0]; \/\/frm1 is id of form<\/li>\r\n<\/ul>\r\n<p><strong>CHANGE HTML ELEMENTS<\/strong><\/p>\r\n<p><strong>element.innerHTML =&nbsp; new html content <\/strong><\/p>\r\n<p>ie&nbsp; document.getElementById(\"p1\").innerHTML = \"New text!\";<\/p>\r\n<p><strong>element.attribute = new value <\/strong><\/p>\r\n<p>ie&nbsp; document.getElementById(\"myImage\").src = \"landscape.jpg\";<\/p>\r\n<p><strong>element.style.property =<\/strong><\/p>\r\n<p>document.getElementById(\"p2\").style.color = \"blue\";<\/p>\r\n<p><strong>element.setAttribute(attribute, value);<\/strong><\/p>\r\n<p>&nbsp;<\/p>\r\n<p><strong>ADD OR DELETE ELEMENTS<\/strong><\/p>\r\n<ul>\r\n<li>document.createElement(element)<\/li>\r\n<li>document.removeChild(element)<\/li>\r\n<li>document.appendChild(element)<\/li>\r\n<li>document.replaceChild(new, old)<\/li>\r\n<li>document.write(text);<\/li>\r\n<\/ul>\r\n<p><strong>ADD EVENTS:<\/strong><\/p>\r\n<p>document.getElementById(id).onclick = function(){code}<\/p>\r\n<p><strong>DOCUMENT PROPERTIES<\/strong><\/p>\r\n<ul>\r\n<li>document.anchors<\/li>\r\n<li>document.baseURI<\/li>\r\n<li>document.body<\/li>\r\n<li>document.cookie<\/li>\r\n<li>document.doctype<\/li>\r\n<li>document.documentElement \/\/&lt;HTML&gt;<\/li>\r\n<li>document.documentMode<\/li>\r\n<li>document.documentURI<\/li>\r\n<li>document.domain<\/li>\r\n<li>document.domConfig<\/li>\r\n<li>document.embeds<\/li>\r\n<li>document.forms<\/li>\r\n<li>document.head<\/li>\r\n<li>document.images \/\/&lt;IMG&gt;<\/li>\r\n<li>document.implementation<\/li>\r\n<li>document.inputEncodin<\/li>\r\n<li>document.lastModified<\/li>\r\n<li>document.links<\/li>\r\n<li>document.readyState<\/li>\r\n<li>document.referrer<\/li>\r\n<li>document.scripts &lt;SCRIPT&gt;<\/li>\r\n<li>document.strictErrorChecking<\/li>\r\n<li>document.title<\/li>\r\n<li>document.URL<\/li>\r\n<\/ul>\r\n<p><strong>NODES:: every thing in js is like node<\/strong><\/p>\r\n<p>var myTitle = document.getElementById(\"demo\").firstChild.nodeValue;<\/p>\r\n<ul>\r\n<li>parentNode<\/li>\r\n<li>childNodes[nodenumber]<\/li>\r\n<li>firstChild<\/li>\r\n<li>lastChild<\/li>\r\n<li>nextSibling<\/li>\r\n<li>previousSibling<\/li>\r\n<\/ul>\r\n<p><strong>GET WHOLE SOURCE CODE:<\/strong><\/p>\r\n<p>document.body - The body of the document<\/p>\r\n<p>document.documentElement - The full document<\/p>\r\n<p>document.getElementById(\"id01\").nodeName;<\/p>\r\n<p><strong>NODE TYPES:<\/strong><\/p>\r\n<p>document.getElementById(\"id01\").nodeType;<\/p>\r\n<p>Node &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Type Example<\/p>\r\n<p>ELEMENT_NODE 1 &nbsp; &nbsp; &nbsp; &nbsp;&lt;h1 class=\"heading\"&gt;W3Schools&lt;\/h1&gt;<\/p>\r\n<p>ATTRIBUTE_NODE 2 &nbsp; &nbsp; &nbsp; &nbsp; class = \"heading\" (deprecated)<\/p>\r\n<p>TEXT_NODE &nbsp; &nbsp; &nbsp; &nbsp; 3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;W3Schools<\/p>\r\n<p>COMMENT_NODE 8 &nbsp; &nbsp; &nbsp; &nbsp; &lt;!-- This is a comment --&gt;<\/p>\r\n<p>DOCUMENT_NODE 9 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;The HTML document itself (the parent of &lt;html&gt;)<\/p>\r\n<p>DOCUMENT_TYPE_NODE 10 &lt;!Doctype html&gt;<\/p>\r\n<p><strong>NOTES:<\/strong><\/p>\r\n<ul>\r\n<li>Document IS web page.<\/li>\r\n<li>method used to access element,<\/li>\r\n<li>property used to access content or change&nbsp;<\/li>\r\n<\/ul>","category_id":"12","is_private":"0","created_at":"2023-10-13T01:37:14.000000Z","updated_at":"2023-10-13T01:37:14.000000Z","category":{"id":12,"user_id":"1","name":"Javascript","slug":"javascript-xplw","parent_id":null,"created_at":"2023-03-23T02:24:43.000000Z","updated_at":"2023-03-23T02:24:43.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"DOCUMENT.METHOD().PROPERTY: document.getElementById(\"demo\").innerHTML = \"Hello World!\"; FIND HTML ELEMENTS by id,tagname,classname and query - DOM (Document Object Modal) in javascript (Updated: October 13, 2023) - Read more about DOM (Document Object Modal) in javascript at my programming site [SITE]","categories":[]}