Last active
June 21, 2025 07:35
-
-
Save Offirmo/ff8232a57b95f30530ff21df5f35d685 to your computer and use it in GitHub Desktop.
[✳️DOM -- manipulation -- READING] #JavaScript #dom #browser #frontend
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // +++ https://blog.garstasio.com/you-dont-need-jquery/selectors/ | |
| // http://youmightnotneedjquery.com/ | |
| /// various access | |
| self // https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope | |
| self.origin | |
| self.isSecureContext | |
| window | |
| window.document | |
| window.document.documentElement | |
| window.document.documentElement.clientWidth // viewport size https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript | |
| window.document.documentElement.clientHeight | |
| window.document.activeElement | |
| window.navigator | |
| window.opener // a reference to the window that opened the window using open(). | |
| window.parent // never null, parent window OR current window | |
| window.frameElement | |
| // viewport size | |
| window.innerWidth | |
| window.innerHeight | |
| /////////////////////////////////////////// | |
| // location | |
| window.location or window.document.location | |
| window.location // current URL: https://developer.mozilla.org/en-US/docs/Web/API/Location | |
| window.location.href | |
| window.location.hostname vs. host = hostname + port | |
| window.location.pathname | |
| ;(new URLSearchParams(window.location.search)).get('foo') | |
| /////////////////////////////////////////// | |
| // URL | |
| const url‿obj = (new URL(window.location.href)) | |
| url‿obj.href // http://localhost:1981/?path=own--HINTS&viewMode=story | |
| url‿obj.origin // http://localhost:1981 | |
| url‿obj.host // localhost:1981 | |
| url‿obj.hostname // localhost | |
| url‿obj.pathname // / | |
| url‿obj.search // ?path=own--HINTS&viewMode=story | |
| url‿obj.hash | |
| url‿obj.searchParams.get('foo') // https://devdocs.io/dom/urlsearchparams | |
| existing_search: [...url‿obj.searchParams.keys()].reduce((acc, k) => { | |
| acc[k] = current_search_params.get(k) | |
| return acc | |
| }, {}), | |
| // rebuild the URL: | |
| const new_url = url‿obj.origin | |
| + url‿obj.pathname | |
| + url‿obj.search | |
| + url‿obj.hash | |
| /// location | |
| /// special prop of type "Location" https://developer.mozilla.org/en-US/docs/Web/API/Location | |
| function get_current_path() { | |
| return window.location.pathname.endsWith('/index.html') | |
| ? window.location.pathname.slice(0, -11) | |
| : window.location.pathname.endsWith('/') | |
| ? window.location.pathname.slice(0, -1) | |
| : window.location.pathname | |
| } | |
| // rebuild the URL: | |
| const new_url = location.origin | |
| + location.pathname | |
| + location.search | |
| + location.hash | |
| /////////////////////////////////////////// | |
| // selectors | |
| const body_elt = document.getElementsByTagName('body')[0] | |
| const htmlElement = document.querySelector('html'); | |
| const author = document.querySelector("meta[name=author]").content; | |
| /////////////////////////////////////////// | |
| // elements | |
| // attributes | |
| const id = elt.getAttribute('id') | |
| // classes | |
| const is_light_mode = !elt.classList.contains('dark') | |
| // dataset | |
| <html data-theme=dark> | |
| theme = htmlElement?.dataset?.theme | |
| /// metas | |
| // https://stackoverflow.com/questions/7524585/how-do-i-get-the-information-from-a-meta-tag-with-javascript | |
| <meta property="video" content="http://video.com/video33353.mp4" /> | |
| author = document.querySelector("meta[name=author]").content; | |
| /////////////////////////////////////////// | |
| /// forms | |
| // read checkbox state | |
| const checkboxId = `admin-dialog-checkbox-${index}` | |
| const checkBoxElmt = document.getElementById(checkboxId) | |
| return checkBoxElmt.checked | |
| // same with indirect checkbox selector | |
| const rowId = `admin-dialog-row-${index}` | |
| const checkBoxElmt = document.querySelector(`#${rowId} input`) | |
| return checkBoxElmt.checked | |
| // inside a pre-selected element | |
| element.querySelector(...) | |
| useful selectors: "`#${rowId} input[type=checkbox]`" | |
| /// click handler | |
| mySelectedElement.onclick = function(e){ | |
| // your handler here | |
| } | |
| /////////////////////////////////////////// | |
| /// read CSS | |
| const styles = getComputedStyle(document.documentElement) | |
| // variable | |
| styles.getPropertyValue('--my-variable-name') | |
| // env = not possible, use a var https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/ | |
| // media queries | |
| pcsd = window.matchMedia('(prefers-color-scheme: dark)').matches | |
| pcsl = window.matchMedia('(prefers-color-scheme: light)').matches | |
| /////////////////////////////////////////// | |
| /// detect key press | |
| // https://medium.com/@uistephen/keyboardevent-key-for-cross-browser-key-press-check-61dbad0a067a | |
| document.addEventListener('keyup', (event) => { | |
| console.log('keyup', event) | |
| if (event.code === "Space" || event.code === "Enter") { | |
| if (screenfull.enabled && !state.snapshot.is_full_screen) { | |
| screenfull.request() | |
| } | |
| } | |
| }) | |
| /// event delegation | |
| //document.addEventListener('change', event => { | |
| document.addEventListener('click', event => { | |
| try { | |
| const { target: clickedElement } = event | |
| if (!clickedElement) | |
| throw new Error('click event has no target!') | |
| if (clickedElement.matches(`#create-issue-dialog #$uuu input`)) | |
| foo() | |
| } catch (e) { | |
| experimentCatch(e, context, 'processingClick') | |
| } | |
| }) | |
| /// feature queries | |
| // @support | |
| // ?? | |
| ///////////////////////////////////////// | |
| // read cookies | |
| function getCookie(name) { | |
| const value = '; ' + document.cookie; | |
| const parts = value.split('; ' + name + '='); | |
| if (parts.length === 2) { | |
| return parts.pop().split(';').shift(); | |
| } | |
| } | |
| // https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework | |
| function getItem(sKey) { | |
| if (!sKey) { return null; } | |
| return decodeURIComponent( | |
| document.cookie.replace( | |
| new RegExp( | |
| "(?:(?:^|.*;)\\s*" | |
| + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") | |
| + "\\s*\\=\\s*([^;]*).*$)|^.*$" | |
| ), | |
| "$1" | |
| ) | |
| ) || null; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment