{"id":20196227,"url":"https://github.com/shaikrasheed99/javascript-dom-topics","last_synced_at":"2025-03-03T08:13:57.365Z","repository":{"id":65578505,"uuid":"594027607","full_name":"shaikrasheed99/javascript-dom-topics","owner":"shaikrasheed99","description":"Examples of JavaScript DOM.","archived":false,"fork":false,"pushed_at":"2023-04-17T13:13:58.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T19:39:07.459Z","etag":null,"topics":["document-object-model","html","html-css","html-css-javascript","javascript","javascript-dom"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shaikrasheed99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-27T12:32:12.000Z","updated_at":"2023-02-03T10:20:49.000Z","dependencies_parsed_at":"2025-01-13T19:35:18.829Z","dependency_job_id":"4d4f772d-42fd-4073-b951-dc7148414ecb","html_url":"https://github.com/shaikrasheed99/javascript-dom-topics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikrasheed99%2Fjavascript-dom-topics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikrasheed99%2Fjavascript-dom-topics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikrasheed99%2Fjavascript-dom-topics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaikrasheed99%2Fjavascript-dom-topics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaikrasheed99","download_url":"https://codeload.github.com/shaikrasheed99/javascript-dom-topics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241629769,"owners_count":19993710,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["document-object-model","html","html-css","html-css-javascript","javascript","javascript-dom"],"created_at":"2024-11-14T04:22:37.750Z","updated_at":"2025-03-03T08:13:57.337Z","avatar_url":"https://github.com/shaikrasheed99.png","language":"HTML","readme":"# JavaScript - Document Object Model\n\nDocument Object Model (DOM) is an programming interface for web document. \n\nWhen a web page is loaded, the browser creates a Document Object Model of the page.\n\nThe HTML DOM model is constructed as a **tree** of **Objects**. \n\nSo that JavaScript can get access to change all the elements of the document.\n\nDocument will have methods and properties.\n* `methods` are actions performed on document.\n* `properties` are values of document that can be set or change.\n\n## Selectors\n\n* `document.querySelector()`\n    ```javascript\n    const paragraph = document.querySelector('p'); // html tag\n    const paragraph = document.querySelector('.class-name'); // class \n    const paragraph = document.querySelector('#id-name'); // id\n    ```\n    * select the element based on the type of input given to the function.\n    * have to use CSS selector as input that includes html tags, class selectors or id selectors.\n    * in above example, html `\u003cp\u003e` tag will be selected and returns the it. \n\n* `document.querySelectorAll()`\n    ```javascript\n    const paragraph = document.querySelectorAll('p'); // html tag\n    const paragraph = document.querySelectorAll('.class-name'); // class \n    const paragraph = document.querySelectorAll('#id-name'); // id\n    ```\n    * select all the elements based on the type of input given to the function.\n    * have to use CSS selector as input that includes html tags, class selectors or id selectors.\n    * in above example, all the html `\u003cp\u003e` tag will be selected and returns them as `NodeList`.\n    * we can easily traverse all the elements of the `NodeList` using any loop.\n\n* `document.getElementById()`\n    ```javascript\n    const paragraph = document.getElementById('para');\n    ```\n    * select the element based on the name of the id.\n    * in above example, `para` id will be selected and returns the it. \n\n* `document.getElementsByClassName()`\n    ```javascript\n    const paragraph = document.getElementsByClassName('para');\n    ```\n    * select the element based on the name of the class.\n    * in above example, all the `para` classes will be selected and returns them as `HTMLCollection`.\n    * `HTMLCollection` is a array but we cannot loop it through `for-each` loop.\n    * can be accessed through indexes.\n\n* `documetn.getElementsByTagName()`\n    ```javascript\n    const paragraph = document.getElementsByTagName('p');\n    ```\n    * select the element based on the name of the html tag.\n    * in above example, all the html `p` tags will be selected and returns them as `HTMLCollection`.\n    * `HTMLCollection` is a array but we cannot loop it through `for-each` loop.\n    * can be accessed through indexes.\n\n## Properties\n\n* `innerHTML`\n    * used to set or return the whole element with html tags.\n* `innerText`\n    * used to set or return the text inside element.\n    * it return all its children except CSS hidden text spacing and tags.\n* `textContent`\n    * used to set or return the text inside element.\n    * it return all its children including CSS hidden text spacing and tags.\n\n    ```javascript\n    const element = `\u003cp\u003eHtml block added by the innerHTML property\u003c/p\u003e`\n    const text = `sample text`\n    \n    paragraph.innerHTML += element;\n    paragraph.innerText += text;\n    paragraph.textContent += text;\n    ```\n## Create \u0026 Remove elements\n\n* `createElement()` - function which takes input of which element has to be created.\n* `remove()` - function which will remove the element from the document object.\n    ```javascript\n    const ul = document.querySelector('ul');\n    const item = document.createElement('li');\n    item.textContent = `This is the item added`;\n    ul.append(item);\n    const items = document.querySelectorAll('li');\n    items[3].remove();\n    ```\n\n## Attributes\n\n* `getAttribute` - used to get the value of element's attribute.\n* `setAttribute` - used to set the value of element's attribute.\n* `hasAttribute` - used to check the element has particular attribute.\n* `hasAttributes` - used to check the element has attributes.\n* `removeAttribute` - used to remove the particular attribute.\n* `createAttribute` - used to create a new attribute.\n\n## CSS Styles\n\nWe can modify or add the css styles to the element by two ways.\n\n1. `style` property\n    ```javascript\n    const paragraph = document.querySelector('.para');\n    para.style.border = '2px solid pink';\n    ```\n\n2. `setAttribute` property\n    ```javascript\n    const paragraph = document.querySelector('.para');\n    para.setAttribute('style', 'display: inline-block');\n    ```\n\n## Add \u0026 Remove classes\n\n* Add classes:\n    * adding new classes to the element.\n    ```javascript\n    const paragraph = document.querySelectorAll('p');\n    paragraph.classList.add('success');\n    ```\n\n* Remove classes:\n    * removing exsisting classes from the element.\n    ```javascript\n    const paragraph = document.querySelectorAll('p');\n    paragraph.classList.remove('success');\n    ```\n\n* Toggle classes:\n    * turning on \u0026 off of the classes for the element.\n    ```javascript\n    const paragraph = document.querySelectorAll('p');\n    paragraph.classList.toggle('success');\n    ```\n\n## Parents, Children \u0026 Siblings\n\n* `children` - returns HTMLCollection of children.\n* `parentNode` - returns the parent element.\n* `previousElementSibling` - returns the previous sibling.\n* `nextElementSibling` - returns the next sibling.\n    ```javascript\n    const paragraph = document.querySelector('p');\n    console.log(paragraph.children);\n    console.log(paragraph.parentNode);\n    console.log(paragraph.previousElementSibling);\n    console.log(paragraph.nextElementSibling);\n    ```\n\n## Mouse Events\n\n* `click` - event occurs when a click happens on elements.\n* `mouseover` - event occurs when a mouse pointer enters elements.\n* `mousemove` - event occurs when a mouse pointer moves on elements.\n* `copy` - event occurs when copy action happens on elements.\n    ```javascript\n    const button = document.querySelector('.btn');\n    button.addEventListener('click', () =\u003e {\n        console.log('clicked');\n    });\n    ```\n\n## Keyboard Events\n\n* `keydown` - event occurs when the key is pressed.\n* `keyup` - event occurs when the key is released.\n    ```javascript\n    const input = document.querySelector('input');\n    input.addEventListener('keyup', () =\u003e {\n        console.log('keyup event');\n    });\n    ```\n\n## More about Events\n\n* `event-bubbling` - event propagates from the target to way up through the document object.\n* `event-capturing` - event propagates opposite of bubbling similar to top to bottom approach.\n* `event-delegation`\n    * can provide performance benefits by assign the event listener to the parent elements.\n    * can be used to add or remove elements from the DOM.\n    ```javascript\n    const list = document.querySelector('ul');\n    list.addEventListener('click', (event) =\u003e { // listener to the parent\n        if(event.target.tagName === 'LI') {\n            event.target.remove(); // remove item from list \n        }\n    });\n    ```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaikrasheed99%2Fjavascript-dom-topics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaikrasheed99%2Fjavascript-dom-topics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaikrasheed99%2Fjavascript-dom-topics/lists"}