{"_id":"566c917d9aa84517001b4fb3","category":{"_id":"566779078c573e0d00023d96","__v":3,"pages":["566a3bf61766bf0d00e737cd","566c8b1885dc790d0062c152","566c917d9aa84517001b4fb3"],"project":"5667237eee53940d00516244","version":"5667237fee53940d00516247","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-12-09T00:42:47.468Z","from_sync":false,"order":2,"slug":"creating-custom-extensions","title":"Creating Custom Extensions"},"project":"5667237eee53940d00516244","user":"56672364f672550d00085227","githubsync":"","version":{"_id":"5667237fee53940d00516247","__v":4,"project":"5667237eee53940d00516244","createdAt":"2015-12-08T18:37:51.439Z","releaseDate":"2015-12-08T18:37:51.439Z","categories":["56672380ee53940d00516248","5667789f575ec10d00640b80","566779078c573e0d00023d96","56677e2bbe6e390d004eb463"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":6,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-12-12T21:28:29.585Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"examples":{"codes":[]},"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"The following sample demonstrates a custom plug-in that can be used to query the DOM and perform updates on DOM elements. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"//Create a jinqJs plug-in for DOM manipulation\\n//args indexes: 0 = Property, 1 = Old Value, 2 = New Value        \\njinqJs.addPlugin('updateDOM', function(result, args, store){\\n  'use strict';\\n\\n  new jinqJs()\\n    .from(result)\\n    .update( function(coll, index) {coll[index][args[0]] = args[2];})\\n    .at(args[0] + ' == ' + args[1]);\\n});\\n\\n//Get all the label HTML tags \\nvar labels = document.getElementsByTagName('label');\\nvar lblArray = [];\\n\\n$.each(labels, function(key,value) {    \\n  lblArray.push(value);\\n});\\n\\n//Update all the label tags that innerText = Tom and change it to Thomas\\nnew jinqJs().from(lblArray).updateDOM('innerText', 'Tom', 'Thomas');\",\n      \"language\": \"javascript\",\n      \"name\": \"Sample\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"See a working example\"\n}\n[/block]\n\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Ftford%2Fzodh9hpg%2Fembedded%2Fresult%2F&src=https%3A%2F%2Fjsfiddle.net%2Ftford%2Fzodh9hpg%2Fembedded%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"400\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/tford/zodh9hpg/embedded/result/\",\n  \"title\": null,\n  \"favicon\": \"https://jsfiddle.net/favicon.ico\"\n}\n[/block]","excerpt":"","slug":"dom-manipulation","type":"basic","title":"DOM Manipulation"}
The following sample demonstrates a custom plug-in that can be used to query the DOM and perform updates on DOM elements. [block:code] { "codes": [ { "code": "//Create a jinqJs plug-in for DOM manipulation\n//args indexes: 0 = Property, 1 = Old Value, 2 = New Value \njinqJs.addPlugin('updateDOM', function(result, args, store){\n 'use strict';\n\n new jinqJs()\n .from(result)\n .update( function(coll, index) {coll[index][args[0]] = args[2];})\n .at(args[0] + ' == ' + args[1]);\n});\n\n//Get all the label HTML tags \nvar labels = document.getElementsByTagName('label');\nvar lblArray = [];\n\n$.each(labels, function(key,value) { \n lblArray.push(value);\n});\n\n//Update all the label tags that innerText = Tom and change it to Thomas\nnew jinqJs().from(lblArray).updateDOM('innerText', 'Tom', 'Thomas');", "language": "javascript", "name": "Sample" } ] } [/block] [block:api-header] { "type": "basic", "title": "See a working example" } [/block] [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2Ftford%2Fzodh9hpg%2Fembedded%2Fresult%2F&src=https%3A%2F%2Fjsfiddle.net%2Ftford%2Fzodh9hpg%2Fembedded%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/tford/zodh9hpg/embedded/result/", "title": null, "favicon": "https://jsfiddle.net/favicon.ico" } [/block]