{"id":2585,"date":"2021-08-04T18:42:40","date_gmt":"2021-08-04T13:12:40","guid":{"rendered":"http:\/\/uitutorials.in\/wp\/?p=2585"},"modified":"2021-08-10T18:29:34","modified_gmt":"2021-08-10T12:59:34","slug":"dom","status":"publish","type":"post","link":"https:\/\/uitutorials.in\/wp\/dom\/","title":{"rendered":"DOM"},"content":{"rendered":"
<div id=\"page\">\r\n      <h1 id=\"header\">TO DO LIST<\/h1>\r\n      <ul>\r\n        <h2>DataFlair\u2019s JavaScript Tutorial<\/h2><DataFlair\u2019s>\r\n        <li id=\"one\" class=\"mandatory\">Learning the concepts<\/li>\r\n        <li id=\"two\" class=\"mandatory\">Practising the codes<\/li>\r\n        <li id=\"three\">Taking quizzes<\/li>\r\n        <li id=\"four\">Solving Interview Questions<\/li>\r\n      <\/ul>\r\n      <!-- JavaScript code -->\r\n<\/div><\/code><\/pre>\n
\r\n1. Creation of the DOM tree\r\n2. Manipulation of the DOM tree\r\n<\/pre>\n
Every element, attribute, and text content in the HTML creates its own DOM node in the tree. A DOM tree consists of four main types of nodes:<\/p>\n
Document node:<\/strong>
\nThis is added at the top of the tree and represents the entire page in the browser. As stated above, it is the starting point in the DOM tree; you need to navigate via the document node to access any other node in your DOM tree.<\/p>\n
Element nodes:<\/strong>
\nAll the HTML elements like heading tags (<h1> to <h6>) and paragraph tags (<p>) in the page create an element node in the tree. You use these nodes to gain access to the elements\u2019 attribute and text nodes.<\/p>\n
Attribute nodes:<\/strong>
\nWhen the opening tags in the HTML document contain attributes, the tree represents them as attribute nodes. These are not the children of the element nodes but a part of them.<\/p>\n
Text nodes:<\/strong>
\nOnce you have access to the element node, you can reach the text content within that element, stored inside the text nodes of the DOM tree. These nodes cannot have child nodes. Thus, a text node always creates a new branch in the DOM tree, and no further branches come out of it.<\/p>\n
Methods to Select an INDIVIDUAL Element Node<\/h3>\n
Following are the methods to select an individual element in the tree:<\/p>\n
getElementById(\u2018id\u2019):<\/strong> Uses the unique value of the element\u2019s id attribute. The HTML must have an id attribute for the method to select it.
\nFor example \u2013 getElementById(\u2018one\u2019)<\/p>\n
querySelector(\u2018css selector\u2019):<\/strong> Uses a CSS selector, returns the first matching element.
\nFor example \u2013 querySelector(\u2018h1\u2019)<\/p>\n
<script type=\"text\/JavaScript\">\r\n                       document.getElementById('one').style.color=\"maroon\"; \/\/change font color\r\n        document.querySelector(\"h1\").style.backgroundColor = \"blue\"; \/\/change background color\r\n<\/script><\/code><\/pre>\n
Methods to Select Multiple Elements (NodeLists)<\/h3>\n
There are three common ways to select multiple elements in the tree:<\/p>\n
getElementsByClassName(): <\/strong>Selects all the elements that have a specified value for the class attribute.
\nFor example \u2013 getElementsByClassName(\u2018mandatory\u2019)<\/p>\n
getElementsByTagName():<\/strong> Selects all the elements that have the specified tag names.
\nFor example \u2013 getElementsByTagName(\u2018h1\u2019)<\/p>\n
querySelectorAll():<\/strong> Uses a CSS selector, returns all the matching elements.
\nFor example \u2013 querySelectorAll(\u2018li.mandatory\u2019)<\/p>\n
<script type=\"text\/JavaScript\">\r\n        var list_qs = document.querySelectorAll(\"li.mandatory\"); \/\/NodeList\r\n        list_qs[0].style.backgroundColor = \"blue\"; \/\/change background color\r\n        var list_cn = document.getElementsByClassName('mandatory'); \/\/NodeList\r\n        list_cn[0].style.color=\"white\"; \/\/change font color\r\n        var list_tn = document.getElementsByTagName('h1'); \/\/NodeList\r\n        list_tn[0].style.color=\"gray\"; \/\/change font color\r\n<\/script><\/code><\/pre>\n
innerText, textcontent, innerHTML<\/h3>\n
Both these properties replace the entire content of the element, including all the markup present. But you should avoid using innerText since it is not part of any standard. Also, this method slows the speed of content loading on the page.<\/p>\n
The innerHTML property gets the content of the element and returns it as one long string, including the markup it contains. But you should be careful of where you use this property since there are some security risks associated with it.<\/p>\n
\r\n* innerText was non-standard, textContent was standardized earlier.\r\n* innerText returns the visible text contained in a node, while textContent returns the full text. \r\n -For example, on the following HTML <span>Hello <span style=\"display: none;\">World<\/span><\/span>, innerText will return 'Hello', while textContent will return 'Hello World'.\r\n* As a result, innerText is much more performance-heavy: it requires layout information to return the result.\r\n* innerText is defined only for HTMLElement objects, while textContent is defined for all Node objects.\r\n* Another difference in behavior between innerText and textContent: If you change the text-transform of an element by CSS, it will affect the result of 'innerText', but not the result of textContent. For example: innerText of <div style=\"text-transform: uppercase;\">Hello World<\/div> will be \"HELLO WORLD\", while textContent will be \"Hello World\"\r\n<\/pre>\n
<div id = \"page\">\r\n      <h3>Accessing and Updating Element Content<\/h3>\r\n      <p id = \"p\"><em>DataFlair<\/em> tutorial<\/p>\r\n      <p><em id = \"p1\"><\/em><\/p>\r\n      <p><em id = \"p2\"><\/em><\/p>\r\n      <p><em id = \"p3\"><\/em><\/p>\r\n      <!-- JavaScript Code -->\r\n      <script>\r\n        document.write(\"<b>Accessing elements:<\/b><\/br>\");\r\n        var x = document.getElementById('p').textContent;\r\n        document.write(\"textContent: \" + x + \"<\/br>\");\r\n        var y = document.getElementById('p').innerText;\r\n        document.write(\"innerText: \" + y + \"<\/br>\");\r\n        var z = document.getElementById('p').innerHTML;\r\n        document.write(\"innerHTML: \" + z + \"<\/br>\");\r\n        \/\/updating elements\r\n        document.getElementById('p1').textContent = \"<strong>JavaScript<\/strong> tutorials\";\r\n        document.getElementById('p2').innerText = \"<strong>JavaScript<\/strong> quizzes\";\r\n        document.getElementById('p3').innerHTML = \"<strong>JavaScript<\/strong> interview questions\";\r\n      <\/script>\r\n    <\/div><\/code><\/pre>\n
add\/remove HTML content is DOM Manipulation.<\/h3>\n
Another technique to add\/remove<\/strong> HTML content is DOM Manipulation. To add HTML content to your webpage, you need to follow the three steps discussed below:<\/p>\n
Create a new element using createElement().
\nGive it content by creating a text node using createTextNode() and adding it to the element using the appendChild() method.
\nAdd the element to the DOM tree by finding the location and then using appendChild().
\nTo remove an element from the webpage, the steps are as follows:<\/p>\n
Store the element you want to remove in a variable.
\nStore the parent of that element in another variable.
\nRemove the element from its containing element using the removeChild() method.
\nLet\u2019s implement these methods with the help of a code. We will use the same HTML and CSS code we discussed at the beginning of this tutorial. All you need to do is change the JavaScript in your program. In this example, we will add a paragraph <p> tag in the page, and remove the <h1> tag from it.<\/p>\n
<script type=\"text\/JavaScript\">\r\n        \/\/Adding new element\r\n        var newEl = document.createElement('p'); \/\/create element node\r\n        var newText = document.createTextNode('Node added using DOM manipulation.'); \/\/create text node\r\n        newEl.appendChild(newText); \/\/add text node to element node\r\n        var position = document.getElementById(\"page\"); \/\/find the position where you want to add the node\r\n        position.appendChild(newEl); \/\/add element in that position\r\n        \/\/Removing an element\r\n        var removeEl = document.getElementById('header'); \/\/store the element you want to remove\r\n        var containerEl = document.getElementById('page'); \/\/find the element which contains the above element\r\n        containerEl.removeChild(removeEl); \/\/remove the element\r\n<\/script><\/code><\/pre>\n
Data-Flair<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<div id=”page”> <h1 id=”header”>TO DO LIST<\/h1> <ul> <h2>DataFlair\u2019s JavaScript Tutorial<\/h2><DataFlair\u2019s> <li id=”one” class=”mandatory”>Learning the concepts<\/li> <li id=”two” class=”mandatory”>Practising the codes<\/li> <li id=”three”>Taking quizzes<\/li> <li id=”four”>Solving Interview Questions<\/li> <\/ul> <!– JavaScript code –> <\/div> 1. Creation of the DOM tree 2. Manipulation of the DOM tree Every element, attribute, and text<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[153],"class_list":["post-2585","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-dom","ct-col-2"],"_links":{"self":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/comments?post=2585"}],"version-history":[{"count":4,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2585\/revisions"}],"predecessor-version":[{"id":2608,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/2585\/revisions\/2608"}],"wp:attachment":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/media?parent=2585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/categories?post=2585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/tags?post=2585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}