{"id":15792895,"url":"https://github.com/quasimatic/glance-dom","last_synced_at":"2025-04-01T16:30:39.939Z","repository":{"id":57434911,"uuid":"84013011","full_name":"quasimatic/glance-dom","owner":"quasimatic","description":"Quickly reference DOM elements with minimal inspection.","archived":false,"fork":false,"pushed_at":"2018-04-09T13:13:48.000Z","size":1099,"stargazers_count":6,"open_issues_count":6,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-29T21:13:57.669Z","etag":null,"topics":["css","glance","reference","selector","selenium","xpath"],"latest_commit_sha":null,"homepage":"https://quasimatic.org/glance/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quasimatic.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-06T00:23:15.000Z","updated_at":"2024-04-01T17:00:51.000Z","dependencies_parsed_at":"2022-09-04T15:04:14.195Z","dependency_job_id":null,"html_url":"https://github.com/quasimatic/glance-dom","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/quasimatic%2Fglance-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasimatic%2Fglance-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasimatic%2Fglance-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quasimatic%2Fglance-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quasimatic","download_url":"https://codeload.github.com/quasimatic/glance-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246620276,"owners_count":20806735,"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":["css","glance","reference","selector","selenium","xpath"],"created_at":"2024-10-04T23:06:39.910Z","updated_at":"2025-04-01T16:30:39.610Z","avatar_url":"https://github.com/quasimatic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Glance DOM\n\nGlance is a simple way to reference elements in the DOM. It’s intention and hope is to keep you from looking at the DOM in order to gain a handle to an element. However, if you do inspect the DOM (for example to grab a ```class``` or an ```id``` off of an element in case that's your only option) then referencing elements by classes and id’s are supported too. \n\nTo best understand how it works, experimenting with it goes a long way. You can learn how to read Glance by playing a game at [Come Take A Glance](http://quasimatic.org/take-a-glance/) or by tinkering around with our [CodePens](https://codepen.io/quasimatic/). Learn even more at [Quasimatic.org](https://quasimatic.org/glance)\n\n## Documentation\n\nFor details on all good things that are Glance, come [read the docs here](http://quasimatic.org/glance-dom). \n\nDocumenting everything is currently being worked on so if there are differences between what you see here and what you see in the GitBook, please bare with us as we're working hard to pull them together. Nothing is inconsistant between the two, but you might find some here and some there for just a while.\n\n\n### Browser\n\nIf you want to use Glance DOM in your Browser simply include it in a ```\u003cscript\u003e``` tag on your page as shown below and then use it as shown below in example-script.js\n\n```javascript\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cbutton type=\"submit\"\u003eBuy It!\u003c/button\u003e\n    \n    \u003cscript src=\"http://quasimatic.org/glance-dom/dist/glance-dom.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n    \u003cscript src=\"example-script.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n###### NOTE: In the above example Glance is being served over http. It is also available at https://quasimatic.org/glance-dom/dist/glance-dom.js\n\nAnd then in your ```example-script.js``` file you can find the element that contains \"Buy It!\" by executing the following:\n\n```javascript\nvar element = glanceDOM(\"Buy It!\");\n```\n\nOnce executed, ```element``` will contain the ```button``` element that contains the text \"Buy It!\". You never had to drop down to using any kind of CSS selector, or God forbid XPATH :)\n\n### Node\n\n```shell\nnpm install glance-dom\n```\n\n#### Example\nscript.js\n```javascript\nvar glanceDOM = require(\"glance-dom\").default;\nvar element = glanceDOM(\"click me\");\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasimatic%2Fglance-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquasimatic%2Fglance-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquasimatic%2Fglance-dom/lists"}