{"id":387,"date":"2009-09-27T15:36:11","date_gmt":"2009-09-27T19:36:11","guid":{"rendered":"http:\/\/eligrey.com\/blog\/?p=387"},"modified":"2018-05-18T13:43:50","modified_gmt":"2018-05-18T20:43:50","slug":"e4x-dom-toolkit","status":"publish","type":"post","link":"https:\/\/eligrey.com\/blog\/e4x-dom-toolkit\/","title":{"rendered":"E4X DOM toolkit"},"content":{"rendered":"

I have created a small JavaScript toolkit named e4x-dom.js<\/a> for making it easy to manipulate the DOM with E4X.<\/p>\n

The following methods are implemented on XML objects by e4x-dom.js:<\/p>\n

\n
node()<\/code><\/dt>\n
Returns the HTML node representation of the XML.<\/dd>\n
over(element or selector)<\/code><\/dt>\n
Either overwrites element<\/code> or every element matched by the CSS selector with node()<\/code>.<\/dd>\n
overId(id)<\/code><\/dt>\n
Same as over(document.getElementById(id))<\/code> but also preserves the the id of the element being overwritten in the element replacing it.<\/dd>\n
fill(element or selector)<\/code><\/dt>\n
Removes every child node of element<\/code> or every element matched by the CSS selector. Then node()<\/code> is appended to all of the emptied elements.<\/dd>\n
fillId(id)<\/code><\/dt>\n
Same as fill(document.getElementById(id))<\/code><\/dd>\n
appendTo(element or selector)<\/code><\/dt>\n
Appends node()<\/code> to element<\/code> or every element matched by the CSS selector.<\/dd>\n
appendToId(id)<\/code><\/dt>\n
Same as appendTo(document.getElementById(id))<\/code>.<\/dd>\n
insertBefore(element or selector)<\/code><\/dt>\n
Inserts node()<\/code> before element<\/code> or every element matched by the CSS selector.<\/dd>\n
insertBeforeId(id)<\/code><\/dt>\n
Same as insertBefore(document.getElementById(id))<\/code>.<\/dd>\n
insertAfter(element or selector)<\/code><\/dt>\n
Inserts node()<\/code> after element<\/code> or every element matched by the CSS selector.<\/dd>\n
insertAfterId(id)<\/code><\/dt>\n
Same as insertAfter(document.getElementById(id))<\/code>.<\/dd>\n<\/dl>\n

The following are examples of using the toolkit:<\/p>\n

var img = <img\r\n src={prompt(\"Enter an image URI\")}\r\n alt={prompt(\"Describe the image\")}\r\n id=\"foobar\"\r\n\/>;\r\nimg.appendTo(document.body);\r\n\r\n<h1>The image was <em>removed<\/em>.<\/em>.overId(\"foobar\");\r\n<![CDATA[And then this text node filled the header]]>.fill(\"#foobar\");\r\n\r\n\/\/ the CDATA isn't itself put into the document but the data inside it is escaped so it\r\n\/\/ works in HTML and XHTML\r\n<h1><![CDATA[<html> in here is <escaped>]]><\/h1>.insertBefore(document.body.firstChild);\r\n\r\n\/\/ if you just want to create an element quickly, do xml.node()\r\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"\/>.node(); \/\/ SVG node\r\n<div\/>.node(); \/\/ div node\r\n\r\n\/\/ DOM methods are forwarded to .node()[method]()\r\n<canvas\/>.getContext(\"2d\");\r\n<foo bar=\"baz\"\/>.getAttribute(\"bar\") === \"baz\"; \/\/ same as getting .@bar\r\n\r\n\/\/ mass-modifications with CSS selectors\r\n<strong>Absolute links are <em>not<\/em> allowed<\/strong>\r\n .over('a[href^=\"http:\/\/\"], a[href^=\"https:\/\/\"], a[href^=\"\/\/\"]');\r\n\r\nif (user.hasEditPrivileges) {\r\n \/\/ wikipedia-style \"put an edit link at the start of each section\"\r\n <a href={\"\/edit?page=\" + page.id}>[edit]<\/a>.insertAfter('h2');\r\n}\r\n\r\n\/\/ <![CDATA[]]> nodes directly accessed are converted to text nodes:\r\n\r\n<![CDATA[\r\n This is a text node.\r\n <html> is escaped inside it.\r\n]]>.appendTo(\"#some-element\");\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
I have created a small JavaScript toolkit named e4x-dom.js for making it easy to manipulate the DOM with E4X. The following methods are implemented on XML objects by e4x-dom.js: node() Returns the HTML node representation of the XML. over(element or selector) Either overwrites element or every element matched by the CSS selector with node(). overId(id) […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[32,34,90,91,93],"class_list":["post-387","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-dom","tag-e4x","tag-javascript","tag-javascript-libraries","tag-javascript-snippets"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/pfpUD-6f","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/comments?post=387"}],"version-history":[{"count":0,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/posts\/387\/revisions"}],"wp:attachment":[{"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/media?parent=387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/categories?post=387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eligrey.com\/blog\/wp-json\/wp\/v2\/tags?post=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}