Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here

dom4

Modern DOM functionalities for every browser

Subscribe to updates I use dom4


Statistics on dom4

Number of watchers on Github 733
Number of open issues 3
Average time to close an issue 11 days
Main language JavaScript
Average time to merge a PR about 7 hours
Open pull requests 1+
Closed pull requests 7+
Last commit over 2 years ago
Repo Created over 7 years ago
Repo Last Updated over 2 years ago
Size 2.28 MB
Homepage http://webreflect...
Organization / Authorwebreflection
Contributors1
Page Updated
Do you use dom4? Leave a review!
View open issues (3)
View dom4 activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating dom4 for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

DOM4

build status donate

A fully tested and covered polyfill for new DOM Level 4 entries

Via cdnJS

Many thanks to cdnjs for hosting this script. Following an example on how to include it.

<script
  src="//cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"
>/* DOM4 */</script>

New v2

Both query and queryAll have been removed, while CSS :scope selector has been added.

Features

This is a fully tested and covered polyfill for both new DOM Level 4 parentNode entries:

  • Element#prepend()
  • Element#append()

And for new DOM Level 4 childNode entries:

  • Element#before()
  • Element#after()
  • Element#replaceWith() ( warning Element#replace() has been recently deprecated )
  • Element#remove()

The implemented test is conform to current specifications.

Other fixes/standardized behaviors include:

  • DOM Listener: capture, passive, and once
  • fully normalized KeyboardEvent, MouseEvent and the latest way to create new Event('type')
  • CSS :scope selector for any HTML Element (no document since useless, sorry)
  • classList, with forced fixes for iOS 5.1 and Nokia ASHA Xpress Browser and early implementations
  • CustomEvent constructor for all browsers down to IE8
  • Element#matches utility to test elements against CSS selectors
  • Element#closest utility to find element inclusive ancestor via CSS selectors
  • Node#contains utility to know if another node is inside the current one
  • requestAnimationFrame and cancelAnimationFrame are polyfilled too but the least legacy fallback to setTimeout does not support accurate timing and doesn't slow down execution with that logic. Feel free to load upfront other polyfills if needed.

If you need other polyfills too, have a look at another DOM-shim repo.

Compatibility

Theoretically compatible with all browsers you know that are truly used these days, here a list:

  • Android 2.1+
  • Safari Mobile since iOS 3.0 and Desktop
  • Opera Mobile, Mini, and Desktop
  • Blackberry 7.1 and higher
  • Samsung Bada 2 native Browser
  • Midori and most likely all other WebKit based
  • Chrome Mobile and Desktop
  • Firefox Mobile and Desktop
  • IE8+ for Desktop and IE Mobile 9 or greater.
  • Nokia Xpress Browser for ASHA Platform
  • Silk Browser - Fire OS 3.0
  • PhantomJS can benefit from DOM4 too

It's way easier if you tell me which browser in a current relevant market share is not supported :-)

For IE8 only it's recommended to include ie8 script before dom4 or CustomEvent, addEventListener, and dispatchEvent won't work as expected.

Which File

The minified version is here, while the max one here. If you want to test directly try this page, it should be green.

Want to contribute?

If you found a bug, want to contribute or have any questions feel free to fill an issue or pull request, and help us to improve the Dom4

License

Dom4 Code released under the MIT license.

dom4 open pull requests (View All Pulls)
  • insertBefore works with "null" as second argument
dom4 questions on Stackoverflow (View All Questions)
  • jQuery note in Section 5.2.2 of W3C DOM4 Specification
  • Does IE10 support DOM4 Mutation Observers?
  • How to test for DOM4 Mutation Observers with Modernizr.js?
  • DOM4: Deprecated properties and methods, what does it mean?
  • Dom4 1.6.1j: XPath that returns non-node type value possible?
dom4 list of languages used
Other projects in JavaScript