Will DOM3 polyfills eventually be added to this project or as a separate project? This would be a great alternative to jQuery, writing standard JavaScript supported everywhere without relying on a third-party library :)

URL should presumably be http://webreflection.github.io/dom4/

What I mean by repo URL:

Tested both in Firefox 66 and Chromium 73

a = document.createElement('div')
a.append('foo', document.createElement('p'), 25)
console.log(a.childNodes)

Both browsers will add the 25 Number as a text node. The polyfill detects string with typeof node === 'string' to create a text node, which won't catch it.

This functions are not anymore in spec.
So a polyfill should not implement it in DOM.

Catched in Sentry:

TypeError
object is not a function
/scripts/libs/dom4.js at line 2

/*! (C) Andrea Giammarchi - @WebReflection - Mit Style License */
(function(window){"use strict";function createDocumentFragment(){return document.createDocumentFragment()}function createElement(nodeName){r {snip}

User:

Opera Mobile 32.0.2254
Android 4.2.1

Note about r {snip}: it's Sentry's artifact, in real-life there is:

/*! (C) Andrea Giammarchi - @WebReflection - Mit Style License */
(function(window){"use strict";function createDocumentFragment(){return document.createDocumentFragment()}function createElement(nodeName){return document.createElement(nodeName)}

(Thanks for the great polyfill :))

The following URLs are 404s:

• test/dom4.js -> http://webreflection.github.io/dom4/test/dom4.js
• build/dom4.js -> http://webreflection.github.io/dom4/build/dom4.js
• build/dom4.max.js -> http://webreflection.github.io/dom4/build/dom4.max.js

In our app we use dom4 together with angular 1.6. It seems to be related, because dom4 fails when called from angular jqLiteDealoc function.

By debugging compiled code, I found out that the code below fails if called on DocumentFragment:

  what.querySelectorAll = function qSA(css) {
    var result = querySelectorAll.call(this, css);
    result.forEach = Array.prototype.forEach;
    return result
  }

The error itself looks like:

TypeError: Invalid calling object
   at qSA (eval code:702:11)
   at find (eval code:734:9)
   at qSA (eval code:727:9)
   at jqLiteDealoc (eval code:3252:5)
   at jqLiteEmpty (eval code:3452:3)
   at JQLite.prototype[name] (eval code:3724:9)
   at applyDirectivesToNode (eval code:9722:13)
   at compileNodes (eval code:9162:9)
   at compile (eval code:9043:7)
   at lazyCompilation (eval code:9490:11)
eval code (1881) (14794,9)

to work on this module involves reading through the Makefile and trying to work out which tasks you need to run in which order.

consider moving the npm dependencies into the 'devDependencies' field? or make some tasks dependencies of others, so running 'make test' or 'make build' works.

basically i don't really know how to run the tests. after running make dependencies, make build exits with errors and make test outputs nothing to the console.

I have added <script
src="http://cdnjs.cloudflare.com/ajax/libs/dom4/2.0.0/dom4.js"

</script> but still facing this error on IE 11. is there any solution available for that??

The standard for toggleAttribute throws an error for an invalid name. This wouldn't be true for the hasAttribute->removeAttribute code paths in the function implemented so I think this could be considered.
I was implementing this myself then was reminded to check here first 👍.

My initial code was:

    function checkValidName(propertyName) {
        let first = /[:A-Z\_a-z\xc0-\xd6\xd8-\xf6\u00f8-\u02ff\x370-\x37d\u037f-\u1fff\u200c-\u200d\u2070-\u218f\u2c00-\u2fef\x3001-\xd7ff\xf900-\xfdcf\xfdf0-\xfffd\x10000-\xeffff]/;
        let second = /[\-\.0-9\xB7\u0300-\u036f\u203f-\u2040]/;
        let chars = [...propertyName];
        
        if (!first.test(chars.shift())) {
          return false;
        }
        for (let l of chars) {
           if (!first.test(l) && !second.test(l)) {
               return false;
           } 
        }
        return true;
    }
    Element.prototype.toggleAttribute = function (propertyName) {
      const charError = "InvalidCharacterError: String contains an invalid character";
      if (!checkValidValue(propertyName)) {
          throw new Error(charError);
      }
      ...

Likely something more readable than those RegEx lines could be done also 😆

👍

i looked through the w3c specs and couldn't fidn these methods. seems like w3c just copy pasta'd https://dom.spec.whatwg.org/#interface-parentnode. should we link to whatwg specs instead?

/cc @domenic

Window.requestAnimationFrame() polyfill is not mentioned in the README, does this mean it is not supported or tested?

Are you interested in shimming more methods, some of which could benefit the libaray itself directly:

• if the reference child passing to insertBefore() is falsy, use appendChild() instead. (doesn't work for ie, not sure which versions)
• make the useCapture argument optional for addEventListener() (doesn't work for firefox before v6 according to mdn, also ie before v9)

I swear I've encountered more like these, but somehow these are only ones I can remember right now.

Microsoft Edge.

<div class="parent">
  <p class="child">
  </p>
</div>

Without DOM4:

document.querySelector('.parent').querySelector('.child') // OK
document.querySelector('.parent').querySelector('.parent > .child') // OK
document.querySelector('.parent').querySelector('> .child') // Syntax Error
document.querySelector('.parent').querySelector(':scope > .child') // Syntax Error

With DOM4:

document.querySelector('.parent').querySelector('.child') // OK
document.querySelector('.parent').querySelector('.parent > .child') // null
document.querySelector('.parent').querySelector('> .child') // OK
document.querySelector('.parent').querySelector(':scope > .child') // OK

I'm trying to use blueprintjs from ClojureScript. blueprint has a dependency on dom4. When I try to compile the code, Google Closure Compiler processes all of the JavaScript code produced by the ClojureScript compiler and also the JavaScript dependencies, including dom4.

Google Closure Compiler complains that dom4 is using a reserved word as an identifier.

Oct 31, 2017 11:02:45 AM com.google.javascript.jscomp.LoggerErrorManager println
SEVERE: /home/michael/work/personal/scratch/blueprint-test/public/js/release/node_modules/dom4/build/dom4.max.js:26: ERROR - Parse error. identifier is a reserved word
metaKey,altGraphKey);break;case 4:args.push(key,location,modifiers,repeat,locale);break;default:args.push(char,key,location,modifiers,repeat,locale)}out.initKeyboardEvent.apply(out,args)}else out.initEvent(type,bubbles,cancelable);for(key in out)if(defaults.hasOwnProperty(key)&&out[key]!==init[key])withInitValues(key,out,init);return out}KeyboardEvent.prototype=$KeyboardEvent.prototype;return KeyboardEvent}(window.KeyboardEvent||function KeyboardEvent(){});defineProperty(window,"KeyboardEvent",{value:o_O});
                                                                                                          ^

Oct 31, 2017 11:02:45 AM com.google.javascript.jscomp.LoggerErrorManager printSummary
WARNING: 1 error(s), 0 warning(s)
ERROR: JSC_PARSE_ERROR. Parse error. identifier is a reserved word at /home/michael/work/personal/scratch/blueprint-test/public/js/release/node_modules/dom4/build/dom4.max.js line 26 : 106

Looking at the code, I suspect char was supposed to be chr:

Why only Element prototype is used when polyfilling dom4 methods? I have library where comment nodes are used. remove/append and other sugar stuff is not available for them. Now i just swap Node and Element
ElementPrototype = (window.Node || window.Element || window.HTMLElement).prototype
I understand that these methods are written just in Element proto in spec, but it is inconvenient for document nodes that does not implement Element prototype...

Are these methods meant to work on shadow roots? It would be nice to traverse the DOM this way. Currently this doesn't seem to work.

this.createShadowRoot().query // undefined

It's unsupported.

https://www.infoq.com/news/2017/04/Phantomjs-future-uncertain

It would be helpful to know which browsers are supported when trying to evaluate this as a potential library.

Based on some tests with browserstack, the tests pass in

• IE8+
• iOS 3.0+ (and therefore Safari 5.0+?)
• Android 2.1+
• Chrome 27dev (what I'm running)

Is there a known lowest supported version for Chrome, Firefox, Safari or Opera?

I'm really excited about this library, and look forward to using it in my mobile projects :)

The remove() method is used to remove an option from a drop-down list and IE requires option index.

Please review my pull Request!

Just tryied this lib on IE9 and I get: SCRIPT5022 SyntaxError on line 2088 of dom4.js

How can I know the cause of this error ?

Thanks

In Dom4 v2.1.3 and IE11
A selector like "input:-webkit-autofill, textarea:-webkit-autofill" will cause a syntax error in https://github.com/WebReflection/dom4/blob/master/src/dom4.js#L725-L732

This is a similar issue to #42

The requestAnimationFrame pass no value in its callback under IE9.
Tested on IE11 with IE9 emulated on a Windows 10 Home system.

Example: https://jsfiddle.net/qrhym5w3/

It seems like queryAll has been removed from the spec. Perhaps a note could be added about that?
whatwg/dom@10b6cf1

More:
http://stackoverflow.com/a/38245620/118007

I dident test it, but i think parentNode is not defined at this line:
https://github.com/WebReflection/dom4/blob/master/src/dom4.js#L57

I think it would be better to specific the 'max' build as main, as it makes debugging much easier, and anyone who uses the file via commonjs/npm likely will minify it as part of their own build.

For whatever reason, The #dom-element-matches anchor is no longer available on the page the current Element#Matches link references in the readme.

This may give the impression to readers not keen on investigating more about the element that the Element#matches method is deprecated despite the fact all major browsers support it except IE & at one point Opera didn't according to the MDN Reference Page for the method.

I also used Browserstack to see for myself (impressive work on this library, by the way) that still the case.

**Accordingly, the link to the MDN page perhaps may make sense to reference in the meantime until another, recent W3C document surfaces references it.

Impressive work on this library, by the way.

Hi,

there is no polyfill for the getElementsByClassName function.

http://www.w3.org/TR/dom/#dom-document-getelementsbyclassname

Simplified test case:

<!DOCTYPE html>
<head>
<script
  src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.0.1/dom4.js"
>/* DOM4 */</script>
</head>
<body>
</body>

in the console:

var foo = document.createElement('div')
foo.closest

returns undefined

The other properties and methods from DOM4 do exist however.

Thank you so much for your awesome libraries and blog!

Firstly thanks for the wonderful work on this. I find it difficult to believe someone would go to the trouble to ensure DOM4 support in IE8!

I've included the non-minified version dom4.max.js into my project, and under IE8, it broke at the line 819, saying expected identifier. This was due to a trailing comma.

I've already cleaned up the problems, and added some jshint directives that lint based on Javascript 3, will follow up with a pull request.

Probably shouldn't use replaceChild() internally. Should follow the algorithm and use insertBefore() instead.

Hi.
It would be awesome to include a shim for the scope pseudoelement. This allows to select direct children of an element. For example:

ul.querySelectorAll(':scope > li:nth-child(odd)');

You can see an implementation here:

https://github.com/oscarotero/d.js/blob/master/d.js#L332

var el = document.createElement('div')
el.className = 'foo'
el.matches('.foo'))

el.matches returns a falsy value on ie9, returns true on all other tested browsers. This is tested against current master branch.

It's quite hard to track what the changes are right now

According to issue #30, query and queryAll have been removed from the spec.
Will they stay in the dom4 polyfill or will it reflect the spec and will they be removed at some point?

bower.main field must contain non-minified version

SVG elements' className attribute is not a string, so this line fails. I've had success patching it to read:

var className = (node.className.baseVal || node.className).replace(trim, '');

but there's probably a faster way to determine which one to use.

Is there a specific reason once was added to rEL for the feature test? The docs on MDN don't list this as a valid option.

I would expect the line to be rewritten as rEL('_', increment);, since there might be other browsers that will actually throw an error at this point, even though aEL('_', increment, { once: true }); functions properly.