{"id":103,"date":"2022-10-19T11:46:39","date_gmt":"2022-10-19T11:46:39","guid":{"rendered":"https:\/\/devopssupport.in\/blog\/?p=103"},"modified":"2022-12-08T09:00:38","modified_gmt":"2022-12-08T09:00:38","slug":"javascript-domdocument-object-model","status":"publish","type":"post","link":"https:\/\/www.devopssupport.in\/blog\/javascript-domdocument-object-model\/","title":{"rendered":"JavaScript DOM(Document Object Model)"},"content":{"rendered":"\n

DOM <\/strong>is such a technology with the help of which we can completely control any html document with JavaScript.<\/p>\n\n\n\n

With the help of DOM we can access and change any tag, id, class or any attribute, even we can change any CSS style from DOM.<\/p>\n\n\n\n

METHODS<\/strong><\/p>\n\n\n\n

getElementById()<\/p>\n\n\n\n

getElementsByclassName()<\/p>\n\n\n\n

getElementsByTagsName()<\/p>\n\n\n\n

querySelector()<\/p>\n\n\n\n

querySelectorALL()<\/p>\n\n\n\n

first have to make HTML, CSS and JavaScript files(HTML, CSS source code down there )<\/p>\n\n\n\n

<\/p>\n\n\n\n

HTML source code:-<\/p>\n\n\n\n

https://gist.github.com\/AvinashKumar33\/7d3f01e81b510279354e5a86e5fdec04<\/code><\/pre>\n\n\n\n
CSS source code:-<\/p>\n\n\n\n
*{\n        margin: 0;\n        padding: 0;\n\n}\nbody{\n    font-family: Arial, Helvetica, sans-serif;\n}\nheader{\n    background-color: rgb(11, 241, 187);\n    color: white;\n    padding: 15px 0px 20px 40px;\n}\nh2#header-title{\n    padding: 10px 0px;\n\n}\ndiv#content{\n    padding: 15px 0px 0px 45px;\n}\ndiv#content >h2{\n    border-bottom: 5px solid rgb(37, 37, 33);\n    padding: 0px 20px 10px 5px;\n    display: inline-block;\n    width: 50%;\n}\nli.list-item{\n    border-bottom: 1px solid grey;\n    padding: 10px 0px;\n}\nform{\n    padding-top: 20px;\n\n}\nform > input, button{\n    padding: 5px;\n}<\/code><\/pre>\n\n\n\n
OUTPUT<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Example<\/strong>: Here we change (Name <\/strong>with ‘Earth<\/strong>‘) by the help of getElementById()<\/strong>.<\/p>\n\n\n\n
var headerTitle = \ndocument.getElementById('header-title');\n\nheaderTitle.textContent = 'Earth'; <\/code><\/pre>\n\n\n\n
Example<\/strong>: Here we do styling <\/strong>with the help of JavaScript <\/p>\n\n\n\n
var headerTitle = \ndocument.getElementById('header-title');\n\nheaderTitle.textContent = 'Computer courses';\nvar header = document.getElementById('header');\n\nheader.style.borderBottom = '10px solid #000';<\/code><\/pre>\n\n\n\n
OUTPUT<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Example<\/strong>: Here we doing changes in list-item value by help of getElementsByclassName()<\/strong><\/p>\n\n\n\n
var items = \ndocument.getElementsByClassName('list-item');\n\nitems[1].textContent = 'Russia';<\/code><\/pre>\n\n\n\n
OUTPUT<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Example<\/strong>: Here we using .getElementsByClassName() and changing in style in particular class element.<\/p>\n\n\n\n
var items = \ndocument.getElementsByClassName('list-item');\n\nitems[1].textContent = 'Russia';\nitems[2].textContent = 'Indonesia';\nitems[3].textContent = 'Egypt';\nitems[2].style.fontWeight = 'bold';\nitems[3].style.color = 'red';\nitems[2].style.backgroundColor = 'yellow'; <\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Example<\/strong>: Here we using .querySelector<\/strong> to change color of ID tagline.<\/p>\n\n\n\n
var headline = document.querySelector('#tagline');\nheadline.style.color = 'red';<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
DOM is such a technology with the help of which we can completely control any html document with JavaScript. With the help of DOM we can access… <\/p>\n","protected":false},"author":2,"featured_media":113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[25,46,45,47],"class_list":["post-103","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-dom","tag-javascript","tag-method"],"_links":{"self":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":4,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":204,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/posts\/103\/revisions\/204"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media\/113"}],"wp:attachment":[{"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopssupport.in\/blog\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}